<span>CSS之 sass、less、stylus 预处理器的使用方式</span>

CSS之 sass、less、stylus 预处理器的使用方式

全栈程序员-用户IM • 2020年11月19日下午8:32 • 未分类

更详细区别参考文档：https://blog.csdn.net/pedrojuliet/article/details/72887490

使用变量：

　　sass：使用 $ 符号定义变量，如： $base_color: #efefef

　　 less：使用 @ 符号定义变量，如：@base_font_size: 16px

　　stylus: 对变量没有任何设定（变量不能以@符号开头），变量之间可以使用 “=”， “空格”或者 “：”，如: base_font_color: red, borderwidth=1px, borderColor #cacaca

导入操作（@import）：

　　如：

base  css文件
/* file.{type} */
body {
  background: #000;
}


xxx css文件
@ import "1.css";
@ import "file.{type}";
p {
  background: #092873;
}


结果
@ import "1.css";
body {
  background: #000;
}
p {
  background: #092873;
}

继承：当我们需要为多个元素定义相同的样式的时候，我们可以考虑使用继承的做法

　　sass继承：通过 @extend来实现代码组合声明（stylus也可以使用此方法实现继承）

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;  
}

.err {
  @extend .message;
  border-color: red;
}

　　less继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  .message;
  border-color: green;
}
.error {
  .message;
  border-color: red;
}

混入（Mixins）：有点像函数或者宏，当某段css经常要在多个元素中使用时，可以为这些共用的css定义一个Mixin，然后在需要的地方引入该Mixin即可

　　sass语法:

/* 定义一个混入语法，接受一个变量，默认值为2px，可选 */
@mixin err($borderWidth:2px){
    border:$borderWidth solid #cacaca
    color: #cacaca
}

.generic-error {
    padding: 20px;
    margin: 4px;
    @include error(5px);  /* 调用混入语法，传入一个参数得到 border:5px solid #cacaca*/
}

　　stylus语法

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;/* 调用混入语法，传入一个参数得到 border:5px solid #cacaca*/、
  error(); 
}