美文网首页
Less 和 Scss区别

Less 和 Scss区别

作者: 大Q本Q | 来源:发表于2021-08-10 11:35 被阅读0次

编译环境不同

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语法变量符比较符合开发习惯,但是局部变量影响全局这点难以接受

相关文章

网友评论

      本文标题:Less 和 Scss区别

      本文链接:https://www.haomeiwen.com/subject/upuxbltx.html