12.27日知识点梳理

混合器

如果需要大段重复样式代码，独立的变量就没有用处了，可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像css的其他@标识符，比如@media或者@font-face，这个标识符给一大段样式杜宇一个名字，这样就可以轻易地通过引用这个名字重用这段样式。

然后就可以在样式表中通过@include来使用这个混合器，放在你希望的任何地方。

我们要避免滥用混合器。

案例：

@mixin border-radius{

    border-radius: 10px;

}

button{

    border: 1px solid green;

    @include border-radius;

}

何时使用混合器

—个逻辑单元的一组属性

利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

 html元素外观的展示性描述

混合器在某些方面跟css类很像。都是要给一大段样式命名。

类名是在html文件中应用的，而混合器是在样式表中应用的。

这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述:用来描述 html元素的含义而不是html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。

混合器中的CSS规则

混合器中的规则甚至可以使用sass的父选择器标识符“&”。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代“&”。

如果一个混合器只包含css规则，不包含属性，那么这个混合器就可以在文档的顶部调用，写在所有的css规则之外。

案例：

@mixin nav-ul{

    list-style: none;

    li{

        list-style-image: none;

        list-style-type: none;

        padding: 20px;

    }

}

ul.plagin{

    @include nav-ul;

    color: red;

}

给混合器传参

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css 属性值的变量。

案例：

@mixin colors($normal,$hover,$visited){

    color: $normal;

    &:hover{

        color: $hover;

    }

    &:visited{

        color: $visited;

    }

}

a{

    @include colors(pink,blue ,green );

}

默认参数值

为了在 @inc1ude混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用`name: default-value`的声明形式，默认伯可以是任何有效的css属性值，甚至是其他参数的引用。

案例：

@mixin link-colors($normal,$hover:$normal,$visited:$normal){

    color: $normal;

    &:hover{

        color: $hover;

    }

    &:visited{

        color: $visited;

    }

}

a{

    @include link-colors(pink);

}

选择器继承

使用sass 的时候，最后一个减少重复的主要特性就是选择器继承。这个可以通过@extend语法实现。一定是一个选择器去继承另一个选择器的样式。

案例：

.error{

    border-radius: 10px;

    border: 1px solid green;

    padding: 10px;

}

.noties{

    @extend .error;

    color: pink;

}

共有部分去继承，不同的部分单独列出来。

何时使用继承

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。

继承的高级用法

任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。大多数情况你可能只想对类使用继承，但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

继承的工作细节

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。
使用继承的最佳实践

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css 属性。

不要用后代选择器去继承选择器，但我们可以用一个选择器去继承后代选择器。

案例：

.baz{ color: red}

.foo .bar{

    @extend .baz;

}

.bip .baz{

    color: pink;

}

运算

所有的数据类型都支持等式运算（==和！=）。另外，每种数据类型也有其支持的特殊运算符。

数据类型

数字。例如：1,2,13,10px;

字符串。包括引号字符串与无引号字符串，例如“foo”、“bar”、baz。

颜色。例如：blue，#04a3f9、rgba（255,0,0,0.5）。

布尔型。例如：true、false

空值。Null

数组：用空格或逗号作分隔符。

Maps。相当于javascript的object。

数字运算

Sassscript支持数字的加减乘除、取整等运算（+、-、*、/、%），如果必要会在不同单位间转换值。

案例：

div{

    width:6*50;

    $widths:1000;

    height: $widths/2;

    border-radius: (2+4)/2;

   

}

颜色值运算

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

案例：

p{

    color: red+green;

}

#p{

    color: green*2;

}

字符串运算

如果有引号字符串（位于+左侧）链接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于+右侧）链接有引号字符串，运算结果则没有引号。

案例：

p{

    content: "foo"+bip;

    font-family: bar+"span";

}

#p1{

    width: 5+5 auto;

}

圆括号

圆括号可以用来影响运算的顺序：

案例：

P{

Width：1em+（2em+3）;

}

P{

Width:7em;

}

常用内置函数

在sass定义了多种函数。

案例：

div{

    color: hsl(0, 100%, 50%);

}

插值语句

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

使用插值修饰属性，修饰选择器。

这种方法的好处是在后面项目的修改、维护、拓展非常方便。

案例：p{

   $num1:1000;

   $num2:400;

   font-size: #{$num1}/#{$num2};

}