30分钟SASS教程

SASS教程

SASS的概念

SASS： SASS 是一种 CSS 的开发工具，提供了许多便利的写法，使得 CSS 的开发，变得简单和可维护。

SASS文件：普通的文本文件，里面可以直接使用 CSS 语法。文件后缀名是.sass

在线编译 SASS 网址：https://www.sassmeister.com/

SASS语法

SASS 语法主要有变量、嵌套CSS、导入SASS文件、混合器、继承这几部分。

变量

SASS 为 CSS 引入了变量，使用 $ 符号来标识变量，通过变量名来引用，而无需重复书写。

Sass代码:

//变量声明
$highlight-color: #F90;

.a:hover{
  border: 1px solid $highlight-color;
}

编译后：

.a:hover {
  border: 1px solid #F90;
}

要点：

1. SASS 中的 {…} 块具有作用域，括号内声明的变量不能被括号外引用

2. SASS 是按顺序编译，所以在变量使用前要先声明

3. 在声明变量时，变量值也可以引用其他变量（层层引用）

4. SASS 的变量名与 CSS 中的属性名和选择器名称相同，包括中划线和下划线。

嵌套CSS

CSS 中重复写选择器是非常麻烦

#content aside { background-color: #EEE }
#content article a { color: blue }
#content article a:hover { color: red }
#content article h1,#content article h2 { color: #333 }

SASS 可以让你只写一遍，在规则块中嵌套规则块。

SASS代码：

#content {
  aside { background-color: #EEE }
  article {
    a {
      color: blue;
      &:hover { color: red }
    }
    h1,h2 { color: #333 }
  }
}

编译后：

#content aside {
  background-color: #EEE;
}
#content article a {
  color: blue;
}
#content article a:hover {
  color: red;
}
#content article h1, #content article h2 {
  color: #333;
}

要点：

1. SASS 在转换成 CSS 时，会把{…}里边的嵌套规则块一个个打开。如上例子，把#content（父级）这个id放到article选择器（子级）和aside选择器（子级）的前边

2. SASS 在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边。如果你想把规则应用到自身，而后代选择器的方式无法帮你实现。

   如 a:hover 而不是 a（空格）:hover

   这时，你可以使用父选择器的标识符 & ，当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是 & 被父选择器直接替换，如上例子的a

3. 使用逗号分隔两个选择元素，会组成群组选择器,群组选择器的规则会对命中群组中任何一个选择器的元素生效

   如上 article{ h1,h2 { color: #333 }}，解析后变成 article h1,#content article h2 { color: #333 }

4. 子组合选择器和同层组合选择器：>、+和~

   跟 jQ 的选择器类似，

   子组合选择器 > ，选择一个元素的直接子元素，

   同层相邻组合选择器 + ，选择元素后紧跟的元素，

   同层全体组合选择器 ~ ，选择所有跟在元素后的同层元素，不管它们之间隔了多少其他元素

导入SASS文件

CSS 的 @import 规则：允许在一个css文件中导入其他css文件，只有执行到@import时，浏览器才会去下载其他css文件

SASS 的 @import 规则：生成css文件时就把相关文件导入进来

要点：

1. SASS 可以导入 .css .sass .scss 文件结尾的文件（其中 .sass .scss文件后缀可省略）

   @import “color”; // color.sass
   @import “mixins”; // mixins.scss
   @import “index.css” // index.css

2. SASS 局部文件的文件名以下划线开头,这样， SASS 就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

SASS代码：

(1)
//文件index.scss
@import "_night-mode";
...

(2)
//文件test.scss
@import "night-mode";

编译：

(1)
//文件index.css
...

(2)
//文件test.css
...
//文件night-mode.css
...

3.标签 !default 可以定制修改引入的 SASS 库文件中的某些值

//如果变量 $width 被声明赋值了，那就用它声明的值，否则就用这个默认值 400px
$width: 400px !default;

4.SASS 允许嵌套导入，被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效（相当于有了作用域）。

混合器

由于大段大段的重用样式的代码，独立的变量就没办法应付，可以通过 SASS 的混合器 @mixin 和 @include 实现大段样式的重用。

SASS代码：

@mixin no-bullets($normal, $hover, $visited) {
  list-style: none;
  li {
    list-style-image: none;
  }
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

ul.plain {
  color: #444;
  @include no-bullets(blue, red, green);
}

编译：

ul.plain {
  color: #444;
  list-style: none;
  color: blue;
}
ul.plain li {
  list-style-image: none;
}
ul.plain:hover {
  color: red;
}
ul.plain:visited {
  color: green;
}   

要点：

1.混合器是展示性的描述，所以名字应该是是一种展示性的描述

2.混合器可以包含 CSS 规则，包含选择器和选择器中的属性，
如上 ul.plain li

3.可以通过在 @include 混合器时给混合器传参，来定制混合器生成的精确样式，如上 @include no-bullets(blue, red, green);

混合器传参数还有更多用法，这里不细讲

继承

当一个元素拥有的类表明它属于另一个类的子集，这时可以使用继承。

SASS 代码：

.one {  
    width:100px;
    height:100px;  
}  
.two {  
    /*继承的样式*/  
    @extend .one;  
    /*独立的样式*/  
    background:red;  
    border:5px solid #000;  
}  

编译后：

.one, .two {
  width: 100px;
  height: 100px;
}

.two {
  background: red;
  border: 5px solid #000;
}

继承(Extend)将想要继承的选择器(如“.two”)和其引用的选择器(如“.one”)组成群组选择器中间用逗号隔开，组成群组选择器。

要点：

1.要继承的不仅仅是一个类名，可以是一个id也可以是一个元素，也可以是某个状态，大部分任何选择器都能继承（包含选择器(.one .two)或者相邻兄弟选择器(.one+.two)目前还是不支持继承）。

.hoverlink {  
  @extend a:hover;  
}  
a:hover {  
  text-decoration: underline;  
} 

2.可以使用“，”继承多个选择器的样式

.one {  
    width:100px;height:100px;  
}  
.two {  
    /*继承的样式*/  
    @extend .one, .three;  
    /*独立的样式*/  
    background:red;  
    border:5px solid #000;  
}  
.three {  
    padding:10px;  
}   

3.可以链型继承， .one 继承 .two ， .two 继承 .three