scss：最常见的css预处理器

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass。

他们都是用Ruby开发 Css 预处理器，boostrap4已经将less换成了scss。

专注前端与算法的系列干货分享，转载请声明原创：
「微信公众号：心谭博客」| xxoo521.com | GitHub

SCSS和Sass

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass。他们都是用Ruby开发 Css 预处理器，boostrap4已经将less换成了sass。

不同之处：

• 文件拓展名：分别是sass和scss
• 缩进：sass严格缩进（类似 python 和 ruby），scss是 css 的缩进样式
• 是否兼容 css 语法：显然，由于缩进的不同，scss是兼容原生的 css 写法。

总的来说，scss是sass升级版，兼容 css 语法，并且有着自己的独立语法。

环境配置

1. 安装 ruby：windows 注意添加注册表路径
2. 安装 sass：利用 ruby 的包管理器gem安装，命令行运行:gem install sass
3. 升级和删除 sass：gem update/uninstall sass

如果国外源过慢？

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l #查看是不是淘宝源

编译

编译指的是：将 scss 文件编译为 css 文件的过程。

源文件编译

单文件编译

# 格式：sass 待编译的Sass文件名:编译后CSS文件名
scss scss.scss:css.css

实时自动编译

使用--watch参数即可，scss 会在源文件改动时候，自动重新编译。

scss --watch scss.scss:css.css # 方便

输出文件风格

命令行编译时候，使用--style参数。

一段 scss 代码：

body {
    h1 {
        color: red;
    }
}

默认：嵌套输出方式 nested

body h1 {
    color: red;
}

展开输出方式 expanded

body h1 {
    color: red;
}

紧凑输出方式 compact

body h1 {
    color: red;
}

压缩输出方式 compressed

body h1 {
    color: red;
}

4. 注意

最新的 scss 开启了sourcemap功能，--sourcemap参数默认添加。

扫码关注「心谭博客」, 专注前端与算法

目前已有前端面试、剑指Offer·JS、动画设计、Webpack等系列专题