sass的用法重温

Sass使用变量，变量以$开头

$bgcolor:#f40;  background-color:$bgcolor;

如果变量需要嵌套在字符串当中，就需要写在#{}之中

$direction:left; border-#{$direction}-radius:10px; 

计算、嵌套、属性嵌套  这三个可以从字面上理解，最后一个嵌套属性举个栗子

div{a:hover{color:red;}}

继承 @extend class2继承class1的属性

.class1{background-color:pink;} .class2{@extend .class1;font-size:24px;}

选择符& 

a {color: orange; &:hover {color: darken(orange,5%);}

与之对应的是脱离父级继承 @at-root 

div{@at-root a{color:red;}}  编译成css后不是 div a{color：red;} 而是a{color:red;}

编写可以重用的代码块 @mixin  使用@include命令，调用

@mixin left{float:left;clear:both;}  div{@include left;}
更重要的是他可以传入参数-例如：
@mixin left($value:10px){float:left;margin-left:$value}  div{$include left(50px)}

颜色函数

 变暗background-color:darken(#cc3, 10%)  
 变亮background-color:lighten(#cc3, 10%)

函数传值计算rem

　$fsz:50;

@function rem($value){
    @return  $value/$fsz*1rem;
}
之后要计算rem就直接在rem()括号中传入设置参数即可自动计算rem

 

插入文件  @import 

可以在.scss文件中以@import  ‘demo’ 形式引入外部sass样式文件 还可以带路径  @import  "path/a.scss";

条件语句

@if可以用来判断：　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}
配套的还有@else命令：
　　　　　@if  lightness($color) > 30% {
　　　　    
　　       } @else {
　　　　    background-color: #fff;
　    　    }

转载于:https://www.cnblogs.com/Model-Zachary/p/6098992.html