Sass-2【变量、混入mixin、继承、占位符】

一.变量

(1).基本构成

$color:red;
$ 变量声明符
color 变量名称
red 变量值

(2).作用域问题

局部变量情况

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

因为是从上到下的，且在一个box作用域中，所以不会是undefined，执行后就会改为red

全局变量的情况

red blue red

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

(3).default用于组件化开发

无default

styles.scss

@import 'inndex.scss';
.box{
    color:#red;
}

index.scss

$color：blue;
.box{
    color:$color;
}
//解析结果
.box{
    color:blue;
}
.box{
    color:red;
}

default

index.scss

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

styles.scss

.box{
    color:#red;
}
@import 'inndex.scss';
//解析结果
.box{
    color:#red;
}

不加default就是blue,也就是说加了default就可以被替换，改变sass从上到下的顺序

(4).多个值取一个值nth

开始的下标不是0 是1

$divColor: orange green;
div{
    background-color:nth($divColor,2);
}

二.混入mixin

(1).兼容性

@mixin box-shadow($shodw){
    -webkit-box-shadow:$shodow;
    -moz-box-shadow:$shodow;
    -o-box-shadow:$shadow;
    -ms-box-shadow:$shadow;
}

(2).传递多个参数

@mixin box-shadow($shodw...){
    -webkit-box-shadow:$shodow;
    -moz-box-shadow:$shodow;
    -o-box-shadow:$shadow;
    -ms-box-shadow:$shadow;
}
div{
    @include box-shadow(-5px 0 5px orange,5px 0px 5px blue)
}
//编译结果
div{
    -webkit-box-shadow:-5px 0 5px orange,5px 0px 5px blue;
    -moz-box-shadow:-5px 0 5px orange,5px 0px 5px blue;
    -o-box-shadow:-5px 0 5px orange,5px 0px 5px blue;
    -ms-box-shadow:-5px 0 5px orange,5px 0px 5px blue;
}

(3).代替样式名称#{}

@mixin set-value($direction){
    margin-#{$direction}:10px;
    padding-#{$direction}:10px;
}
.input-box{
    @include set-value(bootom);
}

(4).公共样式书写

@mixin btn-bg-color($btnclass,$bgcolor){
    .btn-#{$btnclass}{
        background-color:$bgcolor
    }
}
@include btn-bg-color('warning',#5cb85c)

(5).提取公共属性名 公共属性:{具体配置项}

div{
    background:{
        image:url(../img/bg.jpg);
        repeat:no-repeat;
        size:50% 100%;
        position:0 0;
    }
}
//编译结果
div{
    background-image:url(../img/bg.jpg);
    background-repeat:no-repeat;
    background-size:50% 100%;
    bckground-position:0 0;
}

(6).默认值的设置及修改

@mixin transform($deg:20deg){
    transform:rotate($deg);
    -webkit-box-shadow:rotate($deg);
    -moz-box-shadow:rotate($deg);
    -o-box-shadow:rotate($deg);
    -ms-box-shadow:rotate($deg);
}
.box{
    @include transform(50deg);
}

三.继承

(1).@entend中解决mixin引入会重复的问题

.box{
    width:100px;
}
.box1{
    @extend .box;
}

但是会有个缺点就是会把所有含有button样式全部拷贝进来

四.%占位符

3.2解决了以上问题

%box{
    width:100px;
}
.box-1{
    @extend %box;
}
.box-2{
    @extend %box;
    background-color:blue;
}
//编译结果
.box1,.box-2{
    width:100px;
}
.box-2{
    background-color:blue;
}