SCSS/SASS（下）_scss abs-CSDN博客

本文链接：https://blog.csdn.net/CaraYQ/article/details/122511680

控制命令

@if

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

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";// 相当于console.log 如果你在命令行中使用命令生成css文件，命令行中就会打印debug的信息
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

编译为：

.block {
  display: block;
}

.hidden {
  display: none;
}

@for循环

对于.col1~.col12，在CSS中你需要一个一个去书写，但在Sass中，可以使用 @for循环来完成。@for循环包含两种格式：

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

其中，$i表示变量，start表示起始值，end表示结束值，start和end必须是整数。两者的区别在于：through表示包括end这个数，而to则不包括end这个数。例子：@for应用在网格系统生成各个格子class的代码：

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

编译成：

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}

@while循环

@while指令重复输出格式直到表达式返回结果为false，只要@while后面的条件为true就会执行{}中的语句

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译为：

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

@each循环

@each循环就是去遍历一个列表，然后从列表中取出对应的值。
格式：@each $var in <list>

$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;
}

编译为：

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

函数

字符串函数

字符串函数是用来处理字符串的函数

unquote()

unquote()函数主要是用来删除一个字符串中的引号，只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果这个字符串没有带有引号，将返回原始的字符串，如果字符串带两个及以上个引号，将返回去除一前一后引号的字符串。

.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

编译后：

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

To-upper-case()

To-upper-case()函数将字符串小写字母转换成大写字母。

.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

编译后：

.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

To-lower-case()

To-lower-case()将字符串转换成小写字母

.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

编译后：

.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

数字函数

percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式，如果您转换的值是一个带有单位的值，那么在编译的时候会报错

percentage(.2)// 20%
percentage(2px / 10px)// 20%
percentage(2em / 10em)// 20%
percentage(2px / 10em)// 报错

.footer{
    width : percentage(.2)
}

编译为：

.footer{
    width : 20%
}

round()：将一个数（可以携带单位的任何数值）四舍五入为一个最接近的整数

ceil()/floor()：向上/下取整

abs()：取绝对值

min()/max()：在多个数之中找到最小/大的一个

同时出现两种不同类型的单位，将会报错

random()：获取[0，1)的随机数

列表函数

length()：返回列表清单中有多少个值

length(10px 20px (border 1px solid) 2em)// 4
length(border 1px solid)// 3

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

nth()：用来获取列表中某个位置的值

语法：nth($list,$n)
1是指列表中的第一个标签值，2是指列给中的第二个标签值，依此类推。
$n必须是大于0的整数

join()：将两个列表连接合并成一个列表

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

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

join()函数还可以接收一个参数$separator，用来为合并后的列表设置分隔符号，取值还有：comma（,）、space（）、auto（默认值）。

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

如果不指定$separator，即$separator取值为auto：
（1）列表中第一个列表中每个值之间使用的是什么符号，join()函数合并的列表中每个列表项之间使用的就是什么符号，第一个列表中只有一个列表项，那么以第二个列表中每个值之间使用的符号为准

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

（2）当两个列表中的列表项小于1时，将会以空格分隔

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

append()：在列表末尾插入一个值

append()函数还可以接收一个参数$separator，用来为合并后的列表设置分隔符号，取值还有：comma（,）、space（）、auto（默认值）。
如果不指定$separator，即$separator取值为auto：插入进来的列表项与原有列表项使用原有列表中列表项使用的分隔符，如果原有列表只有一个列表项时，那么插入进来的值将和原来的值以空格的方式分隔。

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

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

每个单一的列表的个数值必须是相同的，否则会报错

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

每个单一列表的值对应的取其相同位置值
在这里插入图片描述

index()函数：查找某个值在列表中所处的位置

在 Sass 中，第一个值就是1，第二个值就是 2，依此类推
在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。

Introspection函数

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"

unit()：获取一个值所使用的单位

碰到乘除计算时，能根据运算得到一个“多单位组合”的值

unit(100px)// "px"
unit(100)// ""
unit(10px * 2em / 3cm / 1rem)// 先将所有的mm、cm都转换成px，这样最终得到的为px*em/px/rem，px抵消掉了 所以最终只有em/rem

但加、减碰到不同类型的单位时，unit()函数将会报错

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

这个函数没啥用

unitless()：判断一个值是否带有单位

如果不带单位返回的值为 true，带单位返回的值为 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);
}

comparable()：判断两个数是否可以进行“加，减”以及“合并”

如果可以返回的值为 true，如果不可以返回的值是 false

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

Miscellaneous函数

