Sass进阶-学习笔记

2018-01-03 本文已影响72人没汁帅

四、Sass的控制命令

4.1 @if

@if是一个SassScript，它可以根据条件来处理样式块，true返回一个样式，false返回另一个样式块。另外也可与@else if和else一起使用。
假设要控制一个元素的隐藏或显示，我们就可以定义一个混合宏，通过@if...@else...来判断传进参数的值来控制display的值：

@mixin showOrHide($boolean: reue){
  @if $boolean{
    @debug "$boolean is #{$boolean}";     //@debug是编译出错后的提示
    display: block;
  }@else{
    @debug "$boolean is #{$boolean}";
    display: none;
  }
}

.show{
  @include showOrHide;
}
.hide{
  @include showOrHide(false);
}

编译的CSS

.show {
  display: block;
}
.hide {
  display: none;
}

^[3]

4.2 @for循环（上）

CSS 写网格系统时，.col1~.col12需要一个一个写，Sass中可以使用@for循环来写，有以下两种方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

through 表示包括 end 这个数；
to 表示不包括 end 这个数。

through.png

to.png

^[4]

4.3 @for循环（下）

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

@for循环写网格系统的格子.png

^[5]

4.4 @while循环

这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。示例：

$num: 3;
$col-width: 20px;

@while $num > 0{
  .col#{$num}{
    width: $col-width + $num;
  }
  $num: $num - 1;
}

编译后的CSS：

.col3 {
  width: 23px;
}
.col2 {
  width: 22px;
}
.col1 {
  width: 21px;
}

while.png

^[6]

4.5 @each循环

@each循环就是去遍历一个列表，然后从列表中取出对应的值。
@each循环指令的形式 @each $var in <list>
其中$var就是一个变量名，$list是一个表达式，返回一个列表值，变量$var会在列表做遍历，并且遍历出与$var对应的样式块。示例：

$list: adam john wynn mason kuroir;   //$list 就是一个列表

@mixin author-images{
  @each $author in $list{
    .photo-#{$author} {
      background: url("/images/avatars/#{$author}.png") no-repeat;
    } } }

.author-bio{
  @include author-images;
}

编译后的CSS：

image.png

^[7]

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

已经学过的函数 @extend、 %placeholder 、@mixin，Sass还有其他的函数：

字符串函数
数字函数
列表函数
颜色函数
Introspection函数
三元函数
自定义函数

^[8]

**5.1 字符串函数

unquote($string): 删除字符串中的引号；
quote($string): 给字符串添加引号；

5.1.1 unquote()函数

unquote()函数.png
从上图可以看出，unquote()函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果没有带引号，返回字符串本身。

5.1.2 quote()函数
quote()主要用来给字符串添加引号，如果本身带有引号，则会统一换成双引号。示例：

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

image.png
解决办法就是给字符串加上引号：

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

5.1.3 To-upper-case()函数与 To-lower-case()函数
To-upper-case() 函数将字符串小写字母转换成大写字母。示例：

To-upper-case() 函数.png
To-lower-case() 函数与 To-upper-case() 刚好相反，将字符串转换成小写字母。示例：

To-lower-case() 函数

^[9]

5.2 数字函数

Sass中的数字函数有以下几个：

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

5.2.1 percentage($value)函数
将一个不带单位的数转为百分比值：

percentage($value)
注意，运算时单位不一致会报错。

5.2.2 round()函数
将数值四舍五入，转换成一个最接近的整数：

round()函数

5.2.3 ceil()函数
将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算：

ceil()函数

5.2.4 floor()函数
将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算：

floor()函数

5.2.5 abs()函数
abs() 函数会返回一个数的绝对值：

abs()函数

5.2.6 min()函数、max()函数

min()函数：在多个数中找到最小的一个，可设置任意多个参数；
max()函数：在多个数中找到最大的那个，可设置多个参数：

比较会忽略非数字的符号

如果比较函数中存在单位不一致，会报错：

单位不一致报错
注意：min()和max()是两两相比，结果再于第三个比较，以此类推。

5.2.7 random()函数
random() 函数是用来获取一个随机数：

随机数

^[10]

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

主要包括一些对列表参数的函数使用：

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

^[11]

6.1 length()函数

length() 函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：

>>length(5px 88px (border 66px solid) 4em  (border 8em solid)) ；   //返回5

列表中的参数之间使用空格隔开，不能使用逗号，否则将会出错。

^[12]

6.2 nth()函数

语法: nth($list,,$n)
nth()函数用来指定列表中每个位置的值。

>>nth(10px 20px 30px,2) ;                  //20px
>>nth((Helvetica,Arial,sans-serif),2);     //"Arial"
>>nth((1px solid red) border-top green,1)  //(1px "solid" #ff0000)

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

^[13]

6.3 join()函数

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

>>join(10px 20px ,30px 40px);    //(10px 20px 30px 40px)
>>join((blue,red),(#abc,#def));    //(#0000ff, #ff0000, #aabbcc, #ddeeff)

如果需要连接两个以上的列表：

>>join((blue red),join((#abc #def),(#dee #eff)));   //(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在join()函数中还有一个很特别的参数$separator，这个参数主要是用来给列表函数连接列值时，使用的分隔符号，默认值：auto
除了默认值外，还有comma和space两个值，comma值指定列表中列表值之间使用(,)，space值指定列表中的列表项之间用空格( )分割。

默认值auto会发生多种情形:

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

>>join((blue, red, #eff),(green orange));   //(#0000ff, #ff0000, #eeffff, #008000, # ffa500)

第一个列表中只有一个列表项，join()函数合并的列表项目中每个列表之间使用的分隔符会根据第二个列表项使用的分隔符决定：

>> join(blue,(green, orange));    //(#0000ff, #008000, #ffa500)
>> join(blue,(green orange));    //(#0000ff #008000 #ffa500)

第一个列表中每个值以空格分隔，合并后也是用空格：

>>join((blue red #eff),(green,orange));   //(#0000ff #ff0000 #eeffff #008000 # ffa500)

合并的两个列表都只有一个列表项，将会以空格分隔：

>> join(blue,red);    //(#0000ff #ff0000)

为了避免出现无法区分的情况，使用join()函数时，使用$separator参数来指定：

>> join(blue,red,comma);                     //(#0000ff, #ff0000)
>> join(blue,red,space);                     //(#0000ff #ff0000)
>> join((blue green),(red,orange),comma);    //(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space);    //(#0000ff #008000 #ff0000 #ffa500)
>> join((blue, green),(red,orange),comma);   //(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue, green),(red,orange),space);   //(#0000ff #008000 #ff0000 #ffa500)
>> join(blue,(red,orange),comma);            //(#0000ff, #ff0000, #ffa500)
>> join(blue,(red,orange),space);            //(#0000ff #ff0000 #ffa500)
>> join(blue,(red orange),comma);            //(#0000ff, #ff0000, #ffa500)
>> join(blue,(red orange),space);            //(#0000ff #ff0000 #ffa500)

^[14]

6.4 append()函数

将某个值插入到列表中，并且处于最末位。

>> append(10px 20px, 30px);    //(10px 20px 30px)
>> append((10px,20px),30px);   //(10px,20px,30px)
>> append(green,red);          //(#008000 #ff0000)
>> append(red,(green,blue));   //(#ff0000 (#008000, #0000ff))

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

只有一个列表项时，插入进来的值将和原来的值会以空格的方式分隔。
以空格分隔列表项，插入进来的列表项也将以空格分隔；
以逗号分隔列表项，插入进来的列表项也将以逗号分隔。

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

comma 将会以逗号分隔列表项;
space 将会以空格分隔列表项。

>> append((blue green),red,comma);    //(#0000ff, #008000, #ff0000)
>> append((blue green),red,space);    //(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma);   //(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space);   //(#0000ff #008000 #ff0000)
>> append(blue,red,comma);            //(#0000ff, #ff0000)
>> append(blue,red,space);            //(#0000ff #ff0000)

^[15]

6.5 zip()函数

将多个列表值转成一个多维的列表：

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

注意：在使用zip()函数时，每个单一的列表个数值必须是相同的，否则会报错：

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

^[16]

6.6 index()函数

类似JS的索引，找到某个值在列表中所处的位置。不同的是，Sass中第一个值是1，第二个值2：

>> index(1px solid red, 1px);      //1
>> index(1px solid red, solid);    //2
>> index(1px solid red, red);      //3

如果指定的值不在列表中（没有找到相应的值），那么返回的值时false:

>> index(1px solid red,dotted);    //false

^[17]

6.7 Introspection函数

它包括了几个判断型函数：

type-of($value): 返回一个值的类型
unit($number): 返回一个值得单位
unitless($number): 判断一个值是否带有单位
commparable($number-1, $number-2): 判断两个值是否可以做加、减和合并

6.7.1 type-of():判断一个值得属性

number
string
bool
color

>> type-of(100);        //"number"
>> type-of(100px);      //"number"
>> type-of("asdf");     //"string"
>> type-of(asdf);       //"string"
>> type-of(true);       //"bool"
>> type-of(false);      //"bool"
>> type-of(#fff);       //"color"
>> type-of(blue);       //"color"
>> type-of(1 / 2 = 1);  //"string"

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

>> unit(100);           //""
>> unit(100px);         //"px"
>> unit(20%);           //"%"
>> unit(1em);           //"em"
>> unit(10px * 3em);    //"em * px"
>> unit(10px / 3em);    //"px / em"
>> unit(10px * 2em / 3em / 1rem);    //"em / rem" 怎么得到的？

但加减碰到不同单位时 nuit()函数会报错，px与cm\mm运算除外：

>> unit(1px + 1cm);    //"px"
>> unit(1px - 1cm);    //"px"
>> unit(1px + 1mm);    //"px"
>> unit(10px * 2em - 3cm / 1rem);    //SyntaxError: Incompatible units: 'cm' and 'px*em'.

unit()函数对弈单位运算没有规律，“px/em”这种是没有实际意义。

6.7.3 unitless()函数
unitless() 函数只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false：

>> unitless(100);    //true
>> unitless(100px);    //false
>> unitless(100em);    //false
>> unitless(100%);    //false
>> unitless(1 /2 );    //true
>> unitless(1 /2 + 2 );    //true
>> unitless(1px /2 + 2 );    //false

实例，调用混合宏时，如果参数没有单位，程序自动加入单位：

@mixin adjust-location($x, $y) {
  @if unitless($x) {    
    $x: 1px * $x;
  }
  @if unitless($y) {    
    $y: 1px * $y;
  }
  position: relative; 
  left: $x; 
  top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

6.7.4 comparable()函数

用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

>> comparable(2px,1px);    //true
>> comparable(2px,1%);     //false
>> comparable(2px,1em);    //false
>> comparable(2rem,1em);   //false
>> comparable(2px,1cm);    //true
>> comparable(2px,1mm);    //true
>> comparable(2px,1rem);   //false
>> comparable(2cm,1mm);    //true

6.7.5 Miscellaneous函数

他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

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

当$condition条件成立时，返回的值为$if-true，否则返回的是$if-false的值：

>> if(true,1px,2px);    //1px
>> if(false,1px,2px);   //2px

^[18]

6.8 Map-数据地图

$map:(
  $key1: value1,
  $key2: value2,
  $key3: value3
)

首先有一个类似于 Sass 的变量一样，用个$ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以key:value 的形式赋予，其中key和 value 是成对出现，并且每对之间使用逗号(,)分隔，其中最后一组后面 没有逗号 。
其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。
以前定义变量的方式：

$default-color: #fff;
$primary-color: #22ae39;

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

$color: (
  default: #fff;
  primary: #22ae39;
)

这样的好处是需要增加颜色变量，在 map 中可以随意添加:

$color: (
  default: #fff;
  primary: #22ae39;
  negative: #d9534f;
)

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

$map: (
  key1: value1,
  key2: (
    key-1: value-1,
    key-2: value-2  
  ),
  key3：value3
)

map 的嵌套实用性也非常的强:

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

map自带了七个函数：

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

6.8.1 map-get($map,$key)

map-get($map,$key)函数的作用是根据$key参数，返回 $key 在$map中对应的 value值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数：

$map: 定义好的map。
$key: 需要遍历的key。
示例：

$social-colors: (
    dribbble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

假设需要获取Facebook键值对应的值#3b5998，我们就可以使用map-get()：

.btn-facebook{
  color: map-get($social-colors, facebook)
}

编译后的CSS：

.btn-facebook{
  color: #3b5998;
}

假设现在 $social-colors 这个 map 没有 $weibo 这个 key :

.btn-weibo{
  font-size: 14px;
  color: map-get($social-colors,weibo);
}

编译结果：

.btn-weibo{
  font-size: 14px;
}

可以看出，如果 $key 不在 $map 中，不会编译出CSS，其实在Sass中，map-get($social-colors, weibo)返回了一个值null，可是编译时也不报错，这里需要注意。

6.8.2 map-has-key($map, $key)

返回一个布尔值，当 $map 中有这个 $key，则函数返回 true，否则返回 false。
例如上面的map-get($map, $key)函数返回一个null值对于开发者没有任何提示信息。改变这一状态只需要使用map-has-key($map, $key)即可：

@if map-has-key($social-colors, facebook){
  .btn-weibo{
    color: map-get($social-colors, weibo);
  }
}@else{
  @warn "No color found for weibo in $social-colors"
}

编译结果就会报错，这样便于开发者调试。但这样也并不是最好的，不可能每次都写一个if语句，那么可以自定义一个函数：

@function colors($color){
  @if not map-has-key($social-colors, $color){
    @warn "No color found for `#{$color}` in $social-colors map"
  }
  @return map-get($social-colors, $color);
}

有了这个函数，就可以这样使用：

.btn-dribbble{
  color: colors(dribbble);
}
.btn-facebook{
  color: colors(facebook);
}
.btn-weibo{
  color: colors(weibo);
}

编译后的CSS：

.btn-dribble {
  color: #ea4c89;
}
.btn-facebook {
  color: #3b5998;
}

同时你会发现终端报错：
No color found for "weibo" in $social-colors map. Property omitted.
报错总比不报错强太多。

同时，上面的代码也可以用$each来简化：

@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}

$each简化

6.8.3 map-keys($map)

map-keys(#map)函数将会返回$map中所有key，如果把这些值赋予一个变量，那他就是一个列表：

$list: $map-keys($social-colors)

相当于：

$list:"dribbble","facebook","github","google","twitter";

上面的示例同样也可以用这个方法来修改：

@function colors($color){
  $names: map-keys($social-colors);
  @if not index($names,$colors){
    @warn "Waring: `#{$color} is not a valid color name.`"
  }
  @return map-get($social-colors,$color);
}

这段代码，使用了map-keys将$social-colors这个map的所有key取出，并赋予给$names列表。然后通过index($names,$color)返回在$color在$names的位置，如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。

例如，weibo不在$social-colors中，那么不会编译CSS，终端会有提示信息。
同样也可遍历出所有的值：
@each:

@each $name in map-keys($social-colors){
  .btn-#{$name}{
    color: colors($name);
  }
}

@for:

@for $i form 1 through length(map-keys($social-colors)){
  .btn-#{nth(map-keys($social-colors),$i)}{
    color: colors(nth(map-keys($social-colors),$i));
  }
}

6.8.4 map-valus($map)、map-merge($map1,$map2)

map-valus($map)获取的是$map的所有value值。
也是一个列表。而且相同的value也会全部获取出来。例如：

map-values($social-colors)

将会返回：

#ea4c89,#3b5998,#171515,#db4437,#55acee

值与值之间同样用逗号分隔。

map-merge($map1,$map2)合并这两个map，然后得到一个新的map
如果你要快速将新的值插入到$map中的话，这种方法是最佳方法：
合并两个map
不过需要注意的是如果$map1和$map2有相同的$key，那么$map2中的key将会取代$map1中的key值：
$map2中的key将会取代$map1中的key值

6.8.5 map-remove(#map,$key)、keywords($args)

map-remove($map,$key)
用来删除当前$map中的某个$key值，从而得到一个新的map。

$newmap:map-remove($social-colors,dribbble)

返回的新map：

$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
)

如果要删除的$key并不存在于$map中，那么map-remove()函数返回新的map和以前的map一样。

map-remove($map,$key)
keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

在命令终端可以看到一个输入的 @debug 信息

 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

^[19]

七、颜色函数

^[20]

7.1 RGB函数

sass为RGB颜色提供六种函数：

rgb($red,$green,$blue): 根据红、绿、蓝三个值创建一个颜色
rgba($red,$green,$blue,$alpha): 根据红、绿、蓝和透明度创建一个颜色
red($color): 从一个颜色中获取其中红色值；
green($color): 从一个颜色中获取其中绿色值；
blue($color): 从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight]): 把两种颜色混合在一起；

$ sass -i             //在终端开启Sass函数计算。
>> rgb(200,40,88)     //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65)  //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858)       //从#c82858颜色值中得到红色值 200
200
>> green(#c82858)     //从#c82858颜色值中得到绿色值 40
40
>> blue(#c82858)      //从#c82858颜色值中得到蓝色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3)  //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

^[21]

7.2 RGBA()函数

主要用来将一个颜色根据透明度转换成RGBA的颜色，主要有两种语法：

rgba($red,$green,$blue,$alpha)   //将一个rgba颜色转译出来，和未转移的值一样。
rgba($color,$alpha)   //将一个Hex颜色转换成rgba颜色。

其中，rgba($color,$alpha)函数最常使用。等价的CSS3的写法存在兼容性问题。

//CSS
color: rgba(#f36,.5);   //这个写法在CSS中无效

在Sass中rgba()函数的写法：

//SCSS
$color: #f36;
$bgColor:orange;
$borderColor:green;

.rgba{
  color: rgba(#f36,.4);
  background: rgba(orange,.5)
  border-color: rgba(green,.6)
}

rgba函数

调用定义的变量：

.rgba{
  color: rgba($color,.5);
  background: rgba($bgColor,.5);
  border-color: rgba($borderColor,.5);
}

rgba调用变量
^[22]

7.3 Mix()函数

mix()函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色，语法如下：

mix($color-1,$color-2,$weight);

$color-1 和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
$weight为合并的比例，默认值为50%，取值范围是0~1。如果指定的比例是25%，那么$color-1的比例是25%，$color-2是75%。
使用方法也很简单：

mix(#f00,#00f)  =>  #7f007f
mix(#f00,#00f,25%)  =>  #3f00bf
mix(rgba(255,0,0,.5),#00f)  =>  rgba(63,0,191,0.75)

在前例的基础上做个修改：

//SCSS
$color1: #a63;
$color2: #fff;
$bgColor1: #f36;
$bgcolor2: #e36;
$borderColor1: #c36;
$borderColor2: #b36;

.mix{
  background: mix($bgColor1,$bgColor2,.75);
  color: mix($color1,$color2,.7);
  border-color: mix($borderColor1,$bgColor2,.5);
}

编译之后的代码：

.mix {
  background: #ee3366;
  color: #fefefe;
  border-color: #bb3366;
}

^[23]

7.4 HSL函数简介

hsl($hue,$saturation,lightness): 通过色相、饱和度、和亮度的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha): 通过色相、饱和度、和亮度和透明度创建一个颜色；
hue($color): 从一个颜色中获取色相值；
saturation($color): 从一个颜色中获取饱和度；
lightness($color): 从一个颜色中获取亮度值；
adjust-hue($color,$degrees): 通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount): 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount): 通过改变颜色亮度值，改变颜色，创建一个新的颜色；
saturate($color,$amount): 通过增加颜色更饱和度，创建一个新的颜色；
desaturate($color,$amount): 通过减少颜色饱和度，从而创建一个新的颜色；
grayscale($color): 将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color): 返回一个补充色，相当于adjust-hue($color,180deg);
invert($color): 返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
示例：

sass -i
>> hsl(200,30%,60%)         //通过h200,s30%，l60%创建一个颜色
#7aa3b8
>> hsla(200,30%,60%,.8)     //通过h200,s30%，l60%,a80%创建一个颜色
rgba(122, 163, 184, 0.8)
>> hue(#7ab)                //得到#7ab颜色的色相值
195deg
>> saturation(#7ab)         //得到#7ab颜色的饱和度值
33.33333%
>> lightness(#7ab)          //得到#7ab颜色的亮度值
60%
>> adjust-hue(#f36,150deg)  //改变#f36颜色的色相值为150deg
#33ff66
>> lighten(#f36,50%)        //把#f36颜色亮度提高50%
#ffffff
>> darken(#f36,50%)         //把#f36颜色亮度降低50%
#33000d
>> saturate(#f36,50%)       //把#f36颜色饱和度提高50%
#ff3366
>> desaturate(#f36,50%)     //把#f36颜色饱和度降低50%
#cc667f
>> grayscale(#f36)          //把#f36颜色变成灰色
#999999
>> complement(#f36)
#33ffcc
>> invert(#f36)
#00cc99

HSL 函数中最常见的应该是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 几个函数。

7.4.1 lighten()和darken()

$baseColor: #ad141e;

使用 lighten() 和 darken() 函数来修改10%亮度值：

.lighten{
  background: lighten($baseColor,10%);
}
.darken{
  background: darken($baseColor,10%);
}

编译的CSS：

.lighten{
  background: #db1926;
}
.darken{
  background: #7f0f16;
}

使用终端来验证一下：

>> lightness(#ad141e)     //原色的亮度值
37.84314%
>> lightness(#db1926)     //在原色的亮度值基础上增加10%
47.84314%
>> lightness(#7f0f16)     //在原色的亮度值基础上减少10%
27.84314%

注意：当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。

7.4.2 saturate()和desaturate()

$baseColor: #ad141e;
.saturate{
  background: saturate($baseColor,30%);    //在原色饱和度基础上增加饱和度
}
.desaturate{
  background: desaturate($baseColor,30%);  //在原色的饱和度基础上减少饱和度
}

编译的CSS代码：
.saturate{
background: #c1000d;
}
.desaturate{
background: #903137;
}

同样使用saturation()在终端进行计算：

>> saturation(#ad141e)  //原色的饱和度
79.27461%
>> saturation(#c1000d)  //在原色饱和度基础上增加30%,超过100%时按100%计算
100%
>> saturation(#903137)  //在原色饱和度基础上减少30%,小于0时按0计算
49.2228%

7.4.3 adjust-hue()函数

需要一个颜色和色相度数值。通常这个度数值是在-360deg至360deg之间，也可以是百分数。

$baseColor: #ad141e
.adjust-hue-deg{
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per{
  background: adjust-hue($baseColor,30%)
}

编译出的CSS：

.adjust-hue-deg{
  background: #ad5614;
}
.adjust-hue-per{
  background: #ad5614;
}

通过转译的代码，发现色值是一样的，如果两个值（不看单位）相同，计算出来的颜色也会一样。同样的，可以通过hue()函数得到颜色转换前后的色相值：

>> hue(#ad141e) //原颜色色相值
356.07843deg
>> hue(#ad5614) //在原色色相基础上增加30deg
25.88235deg

在 HSL 颜色表达方式上，色相是从 -360 和 360 之间，负值逆时针转，正值顺时针转。在这个实例中，原色的色相值约 356deg，加上 30deg 后，新颜色变成了 386deg，但我们的色盘中并没有比 360deg 更大的值，当值大于 360deg时，表示色盘转完了一圈，继续顺时针转余下的值（这里是 26deg），那么这个继续转的值就是新颜色的色相值。

7.4.4 grayscale()函数

这个函数会把颜色的饱和度值直接调至 0%，所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。例如：

//SCSS
$baseColor: #ad141e;
.grayscale{
  background: grayscale($baseColor);
}
.desaturate{
  background: desaturate($baseColor,100%);
}

来看看计算出来的 HSL 各个值的变化：

>> hue(#ad141e)
356.07843deg
>> hue(#616161)
0deg
>> saturation(#ad141e)
79.27461%
>> saturation(#616161)
0%
>> lightness(#ad141e)
37.84314%
>> lightness(#616161)
38.03922%

grayscale()函数处理过的颜色，其最大的特征就是颜色饱和度为0。

^[24]

7.5 Opacity函数简介

在CSS中除了可以使用rgba、hsla和transform是通过颜色的透明通道做处理，
而opacity()是控制整个元素的透明度。

Sass提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度：

alpha($color) / opacity($color): 获取颜色透明度值；
rgba($color,$alpha): 改变颜色透明度值；
opacity($color,$amount) / fade-in($color,$amount): 使颜色更不透明；
transparentize($color,$amount) / fade-out($color,$amount): 使颜色更加透明；

7.5.1 alpha()、opacity()函数

这个两个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度，那么这两个函数得到的值都会是 1：

>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8

7.5.2 rgba()函数

有一个 rgba() 函数可以创建一个颜色，同时还可以对颜色修改其透明度。其可以接受两个参数，第一个参数为颜色，第二个参数是你需要设置的颜色透明值。

>> rgba(red,.5)
rgba(255, 0, 0, 0.5)
>> rgba(#dedede,.5)
rgba(222, 222, 222, 0.5)
>> rgba(rgb(34,45,44),.5)
rgba(34, 45, 44, 0.5)
>> rgba(rgba(33,45,123,.2),.5)
rgba(33, 45, 123, 0.5)
>> rgba(hsl(33,7%,21%),.5)
rgba(57, 54, 50, 0.5)
>> rgba(hsla(33,7%,21%,.9),.5)
rgba(57, 54, 50, 0.5)

7.5.3 opacify()、fade-in()函数

这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。
其接受两个参数，第一个是原始色，第二个是你需要增加的透明度值，器取值范围主要是在0~1之间，当透明度值增加到大于1时，会以1计算，表示颜色不具有任何透明度。

>> opacify(rgba(22,34,235,.6),.2)
rgba(22, 34, 235, 0.8)
>> opacify(rgba(22,34,235,.6),.5)
#1622eb
>> opacify(hsla(22,34%,23%,.6),.15)
rgba(79, 53, 39, 0.75)
>> opacify(hsla(22,34%,23%,.6),.415)
#4f3527
>> opacify(red,.15)
#ff0000
>> opacify(#89adde,.15)
#89adde
>> fade-in(rgba(23,34,34,.5),.15)
rgba(23, 34, 34, 0.65)
>> fade-in(rgba(23,34,34,.5),.615)
#172222

7.5.4 transparentize()、fade-out()函数

减少透明度。这个函数会让透明值做减法运算，当计算出来的结果小于0时，会以0计算，表示全透明。

>> transparentize(red,.5)
rgba(255, 0, 0, 0.5)
>> transparentize(#fde,.9)
rgba(255, 221, 238, 0.1)
>> transparentize(rgba(98,233,124,.3),.11)
rgba(98, 233, 124, 0.19)
>> transparentize(rgba(98,233,124,.3),.51)
rgba(98, 233, 124, 0)
>> fade-out(red,.9)
rgba(255, 0, 0, 0.1)
>> fade-out(hsla(98,6%,23%,.5),.1)
rgba(58, 62, 55, 0.4)
>> fade-out(hsla(98,6%,23%,.5),.6)
rgba(58, 62, 55, 0)

^[25]

八、Sass的@规则

^[26]

8.1 @import

Sass支持所有CSS3的@规则，以及一些Sass专属的规则，也被称为“指令（directives）”。这些规则在Sass中具有不同的功效。

Sass扩展了CSS的@import规则让它能够引入Scss和Sass文件，所有引入的Scss和Sass文件都会被合并输出一个单一的CSS文件。另外，被导入的文件中所定义的变量或 mixins都可以在主文件中使用。

Sass会在当前目录下寻找其他Sass文件，如果是Rack、Rails或Merb环境中则是Sass文件目录。也可以通过：load_paths选项或者在命令行中使用 --load-path选项来指定额外的搜索目录。

@import根据文件名引入，默认情况下，他会寻找Sass文件并直接引入，但是，在少数几种情况下，但是，在少数几种情况下，它会被编译成CSS的@import规则：

如果文件的扩展名是.css。
如果文件名以http:// 开头。
如果文件名是url()。
如果@import包含了任何媒体查询（media queries）。
如果删除情况都没有出现，并且扩展名是 .scss或 .sass，该名称的Sass或Scss文件就会被引入。如果没有扩展名，Sass将试着找出具有 .scss或 .sass扩展名的同名文件并将其引入。

例如：@import "foo.scss";
或：@import "foo";
都将引入 foo.scss文件。

但是：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

都将编译为：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo)

也可以通过一个@import引入多个文件。例如：

@import "rounded-corners", "text-shadow";

将引入rounded-corners和text-shadow两个文件。

如果有一个Scss或Sass文件需要引入，但是你又不希望它被编译为一个CSS文件，这时，可以再文件名前面加一个下划线，就能避免被编译。浙江告诉Sass不要把它编译成CSS文件。然后，你就可以像往常一样引入这个文件了，而且可以省略掉文件名的下划线。

例如你有一个文件叫做 _colors.scss。这样就不会生成 -colors.css文件了，而且你可以这样：

@import "colors";  //不用加下划线

注意：在同一个目录不能同时存在带下划线和不带下划线的同名文件。例如， _colors.scss不能与 colors.scss并存。

嵌套@import
虽然大部分时间只需在顶层文件使用@import就行了，但是，你还可以把他们包含在css规则和@media规则中。

来看官网的示例：
假设要引入example.scss的文件中包含这样的代码：

.example{
  color: red;
}

然后这样引用：

#main{
  @import "example";
}

编译出来的CSS：

#main .example{
  color: red;
}

^[27]

8.2 @media

Sass中的@media指令和CSS的使用规则一样的简单，但他有另外一个功能，可以嵌套在CSS规则中，有点类似JS的冒泡功能一样。

如果在样式中使用@media指令，他将冒泡到外面。来看一个简单示例：

.sidebar{
  width: 300px;
  @media screen and (orientation: landscape){
    width: 500px;
  }
}

编译出来的CSS：

.sidebar{
  width: 300px;
}
@media screen and (orientation: landscape){
  .sidebar{
    width:  500px;
  }
}

@media也可以嵌套 @media：

@media screen{
  .sidebar{
    @media (orientation: landscape){
      width: 500px;
    }
  }
}

此时编译出来：

@media screen and (orientation: landscape){
  .sidebar{
    width: 500px;
  }
}

在使用 @media时还可以使用插值 #{}：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value){
    .sidebar{
        width: 500px;
    }
}

编译出来的CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.5){
  .sidebar{
    width:  500px;
  }
}

^[28]

8.3 @extend

Sass中的 @extend 是用来扩展选择器或占位符。例如：

扩展选择器：
@extend不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover,或a.user[href="#"]，例如：

.hoverlink{
  @extend a:hover;
}
a:hover{
  text-decoration: underline;
}

编译出来：

a:hover, .hoverlink{
  text-decoration: underline;
}

再看一个复杂的：

.hoverlink{
  @extend a:hover;
}
.comment a.user:hover{
  font-weight: bold;
}

他会被编译为：

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold;
}

多个扩展
假设某个样式要继承多个地方的样式，那么可以使用 @extend来继承多个选择器或占位符的样式，如：

.error{
  border: 1px #f00;
  background-color: #fdd;
}
.attention{
  font-size: 3em;
  background-color: #ff0;
}
.seriousError{
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

扩展单一选择器
前面我们知道，%placeholder不使用@extend显示调用，是不会生成任何样式代码。在选择器中使用占位符一样。比如：

#context a%extreme{
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

这段代码在不调用之前不产生任何代码，只有能过 @extend调用之后才产生代码：

.notice{
  @extend %extreme;
}

编译出来的CSS

#context a.notice{
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

就是把.notice替换为%extreme

^[29]

8.4 @at-root

@at-root字面解释为跳出根元素。当你选择器嵌套多层之后，就想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单示例：

.a{
  color: red;
  .b{
    color: orange;
    .c{
      color: yellow;
      @at-root .d{
        color: green;
      }
    }
  }
}

编译出来的CSS：

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

^[30]

8.5 @debug

@debug在Sass中是用来调试的，当你在Sass的源码中使用了@debug指令之后，Sass代码在编译出错时，在命令终端会输出你设置的提示BUG：

@debug 10em + 12em;

会输出：

Line 1 DEBUG: 22em

^[31]

8.6 @warn

@warn和@debug功能类似，用来帮助我们更好的调试Sass。如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {      //unitless是内置函数，判断数值是否有“单位”
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

编译的CSS：

.botton {
  position: relative;
  left: 20px;
  top: 30px;
}

^[32]

8.7 @error

功能和上面两个类似：

@mixin error($x){
 @if $x < 10{
   width: $x * 10px;
 }@else if $x == 10{
   width: $x;
 }@else{
   @error "你需要将#{$x}值设置在10以内的数"
 }
}

.test{
 @include error(15);
}

编译的时候提示：

你需要将15值设置在10以内的数  on line 7 at column 5

四、Sass的控制命令 ↩
4.1 @if ↩
4.2 @for循环（上） ↩
4.3 @for循环（下） ↩
4.4 @while循环 ↩
4.5 @each循环 ↩
五、Sass的函数功能-字符串函数与数字函数 ↩
5.1 字符串函数 ↩
5.2 数字函数 ↩
六、Sass的函数功能-列表函数 ↩
6.1 length()函数 ↩
6.2 nth()函数 ↩
6.3 join()函数 ↩
6.4 append()函数 ↩
6.5 zip()函数 ↩
6.6 index()函数 ↩
6.7 Introspection函数 ↩
6.8 Map-数据地图 ↩
七、颜色函数 ↩
7.1 RGB函数 ↩
7.2 RGBA()函数 ↩
7.3 Mix()函数 ↩
7.4 HSL函数简介 ↩
7.5 Opacity函数简介 ↩
八、Sass的@规则 ↩
8.1 @import ↩
8.2 @media ↩
8.3 @extend ↩
8.4 @at-root ↩
8.5 @debug ↩
8.6 @warn ↩
8.7 @error ↩

Sass进阶-学习笔记

四、Sass的控制命令

4.1 @if

4.2 @for循环（上）

4.3 @for循环 （下）

4.4 @while循环

4.5 @each循环

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

**5.1 字符串函数

5.2 数字函数

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

6.1 length()函数

6.2 nth()函数

6.3 join()函数

6.4 append()函数

6.5 zip()函数

6.6 index()函数

6.7 Introspection函数

6.7.4 comparable()函数

6.7.5 Miscellaneous函数

6.8 Map-数据地图

6.8.1 map-get($map,$key)

6.8.2 map-has-key($map, $key)

6.8.3 map-keys($map)

6.8.4 map-valus($map)、map-merge($map1,$map2)

6.8.5 map-remove(#map,$key)、keywords($args)

七、颜色函数

7.1 RGB函数

7.2 RGBA()函数

7.3 Mix()函数

7.4 HSL函数简介

7.4.1 lighten()和darken()

7.4.2 saturate()和desaturate()

7.4.3 adjust-hue()函数

7.4.4 grayscale()函数

7.5 Opacity函数简介

7.5.1 alpha()、opacity()函数

7.5.2 rgba()函数

7.5.3 opacify()、fade-in()函数

7.5.4 transparentize()、fade-out()函数

八、Sass的@规则

8.1 @import

8.2 @media

8.3 @extend

8.4 @at-root

8.5 @debug

8.6 @warn

8.7 @error

目录

猜你喜欢

热点阅读

4.3 @for循环（下）