今日学习SASS混合器、运算符

混合器

使用混合器实现样式的重用

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。 混合器使用@mixin标识符定义。看上去很像其他的css @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。

定义格式：@mixin 混合器的名称 {代码}

引用：@include 混合器的名称;

@mixin a-a {
    text-decoration: none;
    font-size: 25px;
    font-family: "宋体";
}

.qwe {
    @include a-a;
}

使用选择器继承来精炼CSS

使用sass的时候，最后一个减少重复的主要特性就是选择器继承，基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，

.div {
    width: 1000px;
    height: 100px;
}

.divv {
    border-radius: 10px;
}

.div1 {
    @extend .div;
    @extend .divv;
    background-color: aqua;
}

.div2 {
    @extend .div;
    @extend .divv;
    background-color: greenyellow;
}

.div3 {
    @extend .div;
    @extend .divv;
    background-color: blueviolet;
}

运算符

数学运算符：+ - * /

关系运算符：> < >= <=

逻辑运算符：and or not

数据类型

数字 1，2，10px

字符串 有引号字符串与无引号字符串，"fkzx",hsd

颜色 blue，#4555sc，rgba(255,0,0,0)

布尔型 true，false

空值 null

数组(list) 用空格或逗号做分隔符，1.5em 1em 0 2em，Helvetica,Arial,sans-serif

maps,相当于JavaScript的object，(key1: value1, key2: value2)

数学运算符

加、减、乘

p {
	// 加
    width: 10+20;
    width: 10+20px;
    width: 10+20%;
    // 减
    width: 20-5;
    width: 20-5px;
    width: 20-5%;
    // 乘
    width: 5*5;
    width: 5*10px;
    width: 5*20%;
}

结果：

p {
  // 加
  width: 30;
  width: 30px;
  width: 30%;
  // 减
  width: 15;
  width: 15px;
  width: 15%;
  // 乘
  width: 25;
  width: 50px;
  width: 100%;
}

除法运算

如果值或值的一部分，是变量或者函数的返回值

如果值被圆括号包裹

如果值是算数表达式的一部分

p{
	$num1: 20;
    $num2: 5;
    border: $num1/10;
    border: $num1/$num2;
    border: (50/5);
    border: 5+50/5;
}

结果：

p {
  border: 2;
  border: 4;
  border: 10;
  border: 15;
  border: 20/5;
}