Sass

2017-09-06

Sass 官方文档

一. 概述

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
.SCSS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

二. 下载 Sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
注: mac下自带Ruby无需在安装Ruby
window下安装SASS, 首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。可参考 https://www.sass.hk/install/

  1. IOS: sudo gem install sass
  2. Android: gem install sass

安装好后，新建 index.scss 文件

  1. 在当前目录执行 sass index.scss index.css, 可自动生成 css 文件

  2. SASS提供四个编译风格的选项,一般使用 expanded

    • nested：嵌套缩进的css代码，它是默认值。
    • expanded：没有缩进的、扩展的css代码。
    • compact：简洁格式的css代码。
    • compressed：压缩后的css代码。
      例如: sass --style expanded index.scss index.css

  3. 在线转换工具 https://www.sass.hk/css2sass/

三. Sass 使用方法：

  1. 变量: SASS允许使用变量，所有变量以$开头。
    应用场景： 整个网页要修改颜色时，可以快速完成

    1
    2
    3
    4
    $blue : #1875e7;　
    div {
        color : $blue;
    }

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

    1
    2
    3
    4
    $side : left;
    .rounded {
    　border-#{$side}-radius: 5px;
    }

  2. 计算功能

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

  3. 嵌套

    1
    2
    3
    4
    5
    div {
    　　　　hi {
    　　　　　　color:red;
    　　　　}
    　　}

    在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

    1
    2
    3
    a {
    　　　　&:hover { color: #ffb3ff; }
    　　}

  4. 注释

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

  1. 代码的重用

    (1) 继承
    SASS允许一个选择器，继承另一个选择器。比如，现有class1：

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

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

    1
    2
    3
    4
    .class2 {
        @extend .class1;
    　　font-size:120%;
    }
    (2) mixin

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

    1
    2
    3
    4
    @mixin left {
    　　　　float: left;
    　　　　margin-left: 10px;
    　　}

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

    1
    2
    3
    div {
    　　　　@include left;
    　　}
    (3) 插入文件

    @import命令，用来插入外部文件 @import "path/filename.scss";

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

参考文档

四. Sass 重要实例：

rem 移动端布局实例
414px屏幕下开发，1rem = 100px;

1
2
3
4
5
6
7
8
9
10
11
@mixin userem($size){
	$shebei-list:320px,360px,375px,414px,384px,412px,640px,768px;
	html{
		@each $shebei in $shebei-list{
			@media screen and (min-width:$shebei){
				font-size:100px * ($shebei/$size);
			}
		}
	}
}
@include userem(414px)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@media screen and (min-width: 320px) {
  html {
    font-size: 77.2946859903px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 86.9565217391px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 90.5797101449px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 92.7536231884px;
  }
}
@media screen and (min-width: 412px) {
  html {
    font-size: 99.5169082126px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 154.5893719807px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 185.5072463768px;
  }
}
CATALOG