如何使用SCSS

安装vscode插件 Live Sass Compiler，创建文件后点击底部watching。

SASS与SCSS语法区别

文件.scss结尾

scss
.header{
    span{
        color: red;
    }
    &:active{
        color: blue;
    }
}

sass不能写花括号和分号,文件.sass结尾

.header
    span
        color: red
    
    &:active
        color: blue

定义变量

变量必须写在最前面，因为scss是从上往下执行。

$text-color:red;//定义变量
.header{
    span{
        color: $text-color;
    }
    &:active{
        color: blue;
    }
    &:hover{
        color: $text-color;
    }
}

嵌套

div{
    span{
        color: red;
        a{
            color: aqua;
        }
    }
}
//css
//div span {
//  color: red;
//}
//div span a {
//  color: aqua;
//}

sacc引入

创建一个文件，在文件前加一个_默认表示私有，就不会生成css文件。

$text-color:red;
$small-font:14px;

通过@import引入

@import 'view';
.header{
    span{
        color: $text-color;
        font-size: $small-font;
    }
    &:active{
        color: blue;
    }
    &:hover{
        color: $text-color;
    }
}
div{
    span{
        color: red;
        a{
            color: aqua;
        }
    }
}

也可以将header，div单独创建文件，然后通过@import引入，也可实现同样效果，这样可以更方便管理。

Mixin混入的使用

重复的代码可以写在一个mixin里。

封装mixin，@mixin name{}，引入使用@include。也可以将mixin单独写在一个文件里，通过@impore引入。

@mixin sing {
    white-space: nowrap;
    text-overflow: ellipsis;   
}
.text{
    width: 100px;
    @include sing;
}

mixin也可以设置参数

@mixin sing($width) {
    width: $width;
    white-space: nowrap;
    text-overflow: ellipsis;   
}
.text{
    @include sing(200px);
}
.text{
    @include sing(300px);
}

//css样式
.text {
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text {
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@content

@mixin ipad {
    @media screen and (min-width) {
        @content;
    }
}
.header{
    width: 100px;
    @include ipad{
        width: 200px;
    }
}

//css样式
.header {
  width: 100px;
}
@media screen and (min-width) {
  .header {
    width: 200px;
  }
}

SCSS入门