SCSS的特点

2019-10-31 18:30:52 浏览数 (1)

SCSS是一种CSS预处理语言

代码语言:txt复制
  定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。

CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,

是一种SCSS-like语言,弥补了sass和css之间的鸿沟;

使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法,否则报错

有哪些特点:

1、@import命令导入外部sass、scss、css文件

代码语言:txt复制
<style lang="scss">
@import './test.scss'; //导入外部scss文件
.myText {
   border:1px solid red;
}
</style>

2、继承

继承 .class 使用 @extend

代码语言:txt复制
.container {
   color:purple;
   border:2px dashed purple;
}
.myText {
   @extend .container; //这里将继承.container类的所有样式
   font-size: 22px;
}

3、SCSS占位符 %

使用% 声明的代码块,如果不被@extend调用的话就不会被编译。

编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。

代码语言:txt复制
%m5 { background-color: lightblue;}
.P1 { @extend %m5; }

4、重复代码块,使用混合@mixin命令定义,以及使用@include调用该mixin

代码语言:txt复制
@mixin normalStyle {
   //使用@mixin命令定义可重复使用的代码块
   width:300px;
   height:100px;
   color:black;
   background-color:lightblue;
}
.container {
   @include normalStyle;
   //使用@include 命令引用@mixin定义的代码块
}

在使用@mixin和@include时,传入参数和默认值

代码语言:txt复制
@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
   width:$width;
   height:$height;
   color:$color;
   background-color:$defaultValue;
}
.container {
   @include normalStyle(300px,100px,green,lightgray);
}

参考:https://segmentfault.com/a/1190000004688781

0 人点赞