SASS详解 - 技术栈

简述

SASS是一种CSS扩展语言，可以将SASS编译成css代码，使用sass能令CSS代码的编写过程更加便捷和模块化。

sass的本质可以说就是进一步模块化css，减少编写重复的css代码

使用变量

在sass中我们可以把反复使用的css属性定义成变量，然后通过变量名去引用他们，从而不用重复书写这个属性值。

使用$符号定义变量

复制代码

$变量名: 属性值;

变量的作用域也分为块外和块内，块内定义的变量只能供本块使用，而块外能供所有地方使用

定义变量的时候也能够引用之前定义过的变量，例如：

复制代码

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

在sass变量名中的中划线和下划线是等同的，不做区分

嵌套CSS规则

普通嵌套

我们在写css代码的时候，写选择器的时候是很麻烦的，例如：

复制代码

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

可以看到写后代选择器的时候，content等父容器要写很多遍

而sass提供了一种嵌套式写法，只需写一次且可读性更高

复制代码

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

可以看到我们可以随心所欲地定义父容器或者它子容器的样式，不用一个个地重复写选择器

这种基于后代选择器的嵌套写法有时候也会有点点问题

伪类选择器

当我们使用到伪类选择器的时候

复制代码

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

编译后的css代码是这样子的

复制代码

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

注意a后面有空格，也就是说嵌套的写法默认会使用后代选择器拼接空格，但这里我们想要写成a:hover

这时候sass就提供了&给我们使用，&代表的是我们父类的选择器，这里的&代表的就是article a，我们可以把sass代码写成这样

复制代码

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

这样编译后的css代码就没有问题了

群组选择器

在css中当我们使用后代选择器和逗号为多个容器添加样式时，容器的代码要写很多遍

复制代码

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

在sass中也支持嵌套

复制代码

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

css属性的嵌套

对于一些css的属性名，例如border-什么什么，一遍遍重复写挺烦人的，sass能够让我们用嵌套的形式偷懒

复制代码

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

像这里sass会将style、width等子属性通过-和border连接起来，达到偷懒的目的

SASS文件的导入

sass可以通过@import的形式导入其他sass文件，达到模块化的效果

局部文件

那些专门供别的sass文件import的文件被称为局部文件，sass有个特殊的约定为这些文件命名

那就是以下划线开头，在引入的时候还可以省略下划线

举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

默认变量值

在sass中，一般情况下你反复声明一个变量，只有最后一处定义会生效

如果在写sass文件的时候希望用户可以定制你的sass文件，在引入前声明了一些变量

引入后你的sass文件会更改这些变量的值，如果我们希望这些变量使用上一次声明的值

我们就要用到!default标签，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

Java

复制代码

$fancybox-width: 400px !default;

像这样声明一个默认变量值，就代表这个变量默认值是400px，如果在导入前声明了就按导入前的值

嵌套导入

sass允许@import命令写在css规则内，像这样

Java

复制代码

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

blue-theme文件里的sass代码会直接嵌套到.blue-theme选择器里

混合器mixin

我们可以用@mixin标识符定义一大段的css样式，然后在不同地方用@include重复复用它，例如

Java

复制代码

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

然后需要的地方用@include命令

复制代码

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

混合器传参

混合器支持像函数一样进行参数传递，来达到模块定制的功能

Java

复制代码

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

我们在@include的时候可以将实际的参数传进混合器，以生成不同需求的代码

混合器参数的默认值

在混合器定义的时候可以以键值对的形式定义参数的默认值，或者是其他参数的引用

Java

复制代码

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

sass的注释

sass提供了不同于css代码/**/的注释形式，即静默注释//，其内容不会出现在生成的css文件中。

在编译的时候注释不会生成到css代码里