鲁达 什么是sass
Sass是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能，并且完全兼容 CSS 语法。Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配Compass 样式库一同使用时。
它有什么特色
- 完全兼容 CSS3
- 在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
- 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
- 函数库控制指令之类的高级功能
- 良好的格式，可对输出格式进行定制
- 支持 Firebug
两种扩展名
第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。这种语种语法的样式表文件需要以 .scss 扩展名。
第二种比较老的语法成为缩排语法（或者就称为 "Sass"），提供了一种更简洁的 CSS 书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。
变量
sass中可以定义变量，方便统一修改和维护。
//sass style
//-----------------------------------
body {
font-family: $fontStack;
color: $primaryColor;
}
//css style
//-----------------------------------
body {
font-family: Helvetica, sans-serif;
color: #333;
}
嵌套
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
//sass style
//-----------------------------------
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//css style
//-----------------------------------
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
导入
sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import
//sass style
//-----------------------------------
// _re
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
//sass style
//-----------------------------------
// ba
@import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}
//css style
//-----------------------------------
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
font-size: 100% Helvetica, sans-serif;
}
mixin
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
扩展/继承
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
//sass style
//-----------------------------------
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
//sass style
//-----------------------------------
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
//css style
//-----------------------------------
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
运算
sass可进行简单的加减乘除运算等
//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style
//-----------------------------------
$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
//css style
//-----------------------------------
a {
text-decoration: none;
color: #0088cc;
}
a:hover {
color: #006699;
}
命令行编译
单文件转换命令
sass
单文件监听命令
sass --watch :
文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
css文件转成sass/scss文件（在线转换工具css2sass）
sass-convert
sass-convert
sass框架tobe
无TOBE，不SASS！！！
Tobe是一个写给面向熟悉sass人员使用的框架，以sassCore为核心，所有的组件都单独开发，根据实际需求来调用，避免了臃肿的杂乱代码。由于有着sass的优良基因，tobe的代码更加灵活可控，如果你是一个有着代码洁癖的人，那么tobe的精彩一定不可错过。
tobe使用方法：
经典前端面试题每日更新，欢迎参与讨论，地址：。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。