三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

时间  2019-11-09
标签 三个 css 预处理 框架 sass stylus 栏目 CSS 繁體版
原文   原文链接

CSS 预处理器技术已经很是的成熟，并且也涌现出了愈来愈多的 CSS 的预处理器框架。本文向你介绍使用最为广泛的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。css

首先咱们来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增长一些编程的的特性，无需考虑浏览器的兼容性问题，例如你能够在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。html

不要再停留在石器时代了，下面让咱们开始 CSS 预处理器之旅。git

咱们将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操做符等方面分别对这三个框架进行比较介绍。github

语法web

在使用 CSS 预处理器以前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差很少。编程

首先 Sass 和 Less 都使用的是标准的 CSS 语法，所以若是你能够很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。浏览器

下面是这两者的语法：sass

?
1
2
3
4
/* style.scss or style.less */
h 1 {
   color : #0982C1 ;
}

 

你注意到了，这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：框架

?
1
2
3
/* style.sass */
h 1
   color : #0982c1

而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法：less

?
1
2
3
4
5
6
7
8
9
10
11
12
/* style.styl */
h 1 {
   color : #0982C1 ;
}
  
/* omit brackets */
h 1
   color : #0982C1 ;
  
/* omit colons and semi-colons */
h 1
   color #0982C1

你也能够在同一个样式单中使用不一样的变量，例以下面的写法也不会报错：

?
1
2
3
4
5
h 1 {
   color #0982c1
}
h 2
   font-size : 1.2em

变量

你能够在 CSS 预处理器中声明变量，并在整个样式单中使用，支持任何类型的变量，例如颜色、数值（不论是否包括单位）、文本。而后你能够任意引用该变量。

Sass 的变量必须是 $ 开始，而后变量名和值使用冒号隔开，跟 CSS 的属性一致：

?
1
2
3
4
5
6
7
8
9
$mainColor: #0982c1 ;
$siteWidth: 1024px ;
$borderStyle: dotted ;
  
body {
   color : $mainColor;
   border : 1px $borderStyle $mainColor;
   max-width : $siteWidth;
}

而 Less 的变量名使用 @ 符号开始：

?
1
2
3
4
5
6
7
8
9
@mainColor: #0982c1 ;
@siteWidth: 1024px ;
@borderStyle: dotted ;
  
body {
   color : @mainColor;
   border : 1px @borderStyle @mainColor;
   max-width : @siteWidth;
}

Stylus 对变量名没有任何限定，你能够是 $ 开始，也能够是任意的字符，并且与变量值之间能够用冒号、空格隔开，须要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量，但其对应的值并不会赋予该变量，换句话说，在 Stylus 的变量名不要用 @ 开头。

?
1
2
3
4
5
6
7
8
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
  
body
   color mainColor
   border 1px $borderStyle mainColor
   max-width siteWidth

上面的三种不一样的 CSS 预处理器的写法，最终都将产生相同的结果：

?
1
2
3
4
5
body {
   color : #0982c1 ;
   border : 1px dotted #0982c1 ;
   max-width : 1024px ;
}

你能够想象，加入你的 CSS 中使用了某个颜色的地方多达数十次，那么要修改颜色时你必须找到这数十次的地方并一一修改，而有了 CSS 预处理器，修改一个地方就够了！

嵌套

若是咱们须要在CSS中相同的 parent 引用多个元素，这将是很是乏味的，你须要一遍又一遍地写 parent。例如：

?
1
2
3
4
5
6
7
8
9
10
11
12
section {
   margin : 10px ;
}
section nav {
   height : 25px ;
}
section nav a {
   color : #0982C1 ;
}
section nav a:hover {
   text-decoration : underline ;
}

而若是用 CSS 预处理器，就能够少些不少单词，并且父子节点关系一目了然。咱们这里提到的三个 CSS 框架都是容许嵌套语法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section {
   margin : 10px ;
  
   nav {
     height : 25px ;
  
     a {
       color : #0982C1 ;
  
       &:hover {
         text-decoration : underline ;
       }
     }
   }
}

最终生成的 CSS 结果是：

?
1
2
3
4
5
6
7
8
9
10
11
12
section {
   margin : 10px ;
}
section nav {
   height : 25px ;
}
section nav a {
   color : #0982C1 ;
}
section nav a:hover {
   text-decoration : underline ;
}

很是之方便！

Mixins (混入)

Mixins 有点像是函数或者是宏，当你某段 CSS 常常须要在多个元素中使用时，你能够为这些共用的 CSS 定义一个 Mixin，而后你只须要在须要引用这些 CSS 地方调用该 Mixin 便可。

