less、sass和stylus的基本总结

2020/1/23 17:20:01 人评论 次浏览 分类:学习教程

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

zlq_csdn
发布了106 篇原创文章 · 获赞 46 · 访问量 5万+
私信 关注

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->