Day30-sass讲解

sass

概述：

sass属于对应的预编译css（这个东西会被编译成css）他相对是css的扩展（简化css代码）（less 、stylus）

sass的环境支持

1.sass需要ruby语言的支持（之前）

2.需要python语言的支持 （node其中其实有python的环境）

主要是用sass进行编译的css（而不是直接使用sass）之后当我们的项目是通过node来构建的时候 我们就可以使用sass

解析的方式

1.使用node 来安装对应的sass

npm i sass -g

sass 对应的sass文件:编译好的文件

2.使用vscode的插件

live sass

easy sass...

使用的vscode自带的插件来解析

主要使用easy sass

 

扩展设置

 

后缀（建议采用scss）

sass的后缀 sass 以缩进进行区分的（没有{} 没有;） scss (有{} 有; 类似于css)

sass的相关内容

变量声明

$a:20px;
$b:red;
.box{
    height: $a;
    color: $b;
}

生成的css

.box {
  height: 20px;
  color: red;
}

嵌套（子父关系）

$a:20px;
$b:red;
.box{
    height: $a;
    color: $b;
    div{
        color:$b;
    }
}

生成的css

.box {
  height: 20px;
  color: red;
}
​
.box div {
  color: red;
}

支持群组嵌套

.box{
    height: $a;
    color: $b;
    a,b,del,p{
        height: $a;
    }
}

生成的css

.box a, .box b, .box del, .box p {
  height: 20px;
}

对应的&符号（表示当前父类）

.example {
    color: red;
    & div{
        width: 100px;
    }
  }

生成的css

.example div {
  width: 100px;
}
​
.example div a {
  width: 100px;
}

支持运算符（+ - * / %）

$a:20px;
$b:red;
$w:300px;
.box{
    height: $a/2*5;
    color: $b;
    width:300-20+px;
    div{
        color:$b;
    }
    a,b,del,p{
        height: $a;
    }
}

支持判断

@if $b==red {
    
}

支持循环

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

混入器

@mixin hi{
    border:1px;
    color:red;
}
div{
    @include hi()
}

解析的css

div {
  border: 1px;
  color: red;
}

复杂混入器

@mixin test($a,$b,$c) {
    border: $a solid $b;
    color: $b;
    
}
p{
    @include test(1px, red, yellow)
}

解析

p {
  border: 1px solid red;
  color: red;
  
}

支持默认参数

@mixin test($a:2px,$b:green,$c:black) {
    border: $a solid $b;
    color: $b;
    
}
li{
    @include test()
}

解析

li {
  border: 2px solid green;
  color: green;
  
}

包含

@import "example"; 

注释

注释 /* */ 与 // 

继承

.abc{
    @extend p
}

p, .abc {
  border: 1px solid red;
  color: red;
  
}