Sass 快速入门

作者：TG 日期： 2017-04-16 字数： 19991 阅读： 7099

由于工作需要，最近在使用Ionic3 + Angular4，发现使用CLI创建的新项目里对于CSS样式都是使用Sass，所以学习了一下Sass。这里主要记录了Sass的主要用法，省得每次使用都去翻官网。

Sass是什么？

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

简易安装

Sass是Ruby语言写的，要安装Sass，必须先安装Ruby，当然,并不要求你会Ruby。如果你已经安装好了Ruby，接下来就可以安装Sass：

gem install sass

注：sass文件的后缀名是.scss或.sass，博主使用.scss。当然，除了Sass的语法，代码里面也可以直接使用CSS语法。确认是否安装：

sass -v

如果安装成功，会打印出版本信息：

Sass 3.4.23

编译

对于scss文件，我们最终还是要编译成css文件才能使用。编译也很简单，只需要在终端输入下列命令：

sass input.scss output.css

input.scss是你的Sass文件，output.css是你需要输出的文件。

我们还可以实现实时自动编译:

sass --watch input.scss:output.css

这样，每次修改并保存时都会自动编译输出。此外，你也可以监视整个文件夹的变化:

sass --watch app/sass:public/stylesheets

输出风格

sass给我们提供了四种输出风格：

nested: 嵌套缩进的css代码，它是默认值。
expanded: 标准格式的代码
compact: 行格式的代码
compressed: 压缩后的代码，一般用于生产环境

使用方法:

sass --style compressed input.scss output.css

四种输出风格对比:

div {  
  background: red;  
  p { color: blue; }  
}   

/* nested */  
div {   
  background: red; }   
div p {   
  color: blue; }   

/* expanded */  
div {   
  background: red;  
}  
div p {   
  color: blue;  
}   

/* compact */  
div { background: red; }  
div p { color: blue; }   

/* compressed */  
div{background:red}div p{color:blue}

更多帮助命令：

sass --help

基础语法

1、变量

Sass使用$美元符号来声明变量：

$blue: blue;

直接使用:

div { color: $blue; }

在Sass中，变量是有作用域的，类似ES6中的let，sass变量支持块级作用域(花括号{}包裹区域)，也就是有全局变量和局部变量之分：

$blue: blue; // 全局变量  
div {   
  $blue: red;  // 局部变量  
  color: $blue;  // red  
}

输出为：

div {   
  color: red; }

当然，也可以使用!global将局部变量转换为全局变量：

div {   
  $red: red !global;  
  color: red;  
}  
a {  
  color: $red;  
}

输出为：

div {   
  color: red; }  
a {   
  color: red; }

注意：如果上面的red后面不加上!global，Sass会报错，你可以在终端或输出文件比如output.css里看到错误。此外,变量也可以拼接在CSS属性里,不过要借助插值语句(#{}):

$theme: ".dark";   

#{$theme} div {  
  color: black  
}

输出为：

.dark div { color: black; }

也可以这样:

$side: top;   
div {
  border-#{$side}-color: red;
}

输出为：

div {border-top-color: red; }

注：如果传入的是字符串，插值语句输出的最终都是不带引号的字符串

2、嵌套语法

Sass允许CSS样式嵌套:

div {  
  color: black;  
  a { color: red;}  
}

输出为:

div { color: black; }  
div a { color: red; }

多层嵌套:

div {  
  p, span{  
    color:red;  
    a {font-size: 15px;}  
  }  
}

输出为:

div p, div span { color: red; }  
div p a, div span a { font-size: 15px; }

CSS中,有些属性拥有相同的命名空间,比如font-size,font-weight等,对于这些属性,我们也可以使用属性嵌套:

div {  
  font: {  
    size: 10px;  
    weight: bold;  
  }  
}

输出为：

div { font-size: 10px; font-weight: bold; }

注意font后面的冒号(:)。此外，还可以这样:

div {  
  font: 15px {  
    size: 10px;  
    weight: bold;  
  }  
}

输出为:

