CSS预处理器 --- sass && scss

css预处理器

介绍

在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。

预处理主要是为了解决 CSS 的维护问题

现在的CSS预处理器有许多种,如:

• sass (scss)
• less
• Stylus
• Turbine
• Switch CSS
• DT CSS

如此多的css预处理器,我们应该怎样选择使用?
目前为止, 众多的 CSS 预处理器中优秀的当属 Sass、Less、Stylus 了
本文就先简单的介绍 Sass 的使用，为什么会使用 Sass 呢?
Sass 在 CSS 的基础上增加了 变量、嵌套、混合、导入等 强大功能，使用Sass可以更好的组织管理项目样式文件，高效开发项目

安装

Sass的安装
Sass需要依赖Ruby环境，如果没有Ruby环境，可以去 Ruby官网 下载
安装时，请注意勾选 Add Ruby executables to your PATH 添加环境变量
注: Mac OS 自带Ruby环境,不需要安装

安装步骤

1. gem install sass (安装)
2. sass -v (查看版本)
3. gem update sass (更新Sass)
4. gem uninstall sass (卸载Sass)

如使用Mac OS需要在安装命令前加上 sodu ，才能正常安装

Sass的使用

首先创建文件夹

• md SassFolder
  进入文件夹
• cd SassFolder
  创建 第一个Scss文件
• type nul>index.scss
  打开编译器 (我使用的是VS Code, 已添加环境变量)
• code .

// 定义变量
$blue: blue;
div{
    background: $blue
}

在cmd中使用 sass index.scss生成缓存文件

再使用 sass index.scss>index.css生成css文件

生成压缩后的css代码

sass --style compressed index.scss>index.css

监视单个 Sass 文件，每次修改并保存时自动编译

sass --watch index.scss:index.css

监视整个文件夹：

sass --watch app/sass:public/stylesheets

.sass 文件和 .scss文件区别

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

.sass

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

.scss

$font-stark Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

两个文件编译出来的内容都是相同的，只是语法上有区别

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

scss 文件中可以使用 css 语法和 sass 语法.。普通的 css 文件，后缀修改为 scss 也可以正常使用

---

注: 这是本人的第一篇博客，如内容有问题，请大家及时提出，我会尽快修改的