更详细区别参考文档: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();
}
怎能让着不停燃烧的心,就这样耗尽消失在平庸里
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2592.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...