vue相关 scss语法基础

-----------------------------------------vue相关 scss语法基础------------------------------------------------------------

高效css预编译语言  js方式书写css   同类 less stylus

基于ruby语言开发

文件区别

.sass  语法没有花括号 分号

 .scss文件内支持css语法  √

     但是目前没有任何浏览器支持这种语言，所以，需要编写完成之后，转成css

     借助node环境下的gulp工具的gulp-sass插件，实现sass转css的功能

 scss语法

 //注释不会被编译，会被编译

 单值变量

 $c:red;

 div{

     width:100px;

     color: $c;

 }

 多值变量

 $c:red yellow;

 div{

     width:100px;

     color: nth($c, 1);            从1开始

 }

数组型变量和 @each  in

  list变量，类似于js的数组

$l:(1,100,20,red)(2,50,30,yellow)(3,150,10,green)(4,200,40,blue)(5,30,10,pink);

@each $i,$w,$h,$c in $l {

    .box#{$i}{                          选择器有变量 用#{}包裹

        width:$w + px;

        height:$h + px;

        color:$c;

    }

}

对象型变量

map变量，类似于js的对象

$m:(h1:30px,h2:20px,h3:10px);

@each $key,$val in $m {

    #{$key}{

        font-size:$val;

    }

}

选择器的嵌套

.list{

    li{border: solid 1px black;

        &:hover{background: red;}      伪类选择器

    }

    .last{border:none;}

}

属性的嵌套

.box{

    border:{

        left:{width:10px;color:red;style:solid;}

        right:{width:20px;color:yellow;style:solid;}

    }

}

4.混合mixin，类似于js的函数，但是没有返回值

@mixin abc ($deg){                     封装

    -webkit-transform: $deg;

    -moz-transform: $deg;

    -ms-transform: $deg;

    -o-transform: $deg;

    transform: $deg;

}

.box{

    @include abc(rotate(90deg));       调用  传参

}

.box1{

    @include abc(translate(100px));

}

5. 继承

.box1{width:100px;height:100px;background: red;}

.box2{

    @extend .box1;        继承

    background: yellow;   调整

}

6. 运算

https://blog.csdn.net/hpasdabc?spm=1000.2115.3001.5343

$c:red;

.box{

    color:$c 50;

    width:100*2 + px;

    height:100px / 16px * 1rem;        转rem 封装运算部分

    margin:50px / 16px * 1rem;

}

@function pTr($px){                 封装

        @return $px / 16px * 1rem;   默认1rem=16px

    }

    .box{

        width:pTr(89px);           调用 传参

        height:pTr(89px);

    }

    8.引入外部scss并合并

@import "style.scss";