scss语法

scss

1.scss是sass的第三版本

2.scss有四种模式：

nested 嵌套格式、expanded 展开格式、 compact 紧凑格式、compressed 压缩模式

3.例子

$符号代表父容器

a:hover ——> $:hover

.top-left ——> $-left

属性拆分

例子：

//sass
container a{
    font-size: 14px;
    font-weight: 100;
    font-family: bold;
}
//scss
.container{
    a{
        font: {
            size:14px;
            family:bold;
            weight:100;
        }
    }
}

4 占位符 % 引用用@extend $

如果不被extend引用，它是不会被编译，也就是：不会占用css文件大小

//占位符定义
%btn {
  border: 1px solid blue;
}
.btn-info {
//占位符引用
  @extend %btn; 
}

注意：嵌套类名的时候 ：后要加空格

如 .bgc {

.top: {

}

}

5.变量 只能先定义后使用，不然报错

​ 1.分为全局变量和局部变量

​ 2.全局变量还分为俩中: 在外边定义 或者在内部定义的时候加个 !global

// 全局定义 
$color: #333;
//使用
.container {
    color: $color
}
//局部定义
.container {
    $color: #333;
   .p{
    color: $color
   }
}
//全局定义第二种方式
.container {
    $color: #333 !global ;
   .p{
    color: $color
   }
}

6.混合指令 @mixin 定义 @include使用

//第一种方式
@mixin top {
   width: 200px;
   height: 200px;
       
}

 .header {
    @include top;
 }
 //第二种方式
 @mixin top {
      .warn-text {
          font-size: 12px;
          color:white;
      }
 }
  .header {
     @include top；
  }

 //  混入还可以封装样式，传递参数
  @mixin block-padding($top, $right, $bottom, $left) {
       padding-top: $top;
       padding-right: $right;
       padding-bottom: $bottom;
       padding-left: $left;
  }

  .block {
    @include block-padding(10px, 20px, 30px, 40px )
  }

7 继承指令 @extend