scss/less/stylus的对比

  一、安装方式:

scss: npm i -d sass-loader node-sass
less: npm i -d lese-loader less
stylus: npm i -d stylus-loader stylus
二、常用功能对比
1.共同点:
(1)引入外部样式文件:@import 'path' //可省略后缀名
(2)都有选择器嵌套功能
(3单行注释//都不会被输出到编译后的文件中
(4)父选择器标识符都是&
(5)都有混合器,混合器都可以传参和设置默认值
2.不同点
(1)stylus不需要写分号和{},其他两个要写
(2)stylus的混合器样式可用空格代替:
(3)scss有属性嵌套功能
font: { family: fantasy; size: 30em; weight: bold; }
(4)变量的申明方式:
scss:$variable-name:value
less: @variable-name:value
stylus: variable-name = value
(5)混合器的使用方式
scss: 声明: @mixin mixin-name($param:defaultValue) {...},引入时以@include mixin-name($param:value)
less: .mixin-name(@param:defaultValue){...} div{.mixin-name(param:defaultValue)}
 

猜你喜欢

转载自www.cnblogs.com/chenxiangling/p/10518483.html