sass基础语法大全，你值得拥有

一、基本语法

1. 选择器嵌套

   #app{
         color:while;
   
         .content{
            color:red;
         }
   }
   

2. 父级选择器 &

   #app{
        color:while;
        &.chird{
           background:#f0f0f0;
        }
   }
   

3. 属性嵌套

   #app{
        color:while;
   
        &.chird{
            font:{
           	family:test;
          		size:30px;
           	weight:bold;
            }
       }
   }
   

二、注释

/*
多行注释
*/
//单行注释

三、变量声明

$var : 16px;
.fontSize {
    font-size: $var;
}

三、数据类型

1. 数字：1、 2、 13、 10px

   abs()：返回一个数值的绝对值
   ceil()：向上取整
   floor()：向下取整
   comparable()：返回一个布尔值，判断两个参数是否可以比较
   max()：返回最大值
   min()：返回最小值
   percentage()：将数字转化为百分比的表达形式
   random()：返回 0-1 区间内的小数
   round()：返回最接近该数的一个整数，四舍五入
   

2. 字符串，有引号字符串与无引号字符串：“foo”、‘bar’、 baz

   quote(string)：给字符串添加引号
   unquote(string)：移除字符串的引号
   str-index(string, substring)：返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。
   str-insert(string, insert, index)：在字符串 string 中 index 位置插入 insert
   str-length(string)：返回字符串的长度。
   str-slice(string, start, end)：从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾
   to-lower-case(string)：将字符串转成小写
   to-upper-case(string)：将字符串转成大写
   unique-id()：返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
   

3. 颜色：blue、 #04a3f9、 rgba(255,0,0,0.5)

   rgb($red, $green, $blue)：创建一个rgb色
   rgba($red, $green, $blue, $alpha)：创建一个rgba色
   hsl(hue, saturation, lightness): 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
   hsla(hue, saturation, lightness, alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
   grayscale(color)：将一个颜色变成灰色，desaturate( color,100%)
   complement(color)：返回一个补充色，adjust-hue($color,180deg)
   invert(color, weight)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变
   
   red($color)：从一个颜色中获取其中红色值（0-255）
   green($color)：从一个颜色中获取其中绿色值（0-255）
   blue($color)：从一个颜色中获取其中蓝色值（0-255）
   hue(color)：返回颜色在 HSL 色值中的角度值 (0deg - 255deg)
   saturation(color)：获取一个颜色的饱和度值(0% - 100%)
   lightness(color)：获取一个颜色的亮度值(0% - 100%)
   alpha(color)：获取一个颜色是否是透明
   opacity(color)：获取颜色透明度值(0-1)
   
   mix($color1, $color2, [$weight])：把两种颜色混合起来。 weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
   adjust-hue(color, degrees)：通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。
   adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)：这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。
   change-color(color, red, green, blue, hue, saturation, lightness, alpha)：跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。
   scale-color(color, red, green, blue,  saturation, lightness, alpha)：另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。
   rgba(color, alpha)：根据红、绿、蓝和透明度值创建一个颜色。
   lighten(color, amount)：通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
   darken(color, amount)：通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
   saturate(color, amount)：提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
   desaturate(color, amount)：调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
   opacify(color, amount)：降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
   fade-in(color, amount)：降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
   transparentize(color, amount)：提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
   fade-out(color, amount)：提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
   

