本文共 4704 字，大约阅读时间需要 15 分钟。

sass配置

sass : css预编译框架。(less)

https://www.sass.hk/ 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！ 结构页面中依然要引入css,但css是依靠sass框架编译出来的。 sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

sass环境配置

ruby提供了写命令窗口：start command prompt with ruby 类似于cmd

1. ruby软件的安装-安装ruby目的，安装sass编译环境。
   注意选择√这步，配置环境变量，参考sass官网 https://www.sass.hk/install/
2. 测试ruby安装是否成功。
   启动cmd 输入：ruby -v(注意中间的空格) 一旦显示对应的版本信息，安装成功。
   启动cmd 输入：ruby --version(注意中间的空格) 一旦显示对应的版本信息，安装成功。
3. ruby下面自带的一个包管理工具–gem(安装了ruby就有这个gem)
   包管理工具里面包含了很多和ruby相关的一些包。sass就是其中的一个包。
   gem -v 一旦显示对应的版本信息，安装成功。
4. gem install sass 通过gem安装sass包，但因为国外服务器问题，安装很难成功，采用提供的sass文件安装。
   gem install sass包的路径(将文件拖入)
   sass -v 一旦显示对应的版本信息，安装成功。
   sass环境配置完成。
   安装过程中尽量避免中文路径。

如何编译sass文件

sass语法

• sass是css的预编译框架
• sass支持css的一切语法，即css的语法完全可以在sass中使用。
• sass对于css的属性和属性值不做任何检测。即不提示语法错误依然编译。
• 最大的意义：sass编写维护css。

一，定义变量：必须以$符号开头，后面紧跟变量名，变量名和变量值之间使用冒号分隔。

1. 普通变量：定义css的属性值。
2. 特殊变量：作为属性名或者其他的特殊使用。必须使用#{}调用此变量。

1 变量的作用：

• 公共的值(宽高尺寸，文字大小，颜色值)
• 变量可以参与任意的运算。

普通变量

*{
       margin: 0;    padding: 0;}$box_w:1000px;$box_h:100px;$n:none;$selector:box_1;$color:#abcdef;body{
       width: $box_w;    height: $box_h;    background: $color;}.boss{
       width: 100%;}.box{
       width: $box_w - 500;    height: $box_h + 500;    background: $color+#cccccc;    float: left;}

特殊变量：必须使用#{}调用此变量

.#{
   $selector}{
       width: $box_w - 500;    height: $box_h + 500;    background: red;    float: left;}

2.注释

• //单行注释:编译不显示
• /多行注释:编译后显示，压缩不显示/
• /!强制注释:编译后显示，压缩后也显示/

3.sass选择器的嵌套-方便维护css

• sass不做属性对错的检测。
• 选择器嵌套过程中，生成的选择器层级不超过四层，否则影响性能。
• 在嵌套过程中，如果想使用父元素，通过&符号调用。

.box_2{
       width: 600px;    height: 600px;    background: pink;    margin: 0 auto;    ul{
           width: 600px;        height: 300px;        background: skyblue;        li{
               width: 58px;            height: 30px;            border: 1px solid red;            &:hover{
                   background: #FFF;            }            float: left;            list-style: none;        }    }}

4:sass-mixin:混合

• sass中通过@mixin申明混合(混合宏),可以传递参数，参数名称添加$,多个参数可以用逗号隔开，@mixin声明的混合通过@includel来调用。
• 理解成js里面的函数，封装，重用，可扩展。

$mg:0 auto;@mixin  borderstyle($width:1px,$style:solid,$color:red){
       border:$width $style $color;}.box_3{
       width: 200px;    height: 200px;    background: pink;    @include borderstyle(10px,solid,red);    margin: 0 auto;}@mixin opacityvalue($value:0.5) {
       opacity: $value;    filter: alpha(opacity=$value*100);}.box_4{
       width: 600px;    height: 600px;    margin: 0 auto;    background: red;    @include opacityvalue(0.5)}@mixin ellipse($w:300px,$h:30px){
       width: $w;    height: $h;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}.box_5{
       @include ellipse();    border:1px solid  red;    margin: 0 auto;}

5.sass继承

• @extend来实现继承的。
• 通过继承减少重复的代码，可以让一个选择器继承另一个选择器中的所有样式。
• 继承包括子类：继承选择器下面子元素的样式

.clearfix{
       content: "\20";    clear: both;    display: block;    overflow: hidden;    visibility: hidden;}.clearfix a{
       text-decoration: none;}.box_6{
       @extend .clearfix;}

占位继承–前面的符号为%

占位继承的选择器不会显示在编译后的css中

%zw_qf{
   //占位_清浮    content: "\20";    clear: both;    display: block;    overflow: hidden;    visibility: hidden;}.box_7{
       @extend %zw_qf;}%boxsiz{
       width: 300px;    height: 300px;    background: goldenrod;}.box_8{
       @extend %boxsiz;    margin: $mg;}

6.sass-导入(局部文件)

sass局部文件将我们网页分割成更小的部分，进行单独编写，方便维护，通过@import哪里调用，加载到哪里。

1. 如果不想监听目录下面的sass文件被编译，文件名字前面添加一个_()下划线。
2. 通过@import进行调用，在sass文件下哪里调用哪里编译。
3. 通过@import加载文件，可以可以省略下划线和扩展名
   

@import "_header.scss";@import "footer";//可以省略前面的下滑线和扩展名。

7. if语句

@if 3>2 {
       .box{
           width: 200px;        height: 200px;    };}@else{
       .box{
           width: 300px;        height: 600px;    };}$box_width:100px;@if $box_width>200 {
       .box_1{
           width: 200px;        height: 300px;    }    }@else{
           .box_1{
               width:600px;            height: 600px;            background:red;        }    }

8.@for语句

• @for $var from to
• 这个命令包含两个格式:@for $var from through ，或者@for $var from to ,区别在于 through 与 to 的含义当使用thoungh,条件范围包含与的值，而使用to是 条件范围之包含包含的值不包含的值

@for $num from 1 to 10{
   //$num:1-9 不包含最后一个    .box_9_#{
   $num}{
           width: $num*100px;    }}@for $num from 1 through 10{
   //$num:1-10 包含最后一个    .box_10_#{
   $num}{
           width: $num*100px;    }}

9.@each语句

• @each 指令的格式是$varin<list>,$var 可以是任何变量名，比如$lenght或者 $num,而是一连串的值，也就是值列表。
• @each $var in list { }

@each $var in zhangsan,lisi,wanwu,zhaoliu {
       .#{
   $var}-icon{
           background-image: url('/image/#{$var}.png');    }}

10.函数

@function fn($num:100px){
       @return $num;}.footer{
       width: fn(1000px);    height: fn(600px);    width:ceil(3.1415729px);    width: floor(33.1415729px);}

转载地址：http://bgkgn.baihongyu.com/