Sass学习笔记（1）

1.变量

在Sass中使用$符号定义变量。

  $defaultColor: #fff;

在sass可以直接使用变量：

 $defaultColor: #fff;
 body {
    background：$defaultColor; //编译后#fff
 }

注意，sass也有变量作用域，如果你在一个选择器内部定义了一个变量，那么它只在这个选择器内部生效。

 $defaultColor: #fff;
 body {
    $defaultColor: #ccc;
    background：$defaultColor; //编译后#ccc
 }
a{
    color:$defalutColor;//编译后#fff
}

但是可以通过!global定义全局变量

 $defaultColor: #fff;
 body {
    $defaultColor: #ccc !globa;
    background：$defaultColor; //编译后#ccc
 }
a{
    color:$defalutColor;//编译后#ccc
  }

2.函数

在sass中，通过@function定义函数，通过@return返回值，不返回样式。
(1)内置函数
官网函数列表
(2)自定义函数
创建一个px转rem得函数

@function pxToRem($px){   //$px为需要转换的字号
    @return $px / 100px * 1rem;   //100px为根字体大小
}
a{
   font-size:pxToRem(16px);
   height:pxTorem(20px) 
}

编译后

a{
  font-size:0.16rem;
  height:0.2rem;
} 

3.语法技巧

(1) 多层嵌套

body{  
  color: black;  
  div {
       color: red;
        span{
              display:block;
          }
    }  
}

编译后

body{
   color:black;
}
body div{
   color:red;
}
body div span{
    display:block;
}

(2) 属性嵌套

a{  
  font: {  
    size: 12px;  
    weight: bold;  
  }  
}

编译后

a{
  font-size:12px;
  font-weight:bold;
}

(3) &符号的使用
在Sass中，&表示父元素。

button {  
  &:hover { color: red; }  
}
.main {   
  &-header { color: bule; }  
}

编译后

button:hover{
color:red;
}
.main-header{
color:blue;
}

4.运算

Sass支持数字的加减乘除、取余运算 (+, -, *, /, %), 关系运算<, >, <=, >=以及相等运算==, !=。

a{
    font-size:(12px/16px);
    height:10px + 20px;
}

编译后

a{
    font-size:0.75px;
    height:30px;
}

注意：由于原生css语法中就有使用/的地方，所以在sass只有以下情况视为除法运算

• 值被圆括号包括 ( 10px / 20px)
• 属于算数表达式的一部分 (10px + 20px/40px)
• 如果有一个值是变量或函数 $hight/10
• sass中+也可以做字符串拼接