安装
SASS语法
SCSS语法
- 编译
Sass 预处理器
变量
- 变量可以有多个值
- @mixin 混合宏
  - 可以解决兼容性问题
变量成为属性 / 选择器的一部份
@extend 选择器继承
& 嵌套父元素
选择器嵌套
属性嵌套
运算
Directive 控制命令
函数

安装

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
#安装 sass
gem install sass

Ruby 是一个面向对象的脚本语言，20世纪90年代日本人松本行弘发明。 Sass 是基于 Ruby 开发 https://www.sassmeister.com SASS语法 2007 诞生

SASS语法

2007 诞生
缩进代替花括号，换行代替分号。
近似 Ruby 的 SASS 语法:

$color: #fff
$font-size: 10px
.box
  color: $color
  font-size: $font-size
  background-color: red

SCSS语法

Sass 3.0 版本
Sassy CSS，在 CSS 写法的基础上补充/扩展，也包括 Sass 的所有特性。
更贴近 css 的写法：

$color: #fff;
$font-size: 10px;

.box{
    color: $color;
    font-size: $font-size;
    background-color: red;
}

编译

sass scss/source.scss:css/target.css --style expanded

—watch 监听
4种输出风格
- nested 嵌套
- expanded 展开
- compact 紧凑
- compressed 压缩
  Sass 预处理器
  通过该预处理器的语法，产生 CSS 的一个程序。通过编译，实现纯 CSS 没有变量、简单的逻辑程序。
  纯 CSS 比如相同的样式出现在不同的地方
  变量
  使用 $ 定义 ```css $color: red; // 全局变量

.box{ color: $color; // red

.inner-box-1{
    $color: blue; //局部变量
    color: $color; // blue
}

.inner-box-2{
    color: $color; // red
}

}

$color: red; // 全局变量

.box{ color: $color; // red

.inner-box-1{
    $color: blue !global; // 提升为全局变量；覆盖red->blue
    color: $color; // blue
}

.inner-box-2{
    color: $color; // blue
}

}

<a name="xZ5di"></a>
## !default 
定义为默认值 即可以被修改
```css
#1.scss

$color: blue !default;
.box{
    color: $color;
}

#2.scss
$color: red;
@import "2.scss";

这样 2.scss 输出才会被修改为 red

变量可以有多个值

可以使用 nth(var, num) 选择 num 由 1 可以

$darkColor: #333 #666;
$lightColor: #ddd #eee;

div{
    background-color: nth($darkColor, 1);
}

@mixin 混合宏

定义 @mixin Mixin 名 (参数名:默认值) { 样式规则 }
调用 @include Mixin 名 (参数)

可以解决兼容性问题

@mixin box-shadow($shadow){ 
    /*此时只能接收一个参数，对于box-shadow是支持多个参数，只需在后面加 ...*/
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -o-box-box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    box-shadow: $shadow;
}

div{
    @include box-shadow(-5px 0 -5px orange);
}

p{
    @include box-shadow(5px 0 5px blue);
}

---------------------------------------------------------

/*支持多个参数 */
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -o-box-box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    box-shadow: $shadow;
}

div{
    @include box-shadow(-5px 0 -5px orange, 5px 0 5px blue);
}

变量成为属性 / 选择器的一部份

在属性名 / 选择器使用时需要使用 #{} 包裹（字符串占位）

@mixin set-value($direction){
    margin-#{$direction}: 10px;
    padding-#{$direction}: 10px;
}

.input-box{
    @include set-value(top);
}

-------------------------------------------------------------

@mixin btn-bg-color($btnClass, $bgColor){
    .btn-#{$btnClass}{
        background-color: $bgColor;
    }
}

@include btn-bg-color('success', #5cb85c);
@include btn-bg-color('warning', #f0ad4e);

mixin 缺点: 不能解决代码臃肿问题

@extend 选择器继承

.box{
    width: 100px;
    height: 100px;
}

.box-1{
    @extend .box;
}

.box-2{
    @extend .box;
}

------------------------------------------------
/* 使用%占位符的属性不会出现在编译的结果 */
%box{
    width: 100px;
    height: 100px;
}

.box-1{
    @extend %box;
}

.box-2{
    @extend %box;
}

& 嵌套父元素

.clearfix{
    background-color: black;

    &::before{
        display: block;
        clear: both;
    }
}

选择器嵌套

div{
    width: 100px;
    height: 300px;
    ul{
        height; 100%;
        li{
            width: 20%;
            height: 100%;
        }
    }    
}

属性嵌套

div{
    background:{
        image: url(../img/bg.jpg);
        repeat: no-repeat;
        size: 100% 100%;
        position: 0 0;
    }
}

运算

10px + 60px
- 加减法
  - 单位不能转换的单位不能运算
  - 1in = 96px
- 乘法
  - 只需要一个单位，单位也会进行运算
  - 50px * 2
- 除法
  - font： font-size / line-height
  - CSS 把 / 作为分隔属性数字的符号
  - width: (30px / 2) 用小括号包裹
  - width: 30px / 2 - 6px; 后面还有运算
  - width: $fullWidth / 2; 变量 / 2
- mod
  - width: 50px % 3;
颜色运算（调色）
字符串运算
- + 拼接
- 以第一个字符串为准，有引号拼接后就有引号，没引号拼接就没有引号
  Directive 控制命令
  @if
```
span{
@if $textType == "large"{
   font-size: 40px;
}@else if ($textType == "middle"){
   font-size: 28px;
}@else{
   font-size: 14px;
}
}
```
  @for
```css @for $i from 1 through 3{ .item-#{$i}{ width: 5px * $i; } }

@for $i from 1 to 3{ //to不包含3 .item-#{$i}{ width: 5px * $i; } }

<a name="r4V4t"></a>
### @while
```css
$i: 12;

@while $i > 0{
    .item-#{$i}{
        width: 5px * $i;
    }

    $i: $i - 1;
}

@each

$list: dog, cat, elephant;
@each $animal in $list{
    .#{$animal}-icon{
        background-image: url(/imgs/#{$animal}.png);
    }
}

------------------------------------
@each $animal, $color, $cursor in (cat, white, default),
                                  (dog, brown, pointer),
                                  (butterfly, yellow, move){
    .#{$animal}-icon{
        background-image: url(/imgs/#{$animal}.png);
        border: 1px solid $color;
        cursor: $cursor;
    }
}

------------------------------------
//map的方式
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em){
    #{$header}{
        font-size: $size;
    }
}

