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

CaiKanXP 2019-11-10

更详细区别参考文档: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(); }

怎能让着不停燃烧的心,就这样耗尽消失在平庸里

相关推荐