Sass 基础知识

前言

  • Sass 是一个 CSS 预处理器。是 CSS 的扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。完全兼容所有版本的 CSS。

1、Sass



  • Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

  • CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且代码也不方便维护。Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

  • Sass 生成良好格式化的 CSS 代码,易于组织和维护。

  • Sass 文件后缀为 .scss。

  • 相关网站:

2、安装

  • 浏览器并不支持 Sass 代码。因此,需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

2.1 NPM 安装

  • 可以使用 npm(NPM 使用介绍)来安装 Sass。

    1
    $ npm install -g sass
  • 安装完成后可以查看版本:

    1
    2
    3
    $ sass --version

    1.32.13 compiled with dart2js 2.12.4
  • 注:国内 npm 建议使用淘宝镜像来安装,参考:NPM 国内慢的问题解决

2.2 Windows 上安装

  • 可以使用 Windows 的包管理器 Chocolatey 来安装:

    1
    $ choco install sass

2.3 Mac OS X (Homebrew)安装

  • Mac OS 可以使用 Homebrew 包管理器来安装:

    1
    $ brew install sass/sass/sass

3、使用

  • 创建一个 .scss 文件,文件代码如下。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 定义变量与值 */
    $bgcolor: lightblue;
    $textcolor: darkblue;
    $fontsize: 18px;

    /* 使用变量 */
    body {
    background-color: $bgcolor;
    color: $textcolor;
    font-size: $fontsize;
    }
  • 在命令行输入下面命令,即将 .scss 文件转化的 css 代码。

    1
    $ sass test.scss
    1
    2
    3
    4
    5
    6
    7
    8
    @charset "UTF-8";
    /* 定义变量与值 */
    /* 使用变量 */
    body {
    background-color: lightblue;
    color: darkblue;
    font-size: 18px;
    }
  • 可以在后面再跟一个 .css 文件名,将代码保存到文件中。这时会在当前目录下生存 test.css 文件,代码如下。

    1
    $ sass test.scss test.css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @charset "UTF-8";
    /* 定义变量与值 */
    /* 使用变量 */
    body {
    background-color: lightblue;
    color: darkblue;
    font-size: 18px;
    }

    /*# sourceMappingURL=test.css.map */
文章目录
  1. 1. 前言
  2. 2. 1、Sass
  3. 3. 2、安装
    1. 3.1. 2.1 NPM 安装
    2. 3.2. 2.2 Windows 上安装
    3. 3.3. 2.3 Mac OS X (Homebrew)安装
  4. 4. 3、使用
隐藏目录