Sass的知识点梳理

变量

变量的声明

• 使用$来声明，例如

  $width:200px;div{  width:$width;}

  编译后为 ：

  div{    width:200px;}

变量的作用域

这里和 js 差不多，但是没有变量提升的概念，必须先定义，再使用。
如果变量名相同，后面定义的会覆盖前面的，但是含有default的优先级最低，就算同名的default的变量放在下面，也不会覆盖前面定义的同名变量。
示例：

$width : 200px;$bg-color:red; // 此处优先级比有default的高。$bg-color:#f40 !default; // 定义一个默认值。div{    background-color:$bg-color; // 编译后是red而不是#f40    $width:300px;    span{        width:$width; // 此处不是200px , 而是 300px    }}

变量的数据类型

• 数字 number : 分为带单位的，和不带单位的 ， 如 ： 1、 .2、 13%、 10px；
• 字符串 string：有引号字符串或无引号字符串，如 ： “foo”、 ‘bar’、 hi
• 颜色 color：如 ： blue、 #04a3f9、rgb(255,0,0)、 rgba(255,0,0,0.5)；
• 布尔型 bool ，如：true、 false；
• 空值 null，如：null；
• 值列表 list：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

---

注释

// 这种注释 编译后会消失 /* 这种注释 ，编译后存在，压缩后会消失  *//*!  多用于类库的信息的注释  编译压缩都会存在   */

---

嵌套

用于节约代码，方便管理。

ul{    color:#333;    li{        border:1px solid red;        margin:{            top:2px;            bottom:3px;            left:2px;        }        }      a{        background-color: #f1f1f1;        &:hover{ // & 表示父级选择器 和js 中的this挺像的。            background-color: #f3f3f3;        }        &::after{            content:"aa";        }    }     > span{ // > 代表直接子代选择器        color:blue;    }}

编译后为：

ul {  color: #333;}ul li {  border: 1px solid red;  margin-top: 2px;  margin-bottom: 3px;  margin-left: 2px;}ul a {  background-color: #f1f1f1;}ul a:hover {  background-color: #f3f3f3;}ul a::after {  content: "aa";}ul > span {  color: blue;}

一目了然

---

继承

使用@extend来继承已存在的类样式块
示例：

.btn{    color:red;    } .btn-primary{    border:1px solid #ddd;    @extend .btn;  // 此处使用@extend来继承.btn类中的内容 }

编译后为：

.btn, .btn-primary {  color: red; }.btn-primary {  border: 1px solid #ddd; }

---

占位符 placeholder

使用%来定义占位符,不会在页面中生成btn这个类。
示例：

%mt5{    margin-top:5px;    }%pt5{    padding-top:5px;   }.box1{    width:100px;       @extend %mt5;    @extend %pt5;}

编译后

.box1 {  margin-top: 5px;}.box1 {  padding-top: 5px;}.box1 {  width: 100px;}

缺点：重复的类出现代码冗余，但是定义的placeholder不会显示在编译后的代码中。

---

混合宏 Mixin

@mixin 声明一个混合宏
@include 调用一个混合宏

示例：

@mixin border-radius($border:10px){    border-radius:$border;    -webkit-border-radius:$border;        -ms-border-radius:$border;    -moz-border-radius:$border;    -o-border-radius:$border;}.btn{    @include border-radius();   }.btn1{    @include border-radius(5px);   }

编译后

.btn {  border-radius: 10px;  -webkit-border-radius: 10px;  -ms-border-radius: 10px;  -moz-border-radius: 10px;  -o-border-radius: 10px;}.btn1 {  border-radius: 5px;  -webkit-border-radius: 5px;  -ms-border-radius: 5px;  -moz-border-radius: 5px;  -o-border-radius: 5px;}

可以看到Mixin 中，可以传递值，作为默认的参数，同样的也可以传递多个参数，如下：

@mixin border-radius($a,$b){    border-radius:$a;    -webkit-border-radius:$a;        -ms-border-radius:$a;    -moz-border-radius:$a;    -o-border-radius:$a;    width:$b;}.btn1{    @include border-radius(5px,6px);   }

编译后

.btn1 {  border-radius: 5px;  -webkit-border-radius: 5px;  -ms-border-radius: 5px;  -moz-border-radius: 5px;  -o-border-radius: 5px;  width: 6px;}

其中，形参和实参要对应，并且有多少形参，Mixin里面就要引用多少形参，不然会报错。

Sass 里面比较复杂的混合宏，这里不做讨论 ..

此时来比较一下 混合宏 ， 继承 , 占位符

  混合宏 继承 占位符 声明方式: @mixin .classname %holdername 调用方式: @include @extend @extend 使用环境: 用于相同代码块的传值 会编译被继承的类 占位符不被编译

---

Import （导入）

…

Operators （操作符 ）

…

内置函数

…

指令 Directives

…

有时间再来补充

更多链接：

http://www.ruby-lang.org/zh_cn/ ruby中文官网
http://rubyinstaller.org/downloads/ ruby下载地址
http://sass.bootcss.com/docs/sass-reference/ sass参考手册
https://rubygems.org/gems/sass/versions/3.4.20 sass下载地址
http://sass-lang.com/ sass官网
http://sass-lang.com/guide sass向导
http://www.sass-zh.com/ sass中文网
http://www.sass.hk/ sass中文网
http://www.ruanyifeng.com/blog/2012/06/sass.html Sass快速入门
http://www.w3cplus.com/sassguide/syntax.html Sass语法
http://koala-app.com/ koala官网
http://www.sassmeister.com/ 在线编译scss
https://github.com/oklai/koala/wiki/%E4%B8%AD%E6%96%87wiki koala官网
http://sass.bootcss.com/docs/sass-reference/
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.w3cplus.com/sassguide/syntax.html