前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SASS 和 LESS 的区别

SASS 和 LESS 的区别

作者头像
Leophen
发布2019-08-23 22:50:38
1.6K0
发布2019-08-23 22:50:38
举报
文章被收录于专栏:Web前端开发

1、编译环境不同

SASS 的安装需要 Ruby 环境,是在服务端处理的;

LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器,也可以在开发环节使用 LESS,然后编译成 CSS 文件直接使用

2、变量符不同

SASS 变量符是 $

LESS 变量符是 @

3、变量作用域不同

> SASS 作用域

代码语言:javascript
复制
$color: blue;

#header{
  $color:red;
  border:1px solid $color;
}

#footer{
  border:1px solid $color;
}

用 SASS 编译后

代码语言:javascript
复制
#header{border:1px solid red}
#footer{border:1px solid red}

> LESS 作用域

代码语言:javascript
复制
@color: blue;

#header{
  @color:red;
  border:1px solid @color;
}

#footer{
  border:1px solid @color;
}

用 LESS 编译后

代码语言:javascript
复制
#header{border:1px solid red;}
#footer{border:1px solid blue;}

可以看出,less 和 scss 中的变量会随着作用域的变化而不同

4、SASS 支持条件语句(if、else、for等等),而 LESS 不支持

代码语言:javascript
复制
/*Sample Sass “if” statement*/
@if lightness($color) > 30%{
    ...
}
@else{
  ...
}

5、引用外部 CSS 文件

scss 引用的外部文件命名必须以_开头, 如下例所示:

代码语言:javascript
复制
// 源代码:
@import "_test1.scss";
@import "_test2.scss";

// 编译后:
h1{
  font-size:17px;
}
h2{
  font-size:17px;
}

其中_test1.scss、_test2.scss文件分别设置的h1 h2。文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件.

而 Less 引用外部文件和 css 中的 @import 没什么区别

6、工具库不同

Sass 有工具库 Compass, 在其基础上封装了一系列有用的模块和模板,补充强化了Sass的功能;

Less 有 UI 组件库 Bootstrap。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、编译环境不同
  • 2、变量符不同
  • 3、变量作用域不同
    • > SASS 作用域
      • > LESS 作用域
        • 4、SASS 支持条件语句(if、else、for等等),而 LESS 不支持
          • 5、引用外部 CSS 文件
            • 6、工具库不同
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档