Sass用法指南

文章目录

1. 1. 1. 基本介绍
2. 2. 2. 基本用法
   1. 2.0.1. 2.1 变量
3. 2.1. 2.2 计算功能
4. 2.2. 2.3 嵌套
5. 2.3. 2.4 注释

3. 3 代码的重用

1. 3.1. 3.1 继承
2. 3.2. 3.2 Mixin
3. 3.3. 3.3 颜色函数
4. 3.4. 3.4 插入文件

4. 4. 高级语法

1. 4.1. 4.1 条件语句
2. 4.2. 4.2 循环语句
3. 4.3. 4.3 自定义函数

标签（空格分隔）： Sass

---

1. 基本介绍

在显示屏上显示.scss文件转化的css代码或保存为css文件

sass test.scss
sass test.scss test.css

Sass提供四个编译风格的选项

* nested: 嵌套缩进的css代码，它是默认值。
* expanded: 没有缩进的、扩展的css代码。
* compact: 简洁格式的css代码。
* compressed: 压缩后的css代码。

生产环境中，一般使用最后一个选项。

sass --style compressed test.sass test.css

也可以让Sass监听某个文件或目录，自动编译。

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

Sass的官方提供了一个在线转换器。

2. 基本用法

2.1 变量

变量以$开头。

$blue: #1875e7;

div {
  color: $blue;
}

如果变量需要在字符串中，就必须写在#{}中

$side: left;

.rounded {
  border-#{$side}-radius: 5px;
}

2.2 计算功能

Sass允许在代码中使用算数

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

2.3 嵌套

Sass允许选择其嵌套

//css
div h1 {
  color: red;
}
//scss
div {
  h1 {
    color: red;
  }
}

属性也可以嵌套，比如border-color属性

p {
  border: {
    color: red;
  }
}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用副元素。比如a:hover伪类，可以写成：

a {
  &:hover {color: #ffb3ff}
}

2.4 注释

Sass共有两种注释风格。
标准的CSS注释 / comment /，会保留到编译后的文件。
单行注释 // comment，只保留在Sass源文件中，编译后被省略。
在/* 后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
  重要注释
*/

3 代码的重用

3.1 继承

Sass允许一个选择器继承另一个选择器。比如，现有class1:

.class1 {
  border: 1px solid #ddd;
}

class2要继承class1，就要使用@extend命令：

.class2 {
    @extend .class1;
    font-size: 120%;
}

注意：被继承者若在嵌套

3.2 Mixin

Mixin有点像C语言的宏，是可以重用的代码块
使用@mixin 命令，定义一个代码块。

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include命令，调用这个mixin。

div {
  @include left;
}

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

使用的时候，根据需要加入参数：

div {
  @include left(20px);
}

下面是一个mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-#{$vert}-#{$horz}-radius: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候，可以像下面这样调用：

#navbar li { @include rounded(top, left);}
#footer { @include rounded(top, left, 5px);}

3.3 颜色函数

Sass提供了一些内置的颜色函数，以生成系列颜色

lighten(#cc3, 10%) //#d6d65c
darken(#cc3, 10%) //#a3a329
grayscale(#cc3) //#808080
complement(#cc3) //#33c

3.4 插入文件

@import 命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

@import "foo.css";

4. 高级语法

4.1 条件语句

@if 可以用来判断：

p {
  @if 1 + 1 == 2 {border: 1px solid;}
  @if 5 < 3 {border: 2px dotted;}
}

配套的还有@else命令：

@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

4.2 循环语句

Sass支持for循环：

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blud;
  }
}

也支持while循环：

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

each命令，作用与for类似

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

4.3 自定义函数

Sass允许用户编写自己的函数

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}