div { font: 15px; font-size: 10px; font-weight: bold; }

父元素&

在Sass中，&表示父元素。

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

输出为:

a:hover { color: red; }

当有多层嵌套样式时，&表示它所有祖先元素的拼接:

div {  
  a {  
    &:hover { color: red; }  
  }
}

输出为:

div a:hover { color: red; }

此外，&还可以作为选择器的一部分:

.main {   
  &-content { color: red; }  
}

输出为：

.main-content { color: red; }

注释

Sass提供了三种注释方式:

多行注释: /* */
单行注释 //
!多行注释: /*! */,通常用于添加版权信息

三者的区别:

单行注释不会输出到CSS文件,多行注释会
单行注释和多行注释不会输出到压缩CSS文件中,而!多行注释会

此外,前面提到的插值语句(#{})也可以用到多行注释中

$version: "1.0.0";  
/* 当前版本: #{$version} */

输出为：

/* 当前版本: 1.0.0 */

运算

Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %) 关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型

div {   
  font-size: 10px + 10px;   
  height: 40px - 5px;   
  width: 100 % 3px;
}

输出为：

div { font-size: 20px; height: 35px; width: 1px; }

注意：在进行加减乘除时，建议使用统一单位，否则就需记住哪些单位是可以转换，哪些是不可以转换的，稍不注意，Sass就会报错。

特殊的除法

由于原生CSS中的斜杠(/)是有用途的（比如定义圆角的不同半径时，border-radius: 10px/20px，表示水平半径为10px，垂直半径为20px），所以在Sass中使用时要注意,只有下面三种情况才会被视为除法运算：

如果值被圆括号包裹： (20px / 10px)
如果值是算数表达式的一部分： (10px + 20px / 10px)
如果值的一部分是变量或函数的返回值：$width / 10

如果你想显式的让斜杠(/)不做除法运算,只需使用插值语句(#{}):

div { #{$font-size}/#{$line-height}; }

如JavaScript中的+号一样，Sass中的+号也可以连接字符串：

div { cursor: e + -resize; }

输出为：

div { cursor: e-resize; }

控制语句

1、@if

@if语句类似JavaScript中的if语句,当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

div {  
  @if 3 > 2 { color: red; }  
  @if null { color: black; }
}

输出为：

div { color: red; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明：

div {  
@if 1 > 2 {   
  color: red;  
} @else if 3 > 2 {   
  color: blue;  
} @else {   
  color: black;  
}  
}

输出为：

div { color: blue; }

注: 控制语句也可以在最外层使用.

循环语句

（1）@for

Sass的for语句与JavaScript的for语句的作用类似，但语法有所不同。

from...through..

@for $var from start through end {}

例子：

@for $i from 1 through 3 {   
  .large-#{$i} { font-size: 10px * $i; }  
}

输出：

.large-1 { font-size: 10px; }   
.large-2 { font-size: 20px; }
.large-3 { font-size: 30px; }

from...to...

@for $var from start to end {}

例子：

@for $i from 1 to 3 {   
  .large-#{$i} { font-size: 10px * $i; }  
}

输出为：

.large-1 { font-size: 10px; }   
.large-2 { font-size: 20px; }

如果你留意了上面的例子，应该可以发现through和to的区别: 当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。注意:start和end必须是整数

@each

Sass中的数组

在Sass中,数组便是通过空格或者逗号分隔的一系列的值,比如1 2 3 4或1,2,3,4.

还可以由多维数组,比如1 2, 3 4表示包含1 2与3 4两个数组的数组,还可以这样(1 2) (3 4)

@each语句的作用与@for类似,但使用语法不同:

@each $var in <list>

<list>是一系列以逗号分隔的值列表(数组):

@each $icon in user, nav, person {   
  .#{$icon}-icon {   
    background-image: url('/images/#{$icon}.png');   
  }  
}

输出为：

.user-icon { background-image: url("/images/user.png"); }   
.nav-icon { background-image: url("/images/nav.png"); }   
.person-icon { background-image: url("/images/person.png"); }

对于多维数组:

@each $var1, $var2 in ($value,$value), ($value,$value)

例子：

@each $font, $size in (large-1, 10px), (large-2, 20px) {   
  .#{$font} {   
    font-size: $size;   
  }  
}

输出为：

.large-1 { font-size: 10px; }   
.large-2 { font-size: 20px; }

对于元素是键值对形式的数组:

@each $key, $value in (key: value, key: value)

例子：

@each $selector, $size in (div: 10px, p: 20px) {   
  #{$selector} {   
    font-size: $size;   
  }  
}

输出为：

div { font-size: 10px; }   
p { font-size: 20px; }

@while

@while 指令重复输出格式直到表达式返回结果为 false:

$i: 6;  
@while $i > 0 {   
  .item-#{$i} { width: 2em * $i; }   
  $i: $i - 2;  
}

代码重用(Mixin和extend)

（1）Mixin

Mixin使用@mixin语句来定义需要重复使用的代码，比如说清除浮动：

@mixin clearfix {   
  &:after {  
    content: "";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
  }  
}

使用@include语句来使用Mixin定义的代码:

div { @include clearfix; }

输出为：

div:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

@mixin语句还可以带参数和参数默认值：

@mixin text-font($size, $weight, $color: black) {   
  font: {  
    size: $size;  
    weight: $weight;  
  }  
  color: $color;  
}   
p { @include text-font(10px, bold); }

输出为：

p { font-size: 10px; font-weight: bold; color: black; }

多余参数

多余参数也可以称为不确定参数。有些CSS样式(比如box-shadow，text-shadow等)可以有多个以逗号分隔的值列表，这样在定义Mixin时我们就无法确定传入几个参数，这时就需要借助多余参数的写法($name...):

@mixin box-shadow($shadows...) {   
  box-shadow: $shadows;  
}   

div {  
  @include box-shadow(0 0 3px black, 0 0 5px red);  
}

输出为：

div { box-shadow: 0 0 3px black, 0 0 5px red; }

此外，多余参数也可以用在传参时:

@mixin colors($text, $background, $border) {   
  color: $text;   
  background-color: $background;   
  border-color: $border;  
}  
$values: #ff0000, #00ff00, #0000ff;  
.primary {   
  @include colors($values...);  
}

输出为：

.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }

不定序传参

不定序传参可以让你忽略形参的顺序，不必记住它们：

@mixin blue-theme($background, $color) {   
  background: $background;   
  color: $color;  
}

一般我们是如下调用:

div { @include blue-theme(red, white); }

但我们也可以忽略传参的顺序，传参时以键值对的形式传参：

div { @include blue-theme($color: white, $background: red); }

两种方式都会输出:

div { background: red; color: white; }

注意点:

@mixin 可以用 = 表示，而 @include 可以用 + 表示
@include不仅可以用在块内，也可以直接用在最外层

（2）extend

@extend语句用来实现继承:

.large {   
  font-size: 20px;  
  font-weight: bold;  
}   
.main {  
  @extend .large;  
  background: red;  
}

输出为：

.large, .main { font-size: 20px; font-weight: bold; }   
.main { background: red; }

@extend实现的继承是继承所有：

.large {   
  font-size: 20px;  
  font-weight: bold;  
}   
.large.blue {   
  color: blue;  
}   
.main {  
  @extend .large;  
  background: red;  
}

输出为：

.large, .main { font-size: 20px; font-weight: bold; }   
.large.blue, .blue.main { color: blue; }   
.main { background: red; }

函数

（1）内置函数

Sass提供了很多内置函数：函数列表

（2）自定义函数

Sass支持自定义函数,使用@function语句来声明函数:

@function large($n) {   
  @return $n * 2;  
}   
div { font-size: large(10px); }

输出为：

div { font-size: 20px; }

注：自定义函数也支持不定序传参和多余参数.

导入外部文件

类似CSS的import，Sass也支持import：

@import "color.scss";

如有任何疑问或建议，欢迎在下方的评论区留言！

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

Sass 快速入门

关注”全栈技术杂货铺“

目录