less、sass和stylus的基本总结

1. 基本语法区别

sass和less使用的是标准的css语法。默认的sass使用 .sass 扩展名；而less默认使用 .less 扩展名。

/* style.sass or style.less */
h1 {
	color: #000fff;
}
/* sass也支持老的语法；就是不包含花括号和分号的写法 */
h1
	color: #000fff

stylus支持的语法更多样些，默认是 .styl 文件的扩展名：

h1 {
	color: #000fff;
}
h1 
	color: #000fff;
h1
	color #000ff

2. 变量

• sass：

  sass 最为重要的就是为css引入了变量，可以反复使用css属性值定义成变量然后通过变量来引用它们，而无需重复书写这一属性值；

sass变量必须是以 $ 开头，然后变量和值之间用 ( : ) 隔开，和css属性一样。

$maincolor : #000fff;
$sizeWidth : 1024px;
body {
	color: $maincolor;
	max-width: $sizeWidth;
}

• less css

来源：CSDN

作者：zlq_csdn

链接：https://blog.csdn.net/zlq_CSDN/article/details/103950999