12.27日总结

12.27日总结

2 混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体)，那么使用变量来统─处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像css的其他@标识符，比如说 Cmedia或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

这一节将介绍使用混合器来避免重复。通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

2.1 何时使用混合器

1. 一个逻辑单元的一组属性

   判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

2.HTML元素外观的展示性描述

混合器在某些方面跟css类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述:用来描述 html元素的含义而不是 html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。

2.2 混合器中使用CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

2.3 混合器传参、参数默认值及参数的顺序问题

混合器传参通过@include 混合器名称 来选择选择器 混合器值后面括号内的形参对应 选择器内容的实参；形参与实参的值相对应，或者通过形参来命名，保证不会出现有误。

3 选择器继承

选择器继承就是说一个选择器可以继承为另一个选择器定义的所有样式。

把共有的属性抽离出来放入到一个选择器中，然后让其余的有需要这个选择器去继承这个共有的选择器

两个、甚至多个选择器有共有的属性，选择器单独的属性是属于选择器

选择器继承的使用

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

/*选择器继承的使用*/
​
.box{
​
  border-bottom: 1px solid red($color: #000000);
​
  position: relative;
​
​
​
}
​
\#div{
​
  color: greenyellow;
​
  @extend .box
​
}

效果如下

/*选择器继承的使用*/
​
.box, #div {
​
 border-bottom: 1px solid 0;
​
 position: relative;
​
}
​
​
​
\#div {
​
 color: greenyellow;
​
}

选择器继承HTML元素

/*选择器继承HTML元素*/
a{
    text-align: center;
}
.disabled {
    color: gray;
    @extend a;
}

效果如下

/*选择器继承HTML元素*/
a, .disabled {
  text-align: center;
}
​
.disabled {
  color: gray;
}

选择器的细节和最佳实践

继承工作细节

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性,所以使用继承往往比混合器生成的，CSS体积更小。如果你非常关心你站点的速度，请牢记这一点。

继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。

最佳实践

/*继承的细节和最佳实践*/
.foo .bar { @extend .baz; }
.bip .baz { a: b; }

效果如下：

/*继承的细节和最佳实践*/
.bip .baz, .bip .foo .bar, .foo .bip .bar {
  a: b;
}

4 运算

在css属性的基础上，Sass提供了一些名为SassScript的新功能。SassScript可作用于任何属性，允许属性使用变量、算数运算等额外功能。

4.1 数据类型

·数字。例如:1、2、13、10px。

·字符串。包括有引号字符串与无引号字符串,例如:"foo"、'bar'、 baz。

颜色。例如:blue、#04a3f9、rgba(255,0,0,0.5）。

·布尔型。例如:true、 fa1se。

·空值。nu11。

·数组(list)。用空格或逗号作分隔符，例如:1.5em 1em 0 2em、He1vetica，Aria1，sans-serif。·maps。相当于JavaScript的object，例如:(key1: value1，key2: value2)。

2.2 数字运算

Sass$cript支持数字的加减乘除、取整等运算（+、-、*、/、%)，如果必要会在不同单位间转换值。加、减、乘、除都必须是同一单位下运算，不然会报错。

Sass基本算法： 加法：对于不同类型的单位，计算会报错； 减法：对于不同类型的单位，计算会报错； 乘法：对于不同类型的单位，计算会报错；多个值单位相同时，只需要为一个值提供单位即可。 除法：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

2. 如果数值被小括号包围。

3. 如果数值是数学表达式的一部分。

四、颜色运算，所有算数运算都支持颜色运算，它所采用的是分段运算

.span {
  color: #010203 + #040506;
}
.span2 {
  color: #010203 * 2;
}
.cf3 {
  background: red + blue;
}
.cf4{
  background: #ff0000 + #ffff00; // 最高只能加到ff
}
​

编译后

.span {
​
​
​
  color: #050709;
​
​
​
}
​
​
​
.span2 {
​
​
​
  color: #020406;
​
​
​
}
​
​
​
.cf3 {
​
​
​
  background: magenta; //洋红色
​
​
​
}
​
​
​
.cf4 {
​
​
​
  background: yellow; //黄色
​
​
​
}

插值

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

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }