1.什么是Sass?
2.Less和Sass文件后缀名区别
3.Sass注释
4.Sass编译风格
5.Sass变量
- 5.1格式
- 5.2特点
6.变量插值
7.Sass运算
8.Sass混合
navbar li {
footer {
- 11.3嵌套导入
13.Sass层级结构
14.Sass嵌套/继承
15.Sass条件判断
16.Sass循环

1.什么是Sass?

Sass是一套利用Ruby实现的,最早最成熟的CSS预处理器, 诞生于2007年.
它扩展了 CSS 语言,增加了变量、Mixin(混合)、嵌套、函数和运算等特性,使 CSS 更易维护和扩展.

2.Less和Sass文件后缀名区别
Less以.Less结尾;
Sass以.Sass或者.scss结尾
- .Sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
- .scss以{}表示层级结构, 语句后面需要写分号
- 企业开发中推荐使用.scss结尾
  3.Sass注释
Sass中的注释和Less一样;
单行注释不会被编译(不会出现在编译后的文件中)
- // comment，只保留在SASS源文件中。
多行注释会被编译 (会出现在编译后的文件中)
- / comment /
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
```
/*! 
　　重要注释！
*/
```
4.Sass编译风格
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

5.Sass变量

5.1格式

$变量名称: 值;

$blue : #1875e7;　
　　div {
　　　color : $blue;
　　}

5.2特点

后定义覆盖先定义;
可以把变量赋值给其它变量
区分全局变量和局部变量(访问采用就近原则)
Less中变量是延迟加载, 可以先使用后定义
Sass中变量不是延迟加载, 不可以先使用后定义;

6.变量插值
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

[x] 格式: #{$变量名称};

$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

7.Sass运算

Sass中的运算和Less也一样, 都支持+ - * / 运算;
无论是Less中的运算还是Sass中的运算都需要加上();
8.Sass混合

1.Less混合定义和调用格式:
- Less中混合定义: .混合名称{} 或者 .混合名称(){};
- Less中混合调用: .混合名称; 或者 .混合名称();
2.Sass混合定义和调用格式:
- Sass中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
- Sass中混合调用: @include 混合名称; 或者 @include 混合名称();
3.Mixin使用

Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块。

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。
```
div {
　　　　@include left;
　　}
```

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数：

div {
　　　　@include left(20px);
　　}

下面是一个mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}-#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候，可以像下面这样调用：
```
#navbar li {@include rounded(top,left);}
#footer {@include rounded(top,left,5px);}
```
```css //执行结果

navbar li {
　　　　border-top-left-radius: 10px; 　　　　-moz-border-radius-top-left: 10px; 　　　　-webkit-border-top-left-radius: 10px; }

footer {

　　　　border-top-left-radius: 5px; 　　　　-moz-border-radius-top-left: 5px; 　　　　-webkit-border-top-left-radius: 5px; }

<a name="mRh03"></a>
### 9.Sass带参数的混合
- 不带默认值形参;
- 带默认值形参
- 给指定参数赋值
<a name="Kj370"></a>
### 10.Sass可变参数
- 必须通过 $args...的格式来定义可变参数, 然后通过$args来使用;
- 和Less一样可变参数必须写在形参列表的最后
<a name="Idj32"></a>
### 11.Sass导入文件
- [x] 只有执行到@import时浏览器才会去下载对应 css文件，这导致请求次数变多,页面加载起来特别慢
- [x] 而Less和Sass中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快;
<a name="WLTty"></a>
#### 11.1使用Sass部分文件
- 当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。
- 此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。
- 局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。
<a name="GLzf8"></a>
#### 11.2默认变量值
- 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明:
```css
$link-color: blue;
$link-color: red;
a {
        color: $link-color;
}

在上边的例子中，超链接的color会被设置为red。这可能并不是你想要的结果，假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是:如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
```
$fancybox-width: 400px !default;
.fancybox {
      width: $fancybox-width;
}
```
在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

11.3嵌套导入
嵌套导入，它允许只在某一个选择器的范围内导入sass局部文件。
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容如下:
```
aside {
background: blue;
color: white;
}
```
然后把它导入到一个CSS规则内，如下所示: ```css .blue-theme { @import “blue-theme”}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme { aside { background: blue; color: #fff; } }


- 被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
- 有时，可用css原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。
<a name="vbHrf"></a>
#### 11.4原生Css导入
- 由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载:
   - 被导入文件的名字以.css结尾；
   - 被导入文件的名字是一个URL地址(比如http://www.sass.hk/css/css.css)，由此可用谷歌字体API提供的相应服务；
   - 被导入文件的名字是CSS的url()值。
- 这就是说，你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。
<a name="sk5id"></a>
### 12.Sass内置函数
```css
    // 字符串函数
    unquote（$string）：删除字符串中的引号；
    quote（$string）：给字符串添加引号；
    To-upper-case（$string）：将字符串小写字母转换为大写字母
    To-lower-case（$string）：将字符串大写字母转换为小写字母
    // 数值函数
    percentage($value)：将不带单位的数转换成百分比值；
    round($value)：将数值四舍五入，转换成一个最接近的整数；
    ceil($value)：向上取整；
    floor($value)：向下取整；
    abs($value)：取数的绝对值；
    min($numbers…)：找出几个数值之间的最小值；
    max($numbers…)：找出几个数值之间的最大值；
    random(): 获取随机数
    // 颜色函数
    rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
    rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
    red($color)：从一个颜色中获取其中红色值；
    green($color)：从一个颜色中获取其中绿色值；
    blue($color)：从一个颜色中获取其中蓝色值；
    mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
    // 列表函数
    length($list)：返回一个列表的长度值;
    nth($list, $n)：返回一个列表中指定的某个标签值;
    join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
    append($list1, $val, [$separator])：将某个值放在列表的最后；
    zip($lists…)：将几个列表结合成一个多维的列表；
    index($list, $value)：返回一个值在列表中的位置值。

13.Sass层级结构

和Less一样支持嵌套, 默认情况下嵌套的结构会转换成后代选择器

和Less一样也支持通过&符号不转换成后代选择器

14.Sass嵌套/继承

.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
@extend .center;
width: 300px;
height: 300px;
background: red;
.son{
  @extend .center;
  width: 200px;
  height: 200px;
  background: blue;
}
}