函数

字符串函数

quote() 给字符串添加上引号，保证一定有双引号。
```
h1{
  &::before{
      content: quote(Girl); //"Girl"
  }
}
```
unquote() 给字符串去除最外层引号
to-upper-case() 大写
to-lower-case() 小写

数字函数
percentage() 转为百份
round() 四舍五入
ceil() 向上取整
floor() 向下取整
abs() 绝对值
max()
mix()
random()

列表函数
length() 列表长度
nth() 由1开始
join(list1, list2, separator = auto) separator = auto | space | comma
```
join(10px 20px, 30px 40px) // 10px 20px 30px 40px
```
append(list1, list2, separator = auto) separator = auto | space | comma
zip 把多个列表转为一个多维列表

index() 找索引由1开始

index(1px solid #000000, 1px) // 1
index(1px solid #000000, solid) // 2

type-of() 输出类型
- number
- string
- bool
- color
unit() 找单位
unitless() 是否没有单位
comparable 是否能比较（相加）
if($condition, $if-true, $if-faluse) 三元条件函数

map函数
map-get(map, key) 获取 map 的 value，可以嵌套 ```css $color: ( default: (
```
bgcolor: #fff,
text-color: #999,
```
), primary: red )

.box{ background-color: map-get($color, “primary”)
} .box2{ background-color: map-get(map-get($color, “primary”), “bgcolor”);
}


- map-has-key(map, key)  是否有key
- map-keys(map) 返回所有key
- map-values(map) 返回所有value
- map-merge(map1, map2) map合拼
- map-remove(map, key) 移除
- keywords 创造一个新的map
<a name="PjGtl"></a>
### 颜色函数

- rgb(Red, Green, Blue)
- rgba(Red, Green, Blue, Alpha)
- mix(color1, color2, [weight]) 颜色混合
- hsl(Hue, Saturation, Lightness) 
- hsla(Hue, Saturation, Lightness, Alpha)
- hue(color) 获得色相
- saturation(color) 获得饱和度
- lightness(color) 获得亮度
- adjust-hue(color, deg) 基于一个颜色，调整其色相，得到一个新的颜色
- lighten(color,  percent%)  基于一个颜色，变亮，得到一个新的颜色
- darken(color,  percent%)  基于一个颜色，变暗，得到一个新的颜色
- saturate(color, percent%) 基于一个颜色，变得更饱和，得到一个新的颜色
- desaturate(color, percent%) 基于一个颜色，变减少饱和，得到一个新的颜色
- grayscale(color) = desaturate(color, 100%)  灰度
- complement(color) = adjust-hue(color, 180deg) 补色
- invert(color) 反色
- opacity(color) / alpha(color) 获取透明度
- opacify(color, percent%)  让颜色更不透明
- transparentize(color, percent%) / fade-out(color, percent%)  让颜色更透明
<a name="l5SeM"></a>
### 自定义函数

- @function
```css
$theme-color: (
  bgcolor: #fff,
  text-color: #999
);

@function colors($color){
    @if not map-has-key($theme-color, $color){
        @warn "No color found for '#{$color}' in $theme-color map. Property omitted."
    }
    @return map-get($theme-color, $color);
}

.box-1{
    color: colors(bg);
}

@规则
- @import
  - Sass 会自动找具有 .scss 和 .sass 扩展名的同名文件
  - 如果一个 .scss 或 .sass 文件需要引入，但不希望编译为 css 时，可为其文件名前加一个_
- @media
  - 支持嵌套
- @extend
- @at-root
  - 跳出至根元素
- @debug
- @warn
- @error

SASS

安装

SASS语法

SCSS语法

编译

Sass 预处理器

变量

变量可以有多个值

@mixin 混合宏

可以解决兼容性问题

变量成为 属性 / 选择器 的一部份

@extend 选择器继承

& 嵌套父元素

选择器嵌套

属性嵌套

运算

Directive 控制命令

@if

@for

@each

函数

字符串函数

数字函数

列表函数

map函数

变量成为属性 / 选择器的一部份