标签：color article 处理器 不能 blog art csdn sdn 结果
更详细区别参考文档：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();
}
怎能让着不停燃烧的心，就这样耗尽消失在平庸里
CSS之 sass、less、stylus 预处理器的使用方式与区别
标签：color article 处理器 不能 blog art csdn sdn 结果
原文地址：https://www.cnblogs.com/jingxuan-li/p/11828783.html
