Less 和 Scss区别

编译环境不同

Less:可在浏览器处理,也可在服务器
Scss:服务端处理,需要Ruby环境

变量符不同

Less:@
Suss:$

变量作用域不同

Less:局部定义,只在局部有效
Scss:局部定义,会改变全局

// Less
@color:red;
.circle{
    @color:green;
    background:@color;  // 输出背景色green
}
.square{
    background:@color; // 输出背景色red,不受.circle中的@color:green影响
}

// Scss
$color:red;
.circle{
    $color:green;
    background:@color;  // 输出背景色green,并且改变全局$color改为green
}
.square{
    background:@color; // 输出背景色green
}

条件语句、循环语句

Less:不支持
Succ:支持

引用对文件名的要求

Less:没要求
Scss:被引用的文件必须是开头,如果是开头,则不会自动编译成css

@import "_base.scss"

Less和Scss各有优劣,Scss语法变量符比较符合开发习惯,但是局部变量影响全局这点难以接受

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容