20190421-那些年使用过的CSS预处理器（CSS Preprocessor）

2023-02-12 09:41:31

写在前面的乱七八糟的前言：

emmm，不得不说，早上七点是个好时间，公园里跳广场舞的大妈，街边卖菜刀看报的大爷，又不得不说，广州图书馆是个好地方，该有的安静，该有的人气，听着楼下小孩子的声音，看着周围各色各样的人，emmm比如：无视请勿饮食的标识语正在吃东西的小姐姐，好像是个三明治- -，我不会承认，我也饿了的TAT，老生常谈那么几句，一直秉承着不仅要学会用也要知道用的这些从何处而来，所构成的逻辑及背后的故事，总不能哪天面试官问你，谈谈你对CSS预处理器的看法，或问，你觉得Sass方便在哪，然后一脸懵逼的双目对视？真是像极了爱情？emmmm，好的，我皮够了，下面依旧是从"是什么/有什么/为什么"切入。

1、她从何处来——CSS预处理器的产生

2、她长什么样——什么是CSS预处理器

3、她家几姐妹——CSS预处理器分类（Sass、Less、Stylus）

4、如何攻略她——CSS预处理器优缺点

5、如何使用她——CSS预处理器的使用

5.1变量

5.2运算

5.3嵌套

5.4注释

5.5代码的重用：混合、扩展、函数、插入文件

5.6高级用法：条件语句、循环语句、自定义函数

内容

1、她从何处来——CSS预处理器的产生

既然叫CSS预处理器，肯定跟CSS有某些不可描述的故事，CSS是一门非程序式的语言，变量×，函数×，SCOPE（作用域）×，条件语句×，在前期进行界面设计时，需要书写大量的、无逻辑、不易维护、不易扩展、不易重复调用的代码，诚然，经验老道的大佬们都会采用公共类名、各类选择器等，但对于老夫这种小白emmm，CSS预处理器就是福音呐——

2、她长什么样——什么是CSS预处理器

CSS预处理器的基本思想是：用一种专门的编程语言，为CSS加入一些编程特性，将CSS作为目标生成文件，然后开发者只需要使用这种语言进行编码。在无需考虑浏览器兼容性问题的前提下，使用变量/简单的逻辑程序/函数等在编程语言中的一些基本特性。

3、她家几姐妹——CSS预处理器分类

目前使用最多的三款CSS预处理器：Sass、Less、Stylus，讲真，最后一款，可能因为我还太小白，孤陋寡闻，以致听都没听过，没使用过没有发言权，就不种草了。

3.1Sass

Sass产生：2007年，目前为止，最早最成熟的CSS预处理器，拥有ruby社区与compass框架的支持，受Less影响，已进化到了全面兼容CSS的SCSS

Sass中文网

3.2Less

Less产生：2009年，受Sass影响较大，但又使用CSS语法，简单易上手，在ruby社区外支持者远超过Sass，但与Sass相比，编程功能不够，优点仅简单与兼容CSS，但神奇的是：Twitter Bookstrap采用Less做底层语言的。

Less中文网

3.3Stylus

Stylus产生：2010年，来自Node.js社区，主要用于给Node项目进行CSS预处理支持。

4、如何攻略她——CSS预处理器优缺点

4.1优点

↑开发速度

↑代码优化效率

代码更通俗易懂》》维护简单便捷

通俗一句旁白：Sass与Less就是CSS里的jQuery

4.2缺点

↓用户体验

↓网页打开速度

需要一定的学习过程

5、如何使用她——CSS预处理器的使用

5.1变量（Variables）

无需重复书写：将反复使用的css属性定义为变量，然后通过变量名来引用它们

赋予易懂的变量名：让人一眼看出属性值用途

5.2运算（Operations）

5.2.1数字运算（Number Operations）

支持数字的加减乘除，取整等（+；-；×；/；%），若必要时会在不同单位间转换值

关系运算（<；>；<=；>=；==；!=）

ps：除法运算与分割符（/）

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能

以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分

p {

  font: 10px/8px;             // Plain CSS, no division

  $width: 1000px;

  width: $width/2;            // Uses a variable, does division

  width: round(1.5)/2;        // Uses a function, does division

  height: (500px/2);          // Uses parentheses, does division

  margin-left: 5px + 8px/2px; // Uses +, does division

}

编译为

p {

  font: 10px/8px;

  width: 500px;

  height: 250px;

  margin-left: 9px;

}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用#{}插值语句将变量包裹

p {

  $font-size: 12px;

  $line-height: 30px;

  font: #{$font-size}/#{$line-height};

}

编译为

p {font: 12px/30px; }

5.2.2颜色运算（Color Operations）

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值

p {

  color: #010203 + #040506;

}

//01 + 04 = 05 02 + 05 = 07 03 + 06 = 09

编译为

p {color: #050709; }

但使用color functions比计算颜色值更方便一些

p {color: #010203 * 2;}
//01 * 2 = 02 02 * 2 = 04 03 * 2 = 06

编译为:

p {color: #020406; }

ps:若颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值

颜色值的 alpha channel 可以通过opacify或 transparentize两个函数进行调整

$translucent-red: rgba(255, 0, 0, 0.5);

p {

  color: opacify($translucent-red, 0.3);

  background-color: transparentize($translucent-red, 0.25);

}

编译为

p {

  color: rgba(255, 0, 0, 0.8);

  background-color: rgba(255, 0, 0, 0.25);

 }

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式

$translucent-red: rgba(255, 0, 0, 0.5);

$green: #00ff00;

div {

  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');

}

编译为：

div {

  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);

}

5.2.3字符串运算（String Operations）

5.2.4布尔值运算（Boolean Operations）

5.2.5数组运算（List Operations）

使用list functions控制

5.3嵌套（Nested）

5.3.1选择器嵌套

保留Html中的代码结构，默认后代选择器

需子代选择器，则在子代前加>

&表示上一层

5.3.2属性嵌套（Nested Properties）

5.3.3伪类嵌套

5.4注释（Comment）

5.4.1多行注释/* */：完整输出到编译后文件

5.4.2单行注释/ /：在非compressed压缩模式下会被编译到CSS文件中

5.4.3强调注释/*! */：在/*后面加一个感叹号，表示这是"重要注释"，即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息

ps：插值语句 (interpolation) 也可写进多行注释中输出变量值：

$version: "1.2.3";

/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

5.5代码的重用：混合、扩展、函数、插入文件

5.5.1混合（Mixins）

将部分样式抽出，作为单独定义的模板，被多选择器调用，如某段样式经常用到多个元素时，需重复写多次，则可使用

5.5.1.1无参混合：声明：.name{ }；调用：调用选择器

5.5.1.2带参混合：

5.5.1.2.1无默认值声明：.name（@param）{ } 调用：name（parValue）； parValue不可省

5.5.1.2.2有默认值声明：.name（param：value( )）{ } 调用：name（parValue）； parValue可省

ps：无参混合会在CSS中编译同名的class选择器，带参的不会。

5.5.2扩展（Extand）

5.5.3函数（Function）

5.5.4导入文件（@import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突

5.6高级用法：条件语句、循环语句、自定义函数

5.6.1条件语句：@if @else

5.6.2循环语句：@for @while

5.6.3自定义函数

参考文献：

【前端】CSS预处理语言总结比较

详说css与预处理器（以及less、sass、stylus的区别）

阮一峰Sass用法指南

我是无处安放的小结：

现在是16:17分，除去中间吃掉的一个半小时，有点困了，emmm，但是，但是，刚刚手贱的认识了Sass的toolkit——Compass，停不下来了，艾玛真香，我快哭了。请容我休息一会，再整理补充~

现在是18:04分，本文最重点的部分还是打算另开一篇，好好盘一番，emmm最重要还是在怎么使用它，但是Sass的用法确实比Less高级那么一丢丢。希望不要太难搞啊~

码农公寓

相关文章