Sass入门篇 —— 学习笔记（一）

一、什么是 Sass ？

Sass 是一门高于 css 的元语言（什么是元语言），它能用来清晰地、结构化地描述文件样式，有着比普通 css 更加强大的功能。

二、Sass 和 Scss 的区别

相同点：

1. sass 和 scss 都是同一种元语言，只不过我们平时都称之为 Sass。

不同点：

1. 文件扩展名不同。Sass 是以".sass"后缀作为扩展名；而 Scss 是以".scss"后缀作为扩展名。
2. 语法书写格式不同。Sass 是以严格的缩进式语法规则来写，不带大括号"{}"和分号";"；而 Scss 和我们的 css 语法书写格式非常类似，带大括号"{}"和分号";"。

三、Sass 安装

• windows 平台
  windows 平台下安装 Sass 需要检查该平台是否安装了 Ruby（什么是 Ruby ），怎么检查自己的平台有没有安装 Ruby？在命令行终端输入以下命令即可。

ruby -v

检查是否安装 Ruby
如果出现上面信息就表明你的平台已经安装 Ruby 了，如果没有出现以上信息可以去 Ruby的官网下载对应的 Ruby 版本。
安装过程中选择第二个选项，将 Ruby 可执行文件添加到 PATH 系统环境中。
检测 Sass 是否安装成功

如果在你的命令行终端看到以上类似信息就表示你的平台 Sass 安装成功了。

更新 Sass

更新命令：

gem update sass

更新 Sass

同样，看到以上信息，表示 Sass 已经更新到最新版。

四、语法格式

我们以下面这段 css 代码作为例子，比较 Sass 语法格式和 Scss 语法格式的不同

body {
    background-color: #CCCCCC;
    font-family: sans-serif;
}

• Sass 语法格式

$background-color: #CCCCCC
$font-family: sans-serif

body
    background-color: #CCCCCC
    font-family: sans-serif

注：这种语法格式对于前端人员不太容易接受，容易出错。

• Scss 语法格式

$background-color: #CCCCCC
$font-family: sans-serif

body {
    background-color: #CCCCCC;
    font-family: sans-serif;
}

注：Scss 是 Sass 的新语法格式，这种语法格式对于前端人员比较容易接受。

五、Sass 编译

Sass 编译有以下几种编译方法：

• 命令编译
  定义：命令编译是指使用命令行终端，通过输入 Sass 指令来编译 Sass。这种方式最简单也最直接。
  单文件编译：

  sass <要编译的 Sass 文件路径>/style.sass:<要输入的 css 文件路径>/style.css

  多文件编译：（此操作可以对整个项目所有 Sass 文件编译成 css 文件）

  sass sass/:css/

  缺点：
  在实际编译过程中，上面的命令只能一次性编译。

  解决方法：
  开启 "watch" 功能，这样只要代码进行修改，都能自动监测到代码的变化，并且直接编译出来。

  sass --watch <要编译的 Sass 文件路径>/style.sass:<要输出的 CSS 文件路径 >/style.css

  例如：

  sass --watch
  sass/test.scss:css/test.css

• GUI工具编译（ 如：编译软件 koala、编译软件 codekit ）

• 自动化编译（ 如：Grunt 前端自动化工作流 grunt-sass、Gulp 前端自动化工作流 gulp-ruby-sass 等。）

六、4种不同 css 风格的输出方式

sass 代码：

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li {  display: inline-block;  }
}

1. 嵌套输出方式 nested
   编译时带上参数 "--style nested"：

   sass --watch test.scss:test.css --style nested

   编译出来的 css 样式风格：

   nav ul {
       margin: 0;
       padding: 0;
       list-style: none;}
   nav li {
       display: inline-block;  }
   

2. 展开输出方式 expanded
   编译时带上参数 "--style expanded"：

   sass --watch test.scss:test.css --style expanded

   编译出来的 css 样式风格（大括号另起一行）：

   nav ul {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   nav li {
       display: inline-block;  
   }
   

3. 紧凑输出方式 compact
   编译时带上参数 "--style compact"：

   sass --watch test.scss:test.css --style compact

   编译出来的 css 样式风格（单行风格）：

   nav ul {  margin: 0; padding: 0; list-style: none;  }
   nav li {  display: inline-block;  }
   

4. 压缩输出方式 compressed
   编译时带上参数 "--style compressed"：

   sass --watch test.scss:test.css --style compressed

   编译出来的 css 样式风格（去掉标准的 sass 和 css 注释和空格）：

   nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}
   

---

只有强者才懂得斗争；弱者甚至失败都不够资格，而是生来就是被征服的。
希望此文章能够帮助你。

欢迎关注我的博客网站。
咱们，下一篇见！