[关闭]
@guoxs 2015-10-11T17:55:36.000000Z 字数 12026 阅读 3162

SASS进阶

前端工具

1、Sass的控制命令

@if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

  1. //SCSS
  2. @mixin blockOrHidden($boolean:true) {
  3.   @if $boolean {
  4.       @debug "$boolean is #{$boolean}";
  5.       display: block;
  6.     }
  7.   @else {
  8.       @debug "$boolean is #{$boolean}";
  9.       display: none;
  10.     }
  11. }
  13. .block {
  14.   @include blockOrHidden;
  15. }
  17. .hidden{
  18.   @include blockOrHidden(false);
  19. }

编译出来的CSS:

  1. .block {
  2.   display: block;
  3. }
  5. .hidden {
  6.   display: none;
  7. }

@for循环

在制作网格系统的时候，对于.col1~.col12 这样的类，在 CSS 中需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

  1. @for $i from <start> through <end>
  2. @for $i from <start> to <end>

$i 表示变量
start 表示起始值
end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
例如：

  1. //SCSS
  2. @for $i from 1 through 3 {
  3.   .item-#{$i} { width: 2em * $i; }
  4. }
  5. //编译出来的 CSS:
  6. .item-1 {
  7.   width: 2em;
  8. }
  10. .item-2 {
  11.   width: 4em;
  12. }
  14. .item-3 {
  15.   width: 6em;
  16. }

对于to:

  1. //SCSS
  2. @for $i from 1 to 3 {
  3.   .item-#{$i} { width: 2em * $i; }
  4. }
  5. 编译出来的 CSS:
  6. .item-1 {
  7.   width: 2em;
  8. }
  10. .item-2 {
  11.   width: 4em;
  12. }

@for应用在网格系统生成各个格子class的代码：

  1. //SCSS 
  2. $grid-prefix: span !default;
  3. $grid-width: 60px !default;
  4. $grid-gutter: 20px !default;
  6. %grid {
  7.   float: left;
  8.   margin-left: $grid-gutter / 2;
  9.   margin-right: $grid-gutter / 2;
  10. }
  11. @for $i from 1 through 12 {
  12.   .#{$grid-prefix}#{$i}{
  13.     width: $grid-width * $i + $grid-gutter * ($i - 1);
  14.     @extend %grid;
  15.   }  
  16. }

编译出来的 CSS:

  1. .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  2.   float: left;
  3.   margin-left: 10px;
  4.   margin-right: 10px;
  5. }
  7. .span1 {
  8.   width: 60px;
  9. }
  11. .span2 {
  12.   width: 140px;
  13. }
  15. .span3 {
  16.   width: 220px;
  17. }
  19. .span4 {
  20.   width: 300px;
  21. }
  23. .span5 {
  24.   width: 380px;
  25. }
  27. .span6 {
  28.   width: 460px;
  29. }
  31. .span7 {
  32.   width: 540px;
  33. }
  35. .span8 {
  36.   width: 620px;
  37. }
  39. .span9 {
  40.   width: 700px;
  41. }
  43. .span10 {
  44.   width: 780px;
  45. }
  47. .span11 {
  48.   width: 860px;
  49. }
  51. .span12 {
  52.   width: 940px;
  53. }

@while循环

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

  1. //SCSS
  2. $types: 4;
  3. $type-width: 20px;
  5. @while $types > 0 {
  6.     .while-#{$types} {
  7.         width: $type-width + $types;
  8.     }
  9.     $types: $types - 1;
  10. }

编译出来的 CSS

  1. .while-4 {
  2.   width: 24px;
  3. }
  5. .while-3 {
  6.   width: 23px;
  7. }
  9. .while-2 {
  10.   width: 22px;
  11. }
  13. .while-1 {
  14.   width: 21px;
  15. }

@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

  1. @each $var in <list>

$var 就是一个变量名，<list>是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

例如：

  1. $list: adam john wynn mason kuroir;//$list 就是一个列表
  3. @mixin author-images {
  4.     @each $author in $list {
  5.         .photo-#{$author} {
  6.             background: url("/images/avatars/#{$author}.png") no-repeat;
  7.         }
  8.     }
  9. }
  11. .author-bio {
  12.     @include author-images;
  13. }

编译出 CSS:

  1. .author-bio .photo-adam {
  2.   background: url("/images/avatars/adam.png") no-repeat; }
  3. .author-bio .photo-john {
  4.   background: url("/images/avatars/john.png") no-repeat; }
  5. .author-bio .photo-wynn {
  6.   background: url("/images/avatars/wynn.png") no-repeat; }
  7. .author-bio .photo-mason {
  8.   background: url("/images/avatars/mason.png") no-repeat; }
  9. .author-bio .photo-kuroir {
  10.   background: url("/images/avatars/kuroir.png") no-repeat; }

