美文网首页
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