使用sass_sass入门，就这一篇就够了

Sass是对 CSS 的扩展&＃xff0c;让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能&＃xff0c;并且完全兼容 CSS 语法。Sass 有助于保持大型样式表结构良好&＃xff0c;同时也让你能够快速开始小型项目&＃xff0c;特别是在搭配Compass 样式库一同使用时。

• 完全兼容 CSS3
• 在 CSS 语言基础上添加了扩展功能&＃xff0c;比如变量、嵌套 (nesting)、混合 (mixin)
• 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
• 函数库控制指令之类的高级功能
• 良好的格式&＃xff0c;可对输出格式进行定制
• 支持 Firebug

第一种被称为 SCSS (Sassy CSS)&＃xff0c;是一个 CSS3 语法的扩充版本。这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法(或者就称为 "Sass")&＃xff0c;提供了一种更简洁的 CSS 书写方式。它不使用花括号&＃xff0c;而是通过缩排的方式来表达选择符的嵌套层级&＃xff0c;而且也不使用分号&＃xff0c;而是用换行符来分隔属性。很多人认为这种格式比 SCSS 更容易阅读&＃xff0c;书写也更快速。缩排语法具有 Sass 的所有特色功能&＃xff0c;虽然有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。

sass中可以定义变量&＃xff0c;方便统一修改和维护。

//sass style

//-----------------------------------

body {

font-family: $fontStack;

color: $primaryColor;

}

//css style

//-----------------------------------

body {

font-family: Helvetica, sans-serif;

color: #333;

}

sass可以进行选择器的嵌套&＃xff0c;表示层级关系&＃xff0c;看起来很优雅整齐。

//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文件&＃xff0c;最后编译为一个css文件&＃xff0c;优于纯css的&＃64;import

//sass style

//-----------------------------------

// _reset.scss

html,

body,

ul,

ol {

margin: 0;

padding: 0;

}

//sass style

//-----------------------------------

// base.scss

&＃64;import &＃39;reset&＃39;;

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;

}

sass中可用mixin定义一些代码片段&＃xff0c;且可传参数&＃xff0c;方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style

//-----------------------------------

&＃64;mixin box-sizing ($sizing) {

-webkit-box-sizing:$sizing;

-moz-box-sizing:$sizing;

box-sizing:$sizing;

}

.box-border{

border:1px solid #ccc;

&＃64;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可通过&＃64;extend来实现代码组合声明&＃xff0c;使代码更加优越简洁。

//sass style

//-----------------------------------

$fontStack: Helvetica, sans-serif;

$primaryColor: #333;

//sass style

//-----------------------------------

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

&＃64;extend .message;

border-color: green;

}

.error {

&＃64;extend .message;

border-color: red;

}

.warning {

&＃64;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&＃61;"main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role&＃61;"complimentary"] {

float: right;

width: 300px / 960px * 100%;

}

//css style

//-----------------------------------

.container {

width: 100%;

}

article[role&＃61;"main"] {

float: left;

width: 62.5%;

}

aside[role&＃61;"complimentary"] {

float: right;

width: 31.25%;

}

sass中集成了大量的颜色函数&＃xff0c;让变换颜色更加简单。

//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 style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件(在线转换工具css2sass)

sass-convert style.css style.sass

sass-convert style.css style.scss

无TOBE&＃xff0c;不SASS&＃xff01;&＃xff01;&＃xff01;

Tobe是一个写给面向熟悉sass人员使用的框架&＃xff0c;以sassCore为核心&＃xff0c;所有的组件都单独开发&＃xff0c;根据实际需求来调用&＃xff0c;避免了臃肿的杂乱代码。由于有着sass的优良基因&＃xff0c;tobe的代码更加灵活可控&＃xff0c;如果你是一个有着代码洁癖的人&＃xff0c;那么tobe的精彩一定不可错过。

tobe使用方法&＃xff1a;http://tobe.w3cplus.com/example/begin/begin.html

经典前端面试题每日更新&＃xff0c;欢迎参与讨论&＃xff0c;地址&＃xff1a;https://github.com/daily-interview/fe-interview。

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目&＃xff0c;请关注微信公众号——全栈弄潮儿。