Miscellaneous函数又称为三元条件函数，他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：
语法：if($condition,$if-true,$if-false) 当$condition条件成立时，返回的值为$if-true，否则返回的是$if-false值

Map

语法：

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

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

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

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

使用map可以更好的管理上述变量：

$color: (// 这就是一个map
    default: #fff,
    primary: #22ae39
    // 用map可以更好的管理变量，比如我们可以随意的添加变量
    negative: #d9534
);

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

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

在换皮肤的项目中，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。

$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来管理变量，但要在Sass中获取变量，或者对map做更多有意义的操作，我们必须借助于map的函数功能。

`map-get($map,$key)`：返回`$key`在`$map`中对应的value值

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

编译为：

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

如果$key不存在$map中，将返回null值，不会编译出CSS样式

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

编译为：

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

`map-has-key($map,$key)`：`$map`中有这个`$key`，则函数返回true，否则返回false。

前面的示例，当$key不在$map中时，使用map-get($map,$key)函数将返回一个null值。但对于开发人员，并看不到任何提示信息。如果使用map-has-key($map,$key)函数就可以改变这一状态。

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

如果$social-colors这个map中有facebook这个键，上述代码编译为：否则会报错

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

上述代码每获取一个key都写一个@if语句，我们可以自定义一个函数：

@function colors($color){
    @if not map-has-key($social-colors,$color){// 如果$social-colors中没有这个键 就报错
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);// 有这个键 获取这个键的值
}

使用：

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

编译后：

.btn-dribble {
  color: #ea4c89;
}

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

上述代码也可以写为：

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

其中，$social-network,$social-color分别是从$social-colors中遍历出来的键和值

`map-keys($map)`：返回`$map`中的所有key

将返回值赋给一个变量，那该变量就是一个列表，因此，上一节的color函数可以写为：

@function colors($color){
    $names: map-keys($social-colors);
    @if not index($names,$color){
        @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位置，如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。

也可以通过@each或者@for遍历出map-keys($map)所有返回值：

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

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

`map-values($map)`：获取的`$map`中所有的value值

将返回值赋给一个变量，那该变量就是一个列表

`map-merge($map1,$map2)`：将`$map1`和`$map2`合并，然后得到一个新的`$map`

如果$map1和$map2中有相同的$key名，那么将$map2中的$key会取代$map1中的

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6,
    border: #ccc,
    background: #000
);
$newmap: map-merge($color,$typo);
/*
输出：
$newmap:(
    text: #f36,
    link: #f63,
    font-size: 12px,
    line-height: 1.6,
    border: #ccc,
    background: #000
);
*/

`map-remove($map,$key)`：删除当前`$map`中的某一个`$key`，返回新的 map

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

`keywords($args)`：动态创建map，`$args`是键值对

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

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);
/*
输出：
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)
*/

颜色函数

RGB颜色函数

RGB颜色只是颜色中的一种表达式，其中R是red表示红色，G是green表示绿色，而B是blue表示蓝色。

RGB()

语法：rgb($red,$green,$blue) 根据红、绿、蓝三个值创建一个颜色；

RGBA()：将一个颜色根据透明度转换成rgba颜色

语法：

rgba($red,$green,$blue,$alpha)//将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha)//将一个Hex颜色转换成rgba颜色，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是0~1之间

后者比较常用，假设在实际中知道的颜色值是#f36或者red，但在使用中，需要给他们配上一个透明度，这个时候在原来的CSS中，首先需要通过制图工具，得到#f36或red颜色的R、G、B值，而不能直接使用#f36和透明度实现该需求，但在Sass中，RGBA()函数就能解决这个问题。

