简介

SASS 是一款强化 CSS 的辅助工具，它在 CSS 语法的根底上减少了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级性能，这些拓展令 CSS 更加弱小与优雅。应用 Sass 以及 Sass 的款式库（如 [Compass](http://compass-style.org/)）有助于更好地组织治理款式文件，以及更高效地开发我的项目。具体可参考中武官网：https://www.sass.hk/

SASS的装置

先装置Ruby（下载网址：http://www.ruby-lang.org/zh_cn/downloads/）装置实现后在cmd输出命令：gem install sass即可装置胜利

SASS的四种编译格调

nested：嵌套缩进的css代码，其为默认值expanded：没有缩进的，扩大的css代码compact：简洁格局的css代码compressed：压缩后的css代码

SASS的一些终端命令

查看sass文件的css内容，在cmd中输出命令：sass 文件名.scss把sass文件转为css文件,在cmd中输出命令：sass 文件名.scss 转换后的文件名.css               （若想以某种格调压缩）：sass --style 格调名称 xxx.scss xxx.css监听文件，一旦源文件有变动，会主动生成编译后的版本。在cmd中输出命令：sass --watch xxx.scss:xxx.css更多命令的用法可通过输出命令sass --help来获取帮忙。也可应用nodejs下的gulp模块来编译sass

SASS的应用

sass的后缀文件名为.scss定义变量：$变量名：$red:red;若变量须要嵌入在字符串中（组合模式），则必须写在#{}中：$red:red; .border{border:1px solid #{$red}}计算性能：能够是两个数值运算，也能够是变量间的运算（两个变量不能相加）.border{margin:20px+30px; padding:#{$border*$border}px;}复用性能（继承）：一个选择器继承另一个选择器第一种：@extend xxx .a1{color:blue;}.a2{@extend .a1; font-size:$num+px}第二种：定义一个mixin块，是能够重用的代码块        @mixin b($b,$f){border:$b+px solid red;font-size:$f+px;}        .a3{@include b(2,13);}        插入文件：应用import命令来插入内部文件@import 'xxx.scss'; （若插入是scss文件则把编译后的代码文件插入其中。若插入是css文件，则相当于@import url(xxx.css)命令）条件语句：@if / @if-else / @if-else if.a4{    @if $num==5{color:blue;}    @else if $num==4{color:red;} } 循环语句：@for / @while / @each@for:@for $i from 1 to 10{    .a5_img#{$i}{        background-image:url('img#{$i}.png');    }}@while:$j:9;@while $j>0{    .a6_img${$j}{        background-image:url('img#{$i}.png');    }    $j:$j-1;}@each:@each $item in 1,2,3,4,5{    .a6_img#{$item}{        background-image:url('img#{$item}.png');    }}函数：@function@function a7($r){    @return $r*2; }.a8{    border:#{a7(2)}px solid #000;}选择器（标签）嵌套：div{    h1{        color:red;    }}也能够用'&'代表嵌套规定外层的父选择器a {    &:hover { text-decoration: underline; }    body.firefox & { font-weight: normal; }}属性嵌套：（便于管理同一类管制的属性）a{    font: {        family: fantasy;        size: 30em;        weight: bold;    }}插值语句 #{}:$name: foo;$attr: border;p.#{$name} {    #{$attr}-color: blue;}