Sass 的混入语法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px ) {
   border : $borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   @ include error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   @ include error( 5px ); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less CSS 的混入语法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px ) {
   border : @borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   .error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   .error( 5px ); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus 的混入语法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px ) {
   border : borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   error( 5px ); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

最终它们都将编译成以下的 CSS 样式：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.generic-error {
   padding : 20px ;
   margin : 4px ;
   border : 2px solid #f00 ;
   color : #f00 ;
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   border : 5px solid #f00 ;
   color : #f00 ;
}

继承

当咱们须要为多个元素定义相一样式的时候，咱们能够考虑使用继承的作法。例如咱们常常须要：

?
1
2
3
4
5
p,
ul,
ol {
   /* styles here */
}

在 Sass 和 Stylus 咱们能够这样写：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
. block {
   margin : 10px 5px ;
   padding : 2px ;
}
  
p {
   @extend . block ; /* Inherit styles from '.block' */
   border : 1px solid #EEE ;
}
ul, ol {
   @extend . block ; /* Inherit styles from '.block' */
   color : #333 ;
   text-transform : uppercase ;
}

在这里首先定义 .block 块，而后让 p 、ul 和 ol 元素继承 .block ，最终生成的 CSS 以下：

?
1
2
3
4
5
6
7
8
9
10
11
. block , p, ul, ol {
   margin : 10px 5px ;
   padding : 2px ;
}
p {
   border : 1px solid #EEE ;
}
ul, ol {
   color : #333 ;
   text-transform : uppercase ;
}

在这方面 Less 表现的稍微弱一些，更像是混入写法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
. block {
   margin : 10px 5px ;
   padding : 2px ;
}
  
p {
   . block ; /* Inherit styles from '.block' */
   border : 1px solid #EEE ;
}
ul, ol {
   . block ; /* Inherit styles from '.block' */
   color : #333 ;
   text-transform : uppercase ;
}

生成的 CSS 以下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
. block {
   margin : 10px 5px ;
   padding : 2px ;
}
p {
   margin : 10px 5px ;
   padding : 2px ;
   border : 1px solid #EEE ;
}
ul,
ol {
   margin : 10px 5px ;
   padding : 2px ;
   color : #333 ;
   text-transform : uppercase ;
}

你所看到的上面的代码中，.block 的样式将会被插入到相应的你想要继承的选择器中，但须要注意的是优先级的问题。

导入 (Import)

不少 CSS 开发者对导入的作法都不太感冒，由于它须要屡次的 HTTP 请求。可是在 CSS 预处理器中的导入操做则不一样，它只是在语义上包含了不一样的文件，但最终结果是一个单一的 CSS 文件，若是你是经过 @ import "file.css"; 导入 CSS 文件，那效果跟普通的 CSS 导入同样。注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，所以须要避免它们互相冲突。

reset.css:

?
1
2
3
4
/* file.{type} */
body {
   background : #EEE ;
}

main.xxx:

?
1
2
3
4
5
6
@ import "reset.css" ;
@ import "file.{type}" ;
  
p {
   background : #0982C1 ;
}

最终生成的 CSS：

?
1
2
3
4
5
6
7
@ import "reset.css" ;
body {
   background : #EEE ;
}
p {
   background : #0982C1 ;
}

颜色函数

CSS 预处理器通常都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。

Sass：

?
1
2
3
4
5
6
7
8
9
10
11
lighten($color, 10% ); /* returns a color 10% lighter than $color */
darken($color, 10% );  /* returns a color 10% darker than $color */
  
saturate($color, 10% );   /* returns a color 10% more saturated than $color */
desaturate($color, 10% ); /* returns a color 10% less saturated than $color */
  
grayscale($color);  /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert ($color);     /* returns inverted color of $color */
  
mix ($color 1 , $color 2 , 50% ); /* mix $color1 with $color2 with a weight of 50% */

 

上面只是简单列了 Sass 的一些基本颜色处理函数，完整的列表请看 Sass Documentation.

下面是一个具体的例子：

?
1
2
3
4
5
6
$ color : #0982C1 ;
  
h 1 {
   background : $color;
   border : 3px solid darken($color, 50% );
}

Less CSS:

?
1
2
3
4
5
6
7
8
9
10
lighten(@color, 10% ); /* returns a color 10% lighter than @color */
darken(@color, 10% );  /* returns a color 10% darker than @color */
  
saturate(@color, 10% );   /* returns a color 10% more saturated than @color */
desaturate(@color, 10% ); /* returns a color 10% less saturated than @color */
  
spin(@color, 10 );  /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10 ); /* returns a color with a 10 degree smaller hue than @color */
  
mix (@color 1 , @color 2 ); /* return a mix of @color1 and @color2 */

 

LESS 完整的颜色函数列表请看 LESS Documentation.

LESS 使用颜色函数的例子：

?
1
2
3
4
5
6
@ color : #0982C1 ;
  
h 1 {
   background : @color;
   border : 3px solid darken(@color, 50% );
}

Stylus:

?
1
2
3
4
5
lighten(color, 10% ); /* returns a color 10% lighter than 'color' */
darken(color, 10% );  /* returns a color 10% darker than 'color' */
  
saturate(color, 10% );   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10% ); /* returns a color 10% less saturated than 'color' */

 

完整的颜色函数列表请阅读 Stylus Documentation.

实例：

