Sass 语法小结

时间 2019-11-16

标签 sass 语法小结繁體版

原文原文链接

本文主要对 Sass 的基本语法进行了小结，方便往后快速查阅使用。css

1、变量（$）

1. 变量标识符

Sass 使用 $ 符号来标识变量。前端

$highlight-color: #abcdef;
.selected {
     border: 1px $highlight-color solid;
}

2. 重复引用

在声明变量时，变量值也能够引用其它变量。web

$highlight-color: #abcdef;
$highlight-border: 1px $highlight-color solid;
.selected {
     border: $highlight-border;
}

2、嵌套

1. 基本嵌套

在一个规则块中，既能够像普通的 CSS 那样包含属性，又能够嵌套其它规则块。浏览器

#content {
     background-color: #f5f5f5;
     aside { 
         background-color: #eee; 
     }
}

2. 父选择器的标识符 `&`

一是用来解决相似 :hover 这样的伪类选择器，二是能够再父选择器以前添加选择器。sass

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

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

3. 群组选择器

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

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

子组合选择器和同层组合选择器：>、+ 和 ~。app

article section {     // 选择article下的全部section选择器元素
    margin: 5px;
}

article > section {     // 选择article下紧跟着的子元素section选择器元素
    border: 1px solid #ccc;
}

header + p {             // 选择与header元素同层的p元素
    font-size: 1.1em
}

article ~ article {     // 选择全部跟article后的同层article元素
    border-top: 1px dashed #ccc
}

article {             // sass的写法，能够从选择符前断开
     ~ article { 
         border-top: 1px dashed #ccc; 
     }
     > section { 
         background: #eee; 
     }
     dl > {
          dt { 
              color: #333; 
          }
          dd { 
              color: #555; 
          }
     }
     nav + & { 
         margin-top: 0; 
     }
}

4. 嵌套属性

把属性名从中划线 - 的地方断开，在根属性后添加一个冒号 :，紧跟一个 {} 块，把子属性部分写在这个 {} 块中。ide

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

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

nav {     // sass
     border: 1px solid #ccc {
          left: 0px;
          right: 0px;
     }
}

nav {     // css
     border: 1px solid #ccc;
     border-left: 0px;
     border-right: 0px;
}

3、导入

1. `@import`规则

CSS 有一个特别不经常使用的特性，即 @import 规则，它容许在一个 CSS 文件中导入其它 CSS 文件。然而，后果是只有执行到 @import 语句时，浏览器才会去下载其它 CSS 文件，这致使页面加载起来特别慢。字体
Sass 也有一个 @import 规则，但不一样的是，Sass 的 @import 规则在生成 CSS 文件时就把相关文件导入进来。这意味着全部相关的样式被概括到了同一个 CSS 文件中，而无需发起额外的下载请求。网站
全部在被导入文件中定义的变量和混合器都可在导入文件中使用。url
使用 Sass 的 @import 规则并不须要指明被导入文件的全名，你能够省略 .sass、.scss文件后缀。

@import 'colors';    // colors.scss
@import 'mixins';    // mixins.scss
@import 'grid';      // grid.scss

2. 使用局部文件

有一些专为 @import 命令而编写的 Sass 文件，这些文件并不会编译成对应的独立 CSS 文件，这样的 Sass 文件称为 局部文件。
局部文件的文件名如下划线开头，如 _night-sky.scss。
当你想用 @import 导入局部文件时，可省略文件名前面的下划线 -，如：

@import 'themes/night-sky';    // themes/_night-sky.scss

3. 默认变量值

若是用户在导入你的局部文件以前声明了变量，那么你的局部文件中的默认变量值就无效，不然就取默认值。

$fancybox-width: 400px !default;

.fancybox {
     width: $fancybox-width;
}

4. 嵌套导入

例如，有一个名为 _blue-theme.scss的局部文件，内容为：

aside {
     background: blue;
     color: white;
}

而后把它导入到一个CSS规则内，以下所示：

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

生成的结果跟你直接在 .blue-theme 选择器内写_blue-theme.scss文件的内容彻底同样：

.blue-theme {
     aside {
          background: blue;
          color: #fff;
     }
}

