CSS预编译处理语言-sass

一、为什么使用sass?

1. sass引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等,可以使css代码更容易编写并且更容易维护。

2. sass作为一种预处理语言，为css提供缩进语法。

二、sass基本用法

2.1 变量

使用$来定义变量，变量可以在css规则块定义之外存在。变量支持块级作用域，与javascript中变量区别。在sass中$link-color和$link_color其实指向的是同一个变量，一般使用中划线。

数据类型：数字，字符串，颜色，布尔型，空值，数组，map

2.1.1 字符串 

分为有引号字符串和无引号字符串，使用#{}可以把有引号字符串转化为无引号字符串（作用：可以传入参数并转化为选择器）

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

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

有引号+无引号=有引号 ps: "sans"+serif="sans=serif"

无引号+有引号=无引号 ps: sans+"serif"=sans=serif

2.1.2 

2.2 css嵌套规则

2.2.1 &

article a {
  color: blue;
  &:hover { color: red }
}

使用&加到当前元素本身（比如上栗就是对article a:hover进行设置，而不是article a的子元素们的悬浮效果）

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

使用&还可以把选择器添加到父元素前面

2.2.2 群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

2.2.3 子选择器和同层选择器

> 直接子元素选择器

+ 选择紧跟着的同层元素

~ 全体同层选择器 选择所有符合条件的同层元素

2.2.4 属性的嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

2.3 @import导入sass

2.3.1 css原本的@import

<style>
    @import "@import.css";
    #bgc{background-color: green}
</style>

注意事项：@imort一定要早于css样式引入

存在主要问题：破坏css的并行下载，变成css文件的同步下载

2.3.2 sass中的@import

引入sass文件可以写在css规则内

.blue-theme {
@import
 "blue-theme"}

引入sass文件一个思考：如果先定义一个变量，引入的sass文件中有相同的变量名，变量覆盖了怎么办？

！default声明被引入的sass文件中变量默认值，如果先定义了变量根据先的来。（是！important的对立面）

2.3.3 区分sass中的@import和css中的

在sass中会使用css原有import的情况

1、引入文件是css文件（加.css后缀或者地址为css文件的地址）

2、引入一个url地址(比如http://www.sass.hk/css/css.css)

如何避免：

把后缀改成.scss(简单粗暴)

疑问：如果需要引入url地址呢？

思考：可以使用link直接引入url地址？

2.4 静默注释

使用//的注释在最后生成的css文件中不会出现

2.5 混合器

2.5.0 混合器和html类

之前写项目遇到相同的样式时的常用处理方法：给几个样式相同的元素加一个共同的html类然后添加样式，事实上这种做法并不好。类名主要是描述html元素的含义而不是样式，应该用混合器来实现。

2.5.1 栗子一个

@mixin link-colors(
    $normal,
    $hover: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  li {
     list-style-type: none;
     margin-left: 10px;
  }
}
ul .plain {
  color: #444;
  @include link-colors(#333);
}

栗子中的要点：

默认参数值（如果不给&hover赋值的话,默认值就是&normal），混合器传参(&hover,&normal都是传递的参数)，混合器中的css规则（栗子定义该元素的子元素li的属性值）

2.6 继承

继承是建立在语义化的关系上，比如.error和.seriouserror

继承最简单的工作原理：如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换

继承的要点

1.继承的css代码相对混合器较少

2.继承遵循css层叠的规则（因为混合器是直接把代码粘到对应位置，所以不存在css层叠的问题）

3. 尽量不要使用后代选择器来继承（sass会生成多种可能的选择器情况，css代码量容易失控），可以继承后代选择器4. 存在限制 Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，可能会导致需要重复不少css代码

2.7 运算

有数据类型均支持相等运算 == 或 !=

数字类型的数据支持+ - * / %

颜色等也可以运算

2.8 控制指令

2.8.1 @if @else if @else

2.8.2 @for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

$i是一个变量

through 和 to 的区别:through包含start 和 end start不包含end值，to只包含

2.8.3@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

2.9 函数

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

2.10 输出格式

:nested 默认输出格式

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

: expanded

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

: compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

: compressed

#main{color:#fff;background-color:#000}#main p{width:10em}

三、小结

多次出现的属性可以定义变量，多次使用的相同样式可以使用混合器，元素之间语义化的关系可以使用继承，在多个文件多个项目中出现的sass文件可以使用@import导入，sass使css编写更清晰容易且易于维护。