?
1
2
3
4
5
color = #0982C1
  
h 1
   background color
   border 3px solid darken(color, 50% )

运算符

你能够直接在 CSS 预处理器中进行样式的计算，例如：

?
1
2
3
4
5
6
body {
   margin : ( 14px / 2 );
   top : 50px + 100px ;
   right : 100px - 50px ;
   left : 10 * 10 ;
}

一些跟具体浏览器相关的处理

这是宣传使用预处理的缘由之一，而且是一个很好的理由，这样能够节省的大量的时间和汗水。建立一个mixin来处理不一样浏览器的CSS写法是很简单的，节省了大量的重复工做和痛苦的代码编辑。

Sass

?
1
2
3
4
5
6
7
8
9
@mixin border-radius($values) {
   -webkit-border-radius: $values;
      -moz-border-radius: $values;
           border-radius: $values;
}
  
div {
   @ include border-radius( 10px );
}

Less CSS

?
1
2
3
4
5
6
7
8
9
.border-radius(@values) {
   -webkit-border-radius: @values;
      -moz-border-radius: @values;
           border-radius: @values;
}
  
div {
   .border-radius( 10px );
}

Stylus

?
1
2
3
4
5
6
7
8
9
border-radius(values) {
   -webkit-border-radius: values;
      -moz-border-radius: values;
           border-radius: values;
}
  
div {
   border-radius( 10px );
}

编译结果：

?
1
2
3
4
5
div {
   -webkit-border-radius: 10px ;
      -moz-border-radius: 10px ;
           border-radius: 10px ;
}

3D文本

要生成具备 3D 效果的文本可使用 text-shadows ，惟一的问题就是当要修改颜色的时候就很是的麻烦，而经过 mixin 和颜色函数能够很轻松的实现：

Sass

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin text 3 d($color) {
   color : $color;
   text-shadow : 1px 1px 0px darken($color, 5% ),
                2px 2px 0px darken($color, 10% ),
                3px 3px 0px darken($color, 15% ),
                4px 4px 0px darken($color, 20% ),
                4px 4px 2px #000 ;
}
  
h 1 {
   font-size : 32pt ;
   @ include text 3 d( #0982c1 );
}

Less CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.text 3 d(@color) {
   color : @color;
   text-shadow : 1px 1px 0px darken(@color, 5% ),
                2px 2px 0px darken(@color, 10% ),
                3px 3px 0px darken(@color, 15% ),
                4px 4px 0px darken(@color, 20% ),
                4px 4px 2px #000 ;
}
  
span {
   font-size : 32pt ;
   .text 3 d( #0982c1 );
}

Stylus

?
1
2
3
4
5
6
text 3 d(color)
   color : color
   text-shadow : 1px 1px 0px darken(color, 5% ), 2px 2px 0px darken(color, 10% ), 3px 3px 0px darken(color, 15% ), 4px 4px 0px darken(color, 20% ), 4px 4px 2px #000
span
   font-size : 32pt
   text 3 d( #0982c1 )

生成的 CSS

?
1
2
3
4
5
6
7
8
9
span {
   font-size : 32pt ;
   color : #0982c1 ;
   text-shadow : 1px 1px 0px #097bb7 ,
                2px 2px 0px #0875ae ,
                3px 3px 0px #086fa4 ,
                4px 4px 0px #07689a ,
                4px 4px 2px #000 ;
}

效果图：

列 (Columns)

使用数值操做和变量能够很方便的实现适应屏幕大小的布局处理。

Sass

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$siteWidth: 1024px ;
$gutterWidth: 20px ;
$sidebarWidth: 300px ;
  
body {
   margin : 0 auto ;
   width : $siteWidth;
}
.content {
   float : left ;
   width : $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
   float : left ;
   margin-left : $gutterWidth;
   width : $sidebarWidth;
}

Less CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@siteWidth: 1024px ;
@gutterWidth: 20px ;
@sidebarWidth: 300px ;
  
body {
   margin : 0 auto ;
   width : @siteWidth;
}
.content {
   float : left ;
   width : @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
   float : left ;
   margin-left : @gutterWidth;
   width : @sidebarWidth;
}

Stylus

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
siteWidth = 1024px ;
gutterWidth = 20px ;
sidebarWidth = 300px ;
  
body {
   margin : 0 auto ;
   width : siteWidth;
}
.content {
   float : left ;
   width : siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
   float : left ;
   margin-left : gutterWidth;
   width : sidebarWidth;
}

实际效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
   margin : 0 auto ;
   width : 1024px ;
}
.content {
   float : left ;
   width : 704px ;
}
.sidebar {
   float : left ;
   margin-left : 20px ;
   width : 300px ;
}

错误报告

若是你常常 CSS 你会发现很难找到 CSS 中错误的地方，这也是预处理框架的好处，它会报告错误，你能够从这篇文章中学习如何让 CSS 框架错误报告。

注释

以上三种框架都支持形如 /* */ 的多行注释以及 // 的单行注释。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程