$color: #f36;
$bgColor: orange;
$borderColor:green;
// 同时给他们加上0.5的透明度
.rgba {
    color: rgba(#f36,.5);
    background: rgba(orange,.5);
    border-color: rgba(green,.5);
}
// 或者写为：第一个参数是变量
.rgba {
    color: rgba($color,.5);
    background: rgba($bgColor,.5);
    border-color: rgba($borderColor,.5);
}

Red()、Green()、Blue()

red():获取某个颜色当中的红色值：red(#f36)// 255
green():获取某个颜色值中green的值：green(#f36)// 51
blue()：获取某一个颜色值中blue的值：blue(#f36)// 102

Mix()：将两种颜色根据一定的比例混合在一起，生成另一种颜色

语法：mix($color-1,$color-2,$weight); $color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight为合并的比例（第一种颜色的比例值），默认值为50%，其取值范围是0~1之间

$color1: #f36;
$color2: #f63;

body {
    color: mix($color1, $color2, 60%);// color: #ff4752;
    // 单位默认为% 0.6等同于0.6%
    color: mix($color1, $color2, .6);// color: #ff6633
    color: mix($color1, $color2, .6%);// color: #ff6633
}

如何设置不透明度的比例？？？？？

mix(rgba(255,0,0,0.5), #00f)// rgba(64, 0, 191, 0.75);
// 后面的#00f 等价于rgba(#0000ff，1)，默认opacity为1，$weight默认值50%，(1+0.5)*50%=0.75

HSL函数

hsl()和hsla()函数主要是通过颜色的H、S、L或者A这几个参数获取一个rgb或rgba表达的颜色
hsl($hue,$saturation,$lightness)：通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
色相是在色盘上的颜色（见下图），颜色的选择是使用饱和度：“0度是红色”，“120度为绿色”和“240度为蓝色”。
在这里插入图片描述

lighten()、darken()

语法：

lighten($color,$amount)// 将$color的亮度提高$amount得到一个新颜色
darken($color,$amount)// 将$color的亮度降低$amount得到一个新颜色

这两个函数都是围绕颜色的亮度值做调整的，但是生成出来的新颜色在色相和饱和度会有略微的变化，其中lighten()函数会让颜色变得更亮，darken()函数会让颜色变得更暗。这个亮度值可以是0-1之间，不过常用的一般都在3%-20%之间。
当颜色的亮度值接近或大于100%，颜色会变成白色；反之颜色的亮度值接近或小于0时，颜色会变成黑色。

saturate()、desaturate()

语法：

saturate($color,$amount)// $color颜色增加$amount的饱和度 得到一个新颜色
desaturate($color,$amount)// $color颜色降低$amount的饱和度 得到一个新颜色

颜色的饱和度超过100%时按100%计算，低于0时按0计算

adjust-hue()

语法：adjust-hue($color,$degrees)：改变$color的色相值为$degrees，得到一个新的颜色；$degrees通常在-360deg至360deg之间，也可以是百分数，20deg等同于20%

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

编译成：

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

测试：

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

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

grayscale()

语法：grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
grayscale()函数处理过的颜色，其最大的特征就是颜色的饱和度为 0。

Opacity函数

alpha()、opacity()

语法：

alpha($color);// 获取颜色透明度值；
opacity($color);// 获取颜色透明度值；

如果颜色没有特别指定透明度，那么这两个函数得到的值都会是1

opacify()、fade-in()

语法：

opacify($color, $amount)
fade-in($color, $amount)

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

transparentize()、 fade-out()

语法：

transparentize($color, $amount)
fade-out($color, $amount)：使颜色更加透明。

这两个函数会让透明值做减法运算，让颜色更加透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要减少的透明度值，其取值范围主要是在0-1之间。当计算出来的结果小于0时会以0计算，表示全透明。

@规则

@import

Sass扩展了CSS的@import规则，让它能够引入SCSS和Sass文件。所有引入的SCSS和Sass文件都会被合并并输出一个单一的CSS文件。另外，被导入的文件中所定义的变量或mixins都可以在主文件中使用。
@import根据文件名引入。默认情况下，它会寻找Sass文件并直接引入，但是，在少数几种情况下，它会被编译成 CSS的@import规则：
（1）如果文件的扩展名是.css。
（2）如果文件名以http://开头。
（3）如果文件名是url()。
（4）如果@import包含了任何媒体查询。
如果上述情况都没有出现，并且扩展名是.scss或.sass，该名称的Sass或SCSS文件就会被引入。如果没有扩展名，Sass将试着找出具有.scss或.sass扩展名的同名文件并将其引入。
如果你有一个SCSS或Sass文件需要引入，但是你又不希望它被编译为一个CSS文件，这时，你就可以在文件名前面加一个下划线，来避免文件被编译。这将告诉Sass不要把它编译成CSS文件。例如，你有一个文件叫做_colors.scss。这样就不会生成_colors.css文件了，而且你还可以这样：@import "colors";//不用加下划线来引入_colors.scss文件。
注意：在同一个目录不能同时存在带下划线和不带下划线的同名文件。例如，_colors.scss不能与colors.scss并存。
@import还可以被包含在CSS规则和@media规则中。假设要引入的样式文件example.scss文件中包含这样的代码：

.example {
  color: red;
}

然后你可以这样引用：

#main {
  @import "example";
}

编译为：

#main .example {
  color: red;
}

@media

Sass中的@media指令和CSS的使用规则一样，但它可以嵌套在CSS规则中。有点类似JS的冒泡功1. 能，如果在样式中使用@media指令，它将冒泡到外面，也就是说，如果@media嵌套在CSS规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器。

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

编译为：

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

@media也可以嵌套@media

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

编译时，Sass自动添加and：

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

@media可以使用SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

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

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

编译为：

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

@extend

@extend可以将一个选择器下的所有样式继承给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;// .error的所有样式继承给.seriousError，
  border-width: 3px;
}

编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

Sass允许继承任何定义给单个元素的选择器

.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 {
  // 每个.seriousError将包含.error与.attention下的所有样式，
  // 这时，后定义的样式享有优先权：.seriousError的背景颜色是#ff0而不是#fdd，
  // 因为.attention在.error之后定义。
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译为：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; 
}

.seriousError {
  border-width: 3px; 
}

多重延伸可以使用逗号分隔选择器名，比如@extend .error, .attention;与@extend .error; @extend.attention有相同的效果。

当一个选择器继承给第二个后，可以继续将第二个选择器继承给第三个

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

每个.seriousError选择器将包含.error的样式，而.criticalError不仅包含.seriousError的样式也会同时包含.error的所有样式，上面的代码编译为：

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

不可以将选择器列（如.foo .bar或.foo + .bar），继承给其他元素，但可以将其他元素继承给选择器列
假如选择器列中的某个元素需要延伸给另一个选择器列，在这种情况下，两个选择器列需要合并，比如：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

当两个列合并时，如果没有包含相同的选择器，将生成两个新选择器：第一列出现在第二列之前，或者第二列出现在第一列之前：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; 
}

如果两个列包含了相同的选择器，相同部分将会合并在一起，其他部分交替输出：

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

编译后：

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; 
}

