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

gem install sass

检测 Sass 是否安装成功及如何更新 Sass

检测命令：

sass -v

检测 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;}
   

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

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