5. 原生的 CSS 导入

因为 Sass 兼容原生的 CSS，因此它也只支持原生的 CSS @import，下列三种状况都生成原生的 CSS import：

被导入的文件以 .css 结尾；
被导入文件的名字是一个 URL 地址，好比：好比http://sass-lang.com/styleshe...）；
被导入文件的名字是 CSS 的 url() 值。

另外，由于 Sass 的语法彻底兼容 CSS，因此能够把原始的 CSS 文件更名为 .scss 后缀，便可直接导入了。

4、注释

1. 静默注释

body {
     color: #333; // 这种注释内容不会出如今生成的css文件中（静默注释）
     padding: 0;  /* 这种注释内容会出如今生成的css文件中 */
}

5、混合器

1. 定义与使用

若是你的整个网站中有几处小小的样式重复（例如同样的颜色和字体），那么使用变量来统一处理这种状况是很是不错的选择（小颗粒度）。可是当你的样式变得愈来愈复杂，你须要大段大段的重用样式的代码，那么独立的变量就没有办法应付这种状况，这时候你能够经过 Sass 的混合器（@mixin）来实现大段样式的重用（大颗粒度）。
混合器使用 @mixin 标识符定义，而后经过 @include 来使用这个混合器。

@mixin rounded-corners {     // @mixin 定义
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

.notice {     // @include 调用
     background-color: green;
     border: 2px solid #00aa00;
     @include rounded-corners;
}

.notice {     // 最后生成
     background-color: green;
     border: 2px solid #00aa00;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

2. 使用场景

判断一组属性是否应该组合成一个混合器，一条经验法则就是你可否为这个混合器想出一个好的名字。若是你能找到一个很好的名字来描述这些属性修饰的样式，好比 rounded-corners、fancy-font 或者 no-bullets，那么每每可以构造一个合适的混合器。若是你找不到，这时候构造一个混合器可能并不合适（避免滥用）。

3. 混合器中的 CSS 规则

混合器不只能够包含属性，还能够包含 CSS 规则，包含选择器和选择器中的属性。

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

ul.plain {    // @include 调用
     color: #444;
     @include no-bullets;
}

ul.plain {     // 最终生成
     color: #444;
     list-style: none;
}
ul.plain li {
     list-style-image: none;
     list-style-type: none;
     margin-left: 0px;
}

4. 给混合器传参

混合器并不必定总得生成相同的样式，能够经过在调用 @include 时传参来定制混合器生成的精确样式（跟 JavaScript 的 function 很像）。

@mixin link-colors($normal, $hover, $visited) { // @mixin 定义
     color: $normal;
     &:hover { 
         color: $hover; 
     }
     &:visited { 
         color: $visited; 
     }
}

a {    // @include 调用
    @include link-colors {blue, red, green};
}

a { color:blue; }    // 最终生成
a:hover { color:red; }
a:visited {color:green; }

当你使用 @include 调用混合器时，有时候可能会很难区分每一个参数是什么意思或者参数之间是一个怎么的顺序。为了解决这个问题，Sass 容许经过语法 $name: value 的形式指定每一个参数的值。这种形式的传参，参数顺序什么的就没必要在意了，只须要没有漏掉参数便可。

a {    //  传参
     @include link-colors(
          $normal: blue,
          $visited: green,
          $hover: red
     );
}

为了在 @include 调用混合器时没必要传入全部的参数，咱们能够给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式。默认值能够是任何有效的 CSS 属性值，甚至是其它参数的引用。

@mixin link-colors(     // 使用默认参数值
     $normal,
     $hover: $normal,
     $visited: $normal
) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
}

6、继承

1. 定义和使用

sass中，选择器继承可让选择器 继承另外一个选择器的全部样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟须要继承的选择器。

h1{    // sass
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

h1,.speaker{    // css
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

后记

Sass 功能丰富、强大，上面的语法小结只是其中的一小部分。任何你想提升 CSS 代码编写效率的方法仿佛都能在 Sass 中找到。掌握 Sass 的使用应该成为现代前端开发的一项必备技能，尤为是那些大型的、复杂的 Web 项目。

参考资料

Sass 与 Compass 实战