Sass 快速入门

╰+哭是因爲堅強的太久メ 2022-05-30 10:18 1037阅读 0赞

## 简介 ##

Sass 是一门强大的CSS扩展语言。

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

### 特色功能 ###

*  完全兼容 CSS3
 *  在 CSS 基础上增加变量、嵌套 、混合、导入等功能
 *  可以进行属性值的运算
 *  提供控制指令等高级功能
 *  自定义输出格式

### 语法格式 ###

Sass 有两种语法格式：

*  首先是 SCSS (Sassy CSS) ，这种格式仅在CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。它以 .scss 作为文件的扩展名。
 *  另一种是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) ，简称 Sass。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。它以 .sass 作为文件的扩展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

# Convert Sass to SCSS
    $ sass-convert style.sass style.scss
    
    # Convert SCSS to Sass
    $ sass-convert style.scss style.sass

## 如何使用 Sass ##

一般来说，使用 Sass 分三步：安装 Sass、编译 Sass 文件成 CSS 文件、在项目中引用 CSS 文件的路径。

### 安装 Sass ###

Sass 基于 Ruby 编写，所以安装 Sass 分两步：先安装 Ruby，再安装 Sass。

### 编译 Sass 文件成 CSS 文件 ###

把 Sass 文件编译成 CSS 文件的方法大概有三种：

*  命令行编译（最基本的方法）
    
        sass style.scss style.css
        #把名为style的Sass文件转换为CSS文件。
        #每次有更新保存之后，都需要执行这个命令
 *  GUI编译工具
 *  其他具有编译功能的插件或工具

## Sass的主要用法 ##

### 变量（Variables） ###

最普遍的用法就是变量，变量以美元符号 $ 开头，赋值方法与 CSS 属性的写法一样。

$width: 5em;

直接使用即调用变量：

#main { width: $width; }

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

### 嵌套 ###

Sass 可以进行选择器的嵌套，表示层级关系。

// sass style
    div {
        h1 {
            color: #333;
        }
        p {
            margin-bottom: 1.4px;
            a {
                color: #999;
            }
        }
    }

编译后：

// css style
    div h1 { color: #333; }
    div p { margin-bottom: 1.4px; }
    div p a { color: #999; }

### 导入 ###

Sass 拓展了 @import 的功能，允许其导入 .scss 或 .sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 会寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

*  文件扩展名是 .css；
 *  文件名以 http:// 开头；
 *  文件名是 url()；
 *  @import 包含 media queries。

如果不在上述情况内。文件的扩展名是 .scss 或 .sass，则导入成功；没有指定扩展名，Sass 将会试着寻找文件名相同，扩展名为 .scss 或 .sass 的文件将其导入。

@import "foo.scss";

或者

@import "foo";

都会导入 foo.scss 文件。

### 混合 ###

混合包括 定义混合 和 引用混合 两个步骤。

Sass 中可用 @mixin 指令定义一些代码片段，且可设定参数，方便日后根据需求引用；引用混合采用 @include 指令 。从此，处理 css3 的前缀兼容变得轻松便捷。

*  定义混合。 @mixin 后跟名称和样式，可添加参数。
 *  引用混合。 @include 后跟混合样式的名称，可传递参数。

//sass style
    //-----------------------------------
    @mixin box-sizing ($sizing) {
        -webkit-box-sizing:$sizing;     
           -moz-box-sizing:$sizing;
                box-sizing:$sizing;
    }
    .box-border{
        border:1px solid #ccc;
        @include box-sizing(border-box);
    }

编译后：

//css style
    //-----------------------------------
    .box-border {
      border: 1px solid #ccc;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

### 继承 ###

继承使用 @extend 指令，实现样式的组合。可使代码更加简洁。

//sass style
    //-----------------------------------
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }
    
    .warning {
      @extend .message;
      border-color: yellow;
    }

编译后：

//css style
    //-----------------------------------
    .message, .success, .error, .warning {
      border: 1px solid #cccccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      border-color: green;
    }
    
    .error {
      border-color: red;
    }
    
    .warning {
      border-color: yellow;
    }

### 运算 ###

Sass 支持简单的加减乘除、取整等运算 (+, -, \*, /, %)，如果必要会在不同单位间转换值。

p { width: 10px + 20px; }

编译后：

p { width: 30px; }

### 颜色 ###

Sass 集成了大量的颜色函数，让变换颜色更加简单。

//sass style
    //-----------------------------------
    $linkColor: #08c;
    a {
        text-decoration:none;
        color:$linkColor;
        &:hover{
          color:darken($linkColor,10%);
        }
    }

编译后：

//css style
    //-----------------------------------
    a {
      text-decoration: none;
      color: #0088cc;
    }
    a:hover {
      color: #006699;
    }

### 控制指令 ###

Sass 中的控制指令主要有 @if、@for、@each 和 @while 。

控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 Compass 等样式库中。