2、Sass的函数功能-字符串与数字函数

在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括：

当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。

字符串函数-unquote()函数

字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：

  1. unquote($string)：删除字符串中的引号；
  2. quote($string)：给字符串添加引号。

1、unquote()函数
unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。

  1. //SCSS
  2. .test1 {
  3.     content:  unquote('Hello Sass!') ;
  4. }
  5. .test2 {
  6.     content: unquote("'Hello Sass!");
  7. }
  8. .test3 {
  9.     content: unquote("I'm Web Designer");
  10. }
  11. .test4 {
  12.     content: unquote("'Hello Sass!'");
  13. }
  14. .test5 {
  15.     content: unquote('"Hello Sass!"');
  16. }
  17. .test6 {
  18.     content: unquote(Hello Sass);
  19. }

编译后的 css 代码：

  1. //CSS
  2. .test1 {
  3.   content: Hello Sass!; }
  5. .test2 {
  6.   content: 'Hello Sass!; }
  8. .test3 {
  9.   content: I'm Web Designer; }
  11. .test4 {
  12.   content: 'Hello Sass!'; }
  14. .test5 {
  15.   content: "Hello Sass!"; }
  17. .test6 {
  18.   content: Hello Sass; }

注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

字符串函数-quote()函数

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。

  1. //SCSS
  2. .test1 {
  3.     content:  quote('Hello Sass!');
  4. }
  5. .test2 {
  6.     content: quote("Hello Sass!");
  7. }
  8. .test3 {
  9.     content: quote(ImWebDesigner);
  10. }
  11. .test4 {
  12.     content: quote(' ');
  13. }

编译出来的 css 代码：

  1. //CSS
  2. .test1 {
  3.   content: "Hello Sass!";
  4. }
  5. .test2 {
  6.   content: "Hello Sass!";
  7. }
  8. .test3 {
  9.   content: "ImWebDesigner";
  10. }
  11. .test4 {
  12.   content: "";
  13. }

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

  1. .test1 {
  2.     content:  quote(Hello Sass);
  3. }

这样使用，编译器马上会报错：

  1. error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

解决方案就是去掉空格，或者加上引号：

  1. .test1 {
  2.     content:  quote(HelloSass);
  3. }
  4. .test1 {
  5.     content:  quote("Hello Sass");
  6. }

同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。

字符串函数-To-upper-case()、To-lower-case()

1、To-upper-case()
To-upper-case() 函数将字符串小写字母转换成大写字母。
2、To-lower-case()
To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母。

数字函数简介

Sass 中的数字函数提要针对数字方面提供一系列的函数功能：

  • percentage($value)：将一个不带单位的数转换成百分比值；
  • round($value)：将数值四舍五入，转换成一个最接近的整数；
  • ceil($value)：将大于自己的小数转换成下一位整数；
  • floor($value)：将一个数去除他的小数部分；
  • abs($value)：返回一个数的绝对值；
  • min($numbers…)：找出几个数值之间的最小值；使用不同单位比较会报错
  • max($numbers…)：找出几个数值之间的最大值；
  • random(): 获取随机数

1、percentage()

  1. >> percentage(.2)
  2. 20%
  3. >> percentage(2px / 10px)
  4. 20%
  5. >> percentage(2em / 10em)
  6. 20%
  7. >>

如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息：

  1. >> percentage(2px / 10em)
  2. SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

3、Sass的函数功能-列表函数

列表函数简介

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2,[$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

length()函数

  1. >> length(10px)
  2. 1
  3. >> length(10px 20px (border 1px solid) 2em)
  4. 4
  5. >> length(border 1px solid)
  6. 3

length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错.
nth()函数
语法:

nth(list,n)
nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推。如：

  1. >> nth(10px 20px 30px,1)
  2. 10px
  3. >> nth((Helvetica,Arial,sans-serif),2)
  4. "Arial"
  5. >> nth((1px solid red) border-top green,1)
  6. (1px "solid" #ff0000)

注：在 nth(list,n) 函数中的 $n 必须是大于 0 的整数：

  1. >> nth((1px solid red) border-top green 1 ,0)
  2. SyntaxError: List index 0 must be a non-zero integer for `nth'

join()函数
join() 函数是将两个列表连接合并成一个列表。

  1. >> join(10px 20px, 30px 40px)
  2. (10px 20px 30px 40px)
  3. >> join((blue,red),(#abc,#def))
  4. (#0000ff, #ff0000, #aabbcc, #ddeeff)
  5. >> join((blue,red),(#abc #def))
  6. (#0000ff, #ff0000, #aabbcc, #ddeeff)

不过 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错.
但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：

  1. >> join((blue red), join((#abc #def),(#dee #eff)))
  2. (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在 join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。

join() 函数中 $separator 除了默认值 auto 之外，还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。

在 join() 函数中除非明确指定了 $separator值，否则将会有多种情形发生：

如果列表中的第一个列表中每个值之间使用的是逗号（,），那么 join() 函数合并的列表中每个列表项之间使用逗号,分隔：

  1. >> join((blue, red, #eff),(green orange))
  2. (#0000ff, #ff0000, #eeffff, #008000, #ffa500)

但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔：

  1. >> join(blue,(green, orange))
  2. (#0000ff, #008000, #ffa500)
  3. >> join(blue,(green orange))
  4. (#0000ff #008000 #ffa500)

如果列表中的第一个列表中每个值之间使用的是空格，那么 join() 函数合并的列表中每个列表项之间使用空格分隔：

  1. >> join((blue green),(red,orange))
  2. (#0000ff #008000 #ff0000 #ffa500)
  3. >> join((blue green),(red orange))
  4. (#0000ff #008000 #ff0000 #ffa500)

如果当两个列表中的列表项小于1时，将会以空格分隔：

  1. >> join(blue,red)
  2. (#0000ff #ff0000)

如此一来，会有多种情形发生，造成使用混乱的情形，如果无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并 的列表项，建议使用 join() 函数合并列表项的时候就明确指定 $separator 参数，用来指定合并的列表中使用什么方式来分隔列表项：

  1. >> join(blue,red,comma)
  2. (#0000ff, #ff0000)
  3. >> join(blue,red,space)
  4. (#0000ff #ff0000)
  5. >> join((blue green),(red,orange),comma)
  6. (#0000ff, #008000, #ff0000, #ffa500)
  7. >> join((blue green),(red,orange),space)
  8. (#0000ff #008000 #ff0000 #ffa500)
  9. >> join((blue, green),(red,orange),comma)
  10. (#0000ff, #008000, #ff0000, #ffa500)
  11. >> join((blue, green),(red,orange),space)
  12. (#0000ff #008000 #ff0000 #ffa500)
  13. >> join(blue,(red,orange),comma)
  14. (#0000ff, #ff0000, #ffa500)
  15. >> join(blue,(red,orange),space)
  16. (#0000ff #ff0000 #ffa500)
  17. >> join(blue,(red orange),comma)
  18. (#0000ff, #ff0000, #ffa500)
  19. >> join(blue,(red orange),space)
  20. (#0000ff #ff0000 #ffa500)

append()函数
append() 函数是用来将某个值插入到列表中，并且处于最末位

如果没有明确的指定 $separator 参数值，其默认值是 auto。

当然，在 append() 函数中，可以显示的设置 $separator 参数，

  1. >> append((blue green),red,comma)
  2. (#0000ff, #008000, #ff0000)
  3. >> append((blue green),red,space)
  4. (#0000ff #008000 #ff0000)
  5. >> append((blue, green),red,comma)
  6. (#0000ff, #008000, #ff0000)
  7. >> append((blue, green),red,space)
  8. (#0000ff #008000 #ff0000)
  9. >> append(blue,red,comma)
  10. (#0000ff, #ff0000)
  11. >> append(blue,red,space)
  12. (#0000ff #ff0000)

zip()函数
zip()函数将多个列表值转成一个多维的列表：

  1. >> zip(1px 2px 3px,solid dashed dotted,green blue red)
  2. ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

在使用zip()函数时，每个单一的列表个数值必须是相同的：

  1. >> zip(1px 2px 3px, solid , green blue red)
  2. NoMethodError: undefined method `options=' for nil:NilClass
  3.   Use --trace for backtrace.

否则将会出错。

zip()函数中每个单一列表的值对应的取其相同位置值：

  1. |--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
  2. |------------|--------------|--------------|--------------|
  3. |    List1   |      1px     |      2px     |      3px     |
  4. |------------|--------------|--------------|--------------|
  5. |    List2   |      solid   |      dashed  |     dotted   |
  6. |------------|--------------|--------------|--------------|
  7. |    List3   |      green   |      blue    |      red     |
  8. |------------|--------------|--------------|--------------|

zip()函数组合出来就成了：

  1. 1px solid green, 2px dashed blue, 3px dotted red

index()函数

  1. >> index(1px solid red, 1px)
  2. 1
  3. >> index(1px solid red, solid)
  4. 2
  5. >> index(1px solid red, red)
  6. 3

在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。
Introspection函数
Introspection函数包括了几个判断型函数：

type-of() 函数主要用来判断一个值是属于什么类型：

  1. >> type-of(100)
  2. "number"
  3. >> type-of(100px)
  4. "number"
  5. >> type-of("asdf")
  6. "string"
  7. >> type-of(asdf)
  8. "string"
  9. >> type-of(true)
  10. "bool"
  11. >> type-of(false)
  12. "bool"
  13. >> type-of(#fff)
  14. "color"
  15. >> type-of(blue)
  16. "color"
  17. >> type-of(1 / 2 = 1)
  18. "string"

unit()函数
unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

  1. >> unit(100)
  2. ""
  3. >> unit(100px)
  4. "px"
  5. >> unit(20%)
  6. "%"
  7. >> unit(1em)
  8. "em"
  9. >> unit(10px * 3em)
  10. "em*px"
  11. >> unit(10px / 3em)
  12. "px/em"
  13. >> unit(10px * 2em / 3cm / 1rem)
  14. "em/rem"

但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外.

  1. >> unit(1px + 1cm)
  2. "px"
  3. >> unit(1px - 1cm)
  4. "px"
  5. >> unit(1px + 1mm)
  6. "px"
  7. >> unit(10px * 2em - 3cm / 1rem)
  8. SyntaxError: Incompatible units: 'cm' and 'px*em'.
  9. >> unit(10px * 2em - 1px / 1rem)
  10. SyntaxError: Incompatible units: '' and 'em'.
  11. >> unit(1px - 1em)
  12. SyntaxError: Incompatible units: 'em' and 'px'.
  13. >> unit(1px - 1rem)
  14. SyntaxError: Incompatible units: 'rem' and 'px'.
  15. >> unit(1px - 1%)
  16. SyntaxError: Incompatible units: '%' and 'px'.
  17. >> unit(1cm + 1em)
  18. SyntaxError: Incompatible units: 'em' and 'cm'.

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false.
comparable()函数
comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

  1. >> comparable(2px,1px)
  2. true
  3. >> comparable(2px,1%)
  4. false
  5. >> comparable(2px,1em)
  6. false
  7. >> comparable(2rem,1em)
  8. false
  9. >> comparable(2px,1cm)
  10. true
  11. >> comparable(2px,1mm)
  12. true
  13. >> comparable(2px,1rem)
  14. false
  15. >> comparable(2cm,1mm)
  16. true

Miscellaneous函数
在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

  1. if($condition,$if-true,$if-false)

上面表达式的意思是当 condition条件成立时，返回的值为if-true，否则返回的是 $if-false 值。

  1. >> if(true,1px,2px)
  2. 1px
  3. >> if(false,1px,2px)
  4. 2px

Map
Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

  1. {
  2. "employees": [
  3. { "firstName":"John" , "lastName":"Doe" },
  4. { "firstName":"Anna" , "lastName":"Smith" },
  5. { "firstName":"Peter" , "lastName":"Jones" }
  6. ]
  7. }

那么 Sass 的 map 长得与 JSON 极其相似：

  1. $map: (
  2.     $key1: value1,
  3.     $key2: value2,
  4.     $key3: value3
  5. )

在 Sass 中常用下面的方式定义变量：

  1. $default-color: #fff !default;
  2. $primary-color: #22ae39 !default;

使用 map 可以更好的进行管理：

  1. $color: (
  2.     default: #fff,
  3.     primary: #22ae39
  4. );

如果需要新增加颜色变量值，在 map 中可以非常随意的添加：

  1. $color: (
  2.     default: #fff,
  3.     primary: #22ae39,
  4.     negative: #d9534f
  5. );

对于 Sass 的 map，还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map，里面可以继续放一对或者多对 key:value：

  1. $map: (
  2.     key1: value1,
  3.     key2: (
  4.         key-1: value-1,
  5.         key-2: value-2,
  6.     ),
  7.     key3: value3
  8. );

map 的嵌套实用性也非常的强，比如过换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。可以这样使用：

  1. $theme-color: (
  2.     default: (
  3.         bgcolor: #fff,
  4.         text-color: #444,
  5.         link-color: #39f
  6.     ),
  7.     primary:(
  8.         bgcolor: #000,
  9.         text-color:#fff,
  10.         link-color: #93f
  11.     ),
  12.     negative: (
  13.         bgcolor: #f36,
  14.         text-color: #fefefe,
  15.         link-color: #d4e
  16.     )
  17. );

Sass Maps的函数
前面介绍了使用 map 来管理变量，但要在 Sass 中获取变量，或者对 map 做更多有意义的操作，我们必须借助于 map 的函数功能。在 Sass 中 map 自身带了七个函数：

  1. map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
  2. map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
  3. map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
  4. map-keys($map)：返回 map 中所有的 key。
  5. map-values($map)：返回 map 中所有的 value。
  6. map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
  7. keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

4、Sass的函数功能-颜色函数

5、Sass 的 @ 规则

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注