4. 布尔型：true、false
5. 空值：null
6. 数组 (list)，用空格或逗号作分隔符：1.5em 1em、0 2em, Helvetica, Arial, sans-serif

   $list: #fff 42 "awesome";
   $list: #fff,42,"awesome";
   $list:(#b4d455,42,"awesome");
   $list: ( ("item-1.1", "item-1.2", "item-1.3"), ("item-2.1", "item-2.2", "item-2.3"),  ("item-3.1", "item-3.2", "item-3.3"));
   $list: "item-1.1" "item-1.2" "item-1.3","item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3";
   
   length($list)：返回$list长度（如果不是list,返回1）
   nth($list,$index)：返回$list中第$index列表项值（如果索引值不在列表范围内，将会报错）
   index($list,$value)：返回$value在$list中的位置
   append($list,$value[,$separator])：使用$separator分隔符将$value列表项添加到$list最后（如果没有显式指定$separator分隔符，会以当前分隔符分隔）
   join($list-1,$list-2[,$separator]):使用$separator分隔符将$list-2附加到$list-1（如果没有显式指定分隔符，将对$list-1中的分隔符）
   zip(*$lists):将多个$list组合在一起成为一个多维列表。如果列表源长度并不是所有都相同，结果列表长度将以最短的一个为准
   reject($list,$value)：这是Compass中的一个函数，将$value值从$list中删除
   compact(*$args)：Compass函数，返回一个删除非真值的新列表
   list-separator($list)：返回 $list 中的分隔符。
   

7. maps：相当于 (key1: value1, key2: value2)

   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-values($map)：返回 map 中所有的 value。
   map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
   keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
   

四、运算

1. 数字运算
   SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。 关系运算 <, >, <=, >= 也可用于数字运算

   $number : 12px;
   p{
       width: $number * 2 ;
   }
   p{
       width: $number / 2 ;
   }
   p{
       width: calc($number / 2);
   }
   

2. 颜色值运算
   颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。例如 #010203 + #040506，则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，结果为#050709

   .color1{
       color: #010120 + #234234;
   }
   .color2{
       color: #010120 * 2;
   }
   .color3{
       color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75);
   }
   

3. 字符串运算

   .string1:before{
       font-family: icon + font ;
       content: "带引号字符串" + 不带引号字符串;
   }
   .string2:before{
       font-family: icon + font ;
       content: 不带引号字符串 + "带引号字符串";
   }
   

4. 布尔运算：and、or、not

   .bool1:before{
       content: $bool and false;
   }
   .bool2:before{
       content: $bool or false;
   }
   .bool3:before{
       content: not $bool;
   }
   

5. 圆括号

   p{
       width:12px * (4 - 2);
   }
   

五、函数

1. 内置函数

unit($number)：返回 $number 所使用的单位。
unitless($number)：返回 $number 是否带有单位；如果不带单位返回值为 true，带单位返回值为 false。
type-of($list)：//检测类型

2. 自定义函数：@function
   Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用，与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果

   $width : 400;
   $multiple: 2;
   @function app_width($width,$multiple){
       @return $width * $multiple px;
   }
   #app{
       width: app_width($width,$multiple);
   }
   

六、控制语句

1. @if

   p{
       $num : 3;
       @if $num == 1 {
       color:red;
       }
       @else if  $num == 2 {
        background:red;
       }
       @else{
       border:red;
       }
   }
   
   if($condition, $if-true, $if-false) 三元运算符
   

2. @for

   //从开始循环，到结束
   @for $var from  through 
   //循环从开始，一直遍历循环到结束。这种形式的循环只要碰到就会停止循环
   @for $var from  to 
   
   @for $i from 1 through 3 {
       .item-#{$i} {
       width: 2em * $i;
       }
   }
   

3. @each

   $list : ['one','two','there','four'];
   @each $i in $list {
       .item-#{$i}:before {
       content: $i;
       }
   }
   

4. @while

   $i : 4;
   @while $i>0 {
       .while_#{$i}{
       width: 1em * $i;
       $i: $i - 1;
       }
   }
   

七、插值语句 #{}

通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量

$selectName:'.foo';
$attrName:'width';
$content: "content内容";

#{$selectName}:before {
#{$attrName}:12px;
    content: "#{$content}";
}

八、!default 可以在变量的结尾添加

!default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

// !default
$content1:'初始赋值';
$content1: "!default 赋值" !default;
.content_value1:before{
    content: $content1;
}

$content2:null;//null 将会被视为未赋值,从而!default为其赋值
$content2: "!default 赋值" !default;
.content_value2:before{
    content: $content2;
}

 //编译结果
.content_value1:before {
    content: "初始赋值"; 
}

.content_value2:before {
    content: "!default 赋值"; 
}

九、其他指令

1. @import
   Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
   通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
   （1）文件拓展名是 .css；
   （2）文件名以 http:// 开头；
   （3）文件名是 url()；
   （4）@import 包含 media queries

   //@import 语法
   @import "test2.scss";
   
   // 导入多文件
   @import "test2.scss", "test3.scss";
   
   //导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：
   $family: unquote("Droid+Sans");
   @import url("http://fonts.googleapis.com/css?family=\#{$family}");
   
   //如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
   @import "colors";
   
   // 嵌套导入
   #main {
        @import "test2.scss";
   }
   

2. @media
   Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

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

3. @extend 样式继承

   .item{
       width:100%;
       background:#ffffff;
       line-height:40px;
   }
   .light_item{
       //继承上面.item的样式
       @extend .item;
       //其他样式
       background:#f0f0f0;
   }
   

4. @extend-Only
   定义一套样式并不是给某个元素用,当它们单独使用时，不会被编译到 CSS 文件中,使用 % 声明

   // ％占位符
   #content a%extreme {//%占位符选择器将不会被编译，只接受 extend 
       color:bule;
       font-size:16px;
   }
   .notice{
       @extend %extreme;
   }
   
   

5. mixin 混合指令
   混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式

   //声明
   @mixin big_text{
       font:{
           size:22px;
           weight:bold;
       }
       &:hover{
           color:red
       }
   }
   //引用
   @include big_text;
   .block{
       @include big_text;
   }
   
   //带参数
   @mixin big_text2($size:20px,$weight){
       font:{
           size:$size;
           weight:$weight;
       }
       color:#555;
   }
   .p_big_text2{
       @include big_text2($size:24px,bold)
   } 
   
   //不定长参数
   @mixin big_text4($font...){
       font: $font;
       color:#555;
   }
   .p_big_text4{
       @include big_text4(20px 400)
   }
   
   //向混合样式中导入内容
   @mixin apply(){
       #app{
           color:red;
           @content;
       }
   }
   #page{
       @include apply{
       .container{
           width:100%;
       }
       }
   }
   

6. @debug 将SassScript表达式的值打印到标准错误输出流。它对于调试有复杂SassScript的Sass文件非常有用

   @debug 10em + 12em;
   

7. @warn 指令将SassScript表达式的值打印到标准错误输出流。对于那些需要警告用户已弃用或存在的小错误。可以使用——quiet命令行选项或:quiet Sass选项关闭警告

   @mixin adjust-location($x, $y) {
     @if unitless($x) {
       @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;
   }
   

8. @error 指令将SassScript表达式的值作为致命错误抛出，包括一个nice的堆栈跟踪。它对于验证mixin和函数的参数很有用

   @mixin adjust-location($x, $y) {
     @if unitless($x) {
       @error "$x may not be unitless, was #{$x}.";
     }
     @if unitless($y) {
       @error "$y may not be unitless, was #{$y}.";
     }
     position: relative;
      left: $x; 
      top: $y;
   }
   

9. @at-root 指令用来放弃当前的嵌套层级，让其内部的CSS规则到根部

   // at-root 指令
   .parent:before{
       content:"parent 内容";
       @at-root .chird:before{
           content:"chird 内容";
       }
   }
   
   //编译后
   .parent:before {
       content: "parent 内容"; 
   }
   .chird:before {
       content: "chird 内容";
   }
   

10. @at-root (without: …) and @at-root (with: …)

    @media print {
      .page {
        width: 8in;
        @at-root (without: media) {
          color: red;
        }
      }
    }
    
     //编译后
     @media print {
      .page {
        width: 8in;
      }
    }
    .page {
      color: red;
    }  
    

十、导出变量

:export {
  colorPrimary: map_get($ant_them,'colorPrimary');
  borderRadius: map_get($ant_them,'borderRadius')
}

说明：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明