sass入门（混合器、数据类型）

1.混合器：

什么是sass混合器：

是检查代码的重复率的

2.标识符：@mixin

调用：@include name

语法：

@mixin 名字

{

    样式属性1:取值1;

    样式属性2:取值2;

    ……

}

//调用 名字

选择器

{

    @include 名字;

}

@mixin border{
        width: 100px;
        height: 100px;
}
#div{
    @include border;
    background-color:red ; 
}

css显示：

#div {
  width: 100px;
  height: 100px;
  background-color: red;
}

3.何时用：

3.1：一个逻辑单元一个属性(能否有一个好名字)；

3.2：html外观的展示描述

4.传参：(按照变量的格式，通过逗号分隔，将参数写进圆括号里,引用指令时，按照参数的顺序，再将所赋的值对应写进括号)

@minix  name(形参)

@include  name(实参)

@mixin box($width,$height){
    width: $width;
    height: $height;

}
#div2{
    @include box(100px,100px)
}

css显示：

#div2 {
  width: 100px;
  height: 100px;
}

4.混合器中的css规则：包含css规则，以及选择器和属性。可使用父级元素&

5.选择器继承：一个选择器继承另一个选择器的样式，若error和seriouserror有共同样式会在一块，不同不会再一块

6.不要在css规则中使用后代选择器

7.数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

7.1数字运算：+ - * / %

"/"以下为除号运算符：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
  font: 10px/8px;
  height: 22;
  width: 50px;
  height: 200px/2;
  width: 5px;
}

css显示为：

p {
  font: 10px/8px;
  height: 22;
  width: 50px;
  height: 200px/2;
  width: 5px;
}

"/"以下不为除号运算符：

只需要用 #{} 插值语句将变量包裹。

8.颜色值运算：颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p{
    color: #010305+#020406;
}

01+02=03；03+04=07。以此类推。

css显示为：

p {
  color: #03070b;
}

8.2:如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

css显示为：透明度不能算出。

p {
  color: rgba(255, 255, 0, 0.75);
}

9.字符串运算：

+号可用于连接字符串：

有加号的在加号左边，连接无引号，结果都有引号，反之。

p{
    content: "ni hao"+ wuhan;
    content: ni hao+ "wuhan";
}

css显示为：

p {
  content: "ni haowuhan";
  content: ni haowuhan;
}

9.1：运算表达式与其他值连用时，用空格隔开。

9.2：在字符串中用#{}来运算

p{
    content: "ni hao #{null} han";
}

css显示为：

p {
  content: "ni hao  han";
}