%placeholder不使用@extend显示调用是不会生成任何样式代码。

@at-root

当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

编译为：

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@debug

@debug用来调试，当你的在Sass的源码中使用了@debug指令之后，Sass代码在编译出错时，在命令终端会输出你设置的提示Bug：@debug 10em + 12em;// 终端输出：Line 1 DEBUG: 22em

@warn

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

@error

同@warn和@debug

SCSS/SASS（下）

目录

控制命令

@if

@for循环

@while循环

@each循环

函数

字符串函数

unquote()

To-upper-case()

To-lower-case()

数字函数

percentage()

round()：将一个数（可以携带单位的任何数值）四舍五入为一个最接近的整数

ceil()/floor()：向上/下取整

abs()：取绝对值

min()/max()：在多个数之中找到最小/大的一个

random()：获取[0，1)的随机数

列表函数

length()：返回列表清单中有多少个值

nth()：用来获取列表中某个位置的值

join()：将两个列表连接合并成一个列表

append()：在列表末尾插入一个值

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

index()函数：查找某个值在列表中所处的位置

Introspection函数

type-of()：判断一个值是属于什么类型

unit()：获取一个值所使用的单位

unitless()：判断一个值是否带有单位

comparable()：判断两个数是否可以进行“加，减”以及“合并”

Miscellaneous函数

Map

Map的函数

map-get($map,$key)：返回$key在$map中对应的value值

map-has-key($map,$key)：$map中有这个$key，则函数返回true，否则返回false。

map-keys($map)：返回$map中的所有key

map-values($map)：获取的$map中所有的value值

map-merge($map1,$map2)：将$map1和$map2合并，然后得到一个新的$map

map-remove($map,$key)：删除当前$map中的某一个$key，返回新的 map

keywords($args)：动态创建map，$args是键值对

颜色函数

RGB颜色函数

RGB()

RGBA()：将一个颜色根据透明度转换成rgba颜色

Red()、Green()、Blue()

Mix()：将两种颜色根据一定的比例混合在一起，生成另一种颜色

HSL函数

lighten()、darken()

saturate()、desaturate()

adjust-hue()

grayscale()

Opacity函数

alpha()、opacity()

opacify()、fade-in()

transparentize()、 fade-out()

@规则

@import

@media

@extend

@at-root

@debug

@warn

@error

`map-get($map,$key)`：返回`$key`在`$map`中对应的value值

`map-has-key($map,$key)`：`$map`中有这个`$key`，则函数返回true，否则返回false。

`map-keys($map)`：返回`$map`中的所有key

`map-values($map)`：获取的`$map`中所有的value值

`map-merge($map1,$map2)`：将`$map1`和`$map2`合并，然后得到一个新的`$map`

`map-remove($map,$key)`：删除当前`$map`中的某一个`$key`，返回新的 map

`keywords($args)`：动态创建map，`$args`是键值对