属性也可以嵌套，比如border-color属性，可以写成：

p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

　a {
　　　　&:hover { color: #ffb3ff; }
　　}

15.Sass条件判断

[x] Sass中支持

@if(条件语句){}
@else if(条件语句){}
@else(条件语句){}
Sass中当条件不为false或者null时就会执行{}中的代码

[x] Sass中的条件语句支持通过> >= < <= ==进行判断

@mixin triangle($dir, $width, $color){
width: 0;
height: 0;
border-width: $width;
border-style: solid solid solid solid;
@if($dir == Up){
  border-color: transparent transparent $color transparent;
}@else if($dir == Down){
  border-color: $color transparent transparent transparent;
}@else if($dir == Left){
  border-color: transparent $color transparent transparent;
}@else if($dir == Right){
  border-color: transparent transparent transparent $color;
}
}

16.Sass循环

[x] Sass比Less牛逼的地方就在于Sass中直接支持循环语句, 而Less中需要通过混合+条件判断自己实现
Sass中支持两种循环, 分别是for循环和while循环
for循环

@for $i from 起始整数 through 结束整数{}
@for $i from 起始整数 to 结束整数{}
两者的区别: through包头包尾, to包头不包尾
```
@for $i from 1 to 4 {
  .border-#{$i} { 
    border: #{$i}px solid blue; 
    }
}
```

while循环

@while(条件语句){}

$i: 1;
@while $i < 7 {
　　.item-#{$i} { width: 1em * $i; }
　　$i: $i + 1;
}

each循环

定义了一个变量，其中包含列表中每个项目的值
@each $i in {}

$i: 它表示变量的名称。 @each规则将$i设置到列表中的每个项目，并使用值$i输出样式。

: 这些是SassScript表达式，将返回列表或映射。

@each $color in red, green, yellow, blue {
.p_#{$color} {
background-color: #{$color};
}
}

前端笔记

Sass学习

1.什么是Sass?

2.Less和Sass文件后缀名区别

3.Sass注释

4.Sass编译风格

5.Sass变量

5.1格式

5.2特点

6.变量插值

7.Sass运算

8.Sass混合

navbar li {

footer {

11.3嵌套导入

13.Sass层级结构

14.Sass嵌套/继承

15.Sass条件判断

16.Sass循环