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代码里