1、编译环境不同

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

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

2、变量符不同

SASS 变量符是 $

LESS 变量符是 @

3、变量作用域不同

> SASS 作用域

$color: blue;

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

用 SASS 编译后

#header{border:1px solid red}
#footer{border:1px solid red}

> LESS 作用域

@color: blue;

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

用 LESS 编译后

#header{border:1px solid red;}
#footer{border:1px solid blue;}

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

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

/*Sample Sass “if” statement*/
@if lightness($color) > 30%{
...
}
@else{
  ...
}

5、引用外部 CSS 文件

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

// 源代码:
@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。

SASS 和 LESS 的区别的更多相关文章

  1. Sass和Less的区别?

    这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...

  2. less和sass的定义和区别

    less是单独的一种文件,可以理解为css的升级版: sass是一个相对新的编程语言,为web前端开发而生,可以用它来定义一套新的语法规则和函数: 区别: ①   表现方式不同:less基于javas ...

  3. 动态样式语言Sass&Less介绍与区别

    一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...

  4. sass与less的区别?Stylus又是啥?

    现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了Less.Sass 和 Stylus: 在这之前,我们先了解一点,sass和scss有什么区别? SCSS 是 Sass ...

  5. sass 与 less 的区别与学习

    一直使用的都是sass,公司提出新需求要用less,看了一下less的官方文档,感觉记不住.在这我想用与sass的比较学习,加深印象.也希望可以帮助到一些人. 一.安装sass与less sass基于 ...

  6. sass和scss的区别

    页面引入的时候还是引入的css文件 因为sass和scss都是一种css的预处理工具 目的最后都是生成css文件 sass不带{}和:是基于Ruby 写出来的,严格的缩进方式来控制 scss带这两个 ...

  7. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  8. 【less和sass的区别,你了解多少?】

    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...

  9. scss、sass、less的对比与区别

    什么是Sass和Less? sass和less都属于CSS预处理器. css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开 ...

随机推荐

  1. 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink

    目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...

  2. [转帖]实时流处理系统反压机制(BackPressure)综述

    实时流处理系统反压机制(BackPressure)综述 https://blog.csdn.net/qq_21125183/article/details/80708142 2018-06-15 19 ...

  3. [C#] - 从 HTML 代码中 转换 / 提取 可读文字(PlainText)的方法

    背景 在做网页数据分析的时候,我们关注的部分是内容,可以过滤掉HTML标签.Javascript.CSS等代码. 目标输入 <b>Hello World.</b><br/ ...

  4. Quartz.Net—JobBuilder

    JobBuilder JobBuilder是一个建造者模式,链式建造.通过静态方法构建一个JobBuilder实例,然后再调用类方法Build()创建一个IJobDetail的实现. 1.静态方法 p ...

  5. hadoop常见问题收集

    hadoop 搭建 常用命令记录 快捷键安装在/user/local/bin目录下 nano 文件名 ctrl + k 剪切一行 ctrl + o 保存并重命名,不重命名直接enter ctrl + ...

  6. java当中JDBC当中请给出一个sql server的dataSource的helloworld例子

     [学习笔记] 4. sql server的dataSource的helloworld: import java.sql.*;import javax.sql.*;import net.sourcef ...

  7. 分布式自增ID算法snowflake

    分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的,作为索引非常不好,严重影响性能. ...

  8. Java 发送http GET/POST请求

    最近项目里面需要用到Java发送http请求,由于发送https请求有点复杂,暂时不考虑 HttpURLConnection HttpURLConnection是一种多用途.轻量极的HTTP客户端,使 ...

  9. Python 容器用法整理

    本文整理几种基本容器:列表.元组.字典和集合的用法和collections中几种已经预先实现的容器数据结构:namedtuple(),双向链表deque,ChainMap,Counter,Ordere ...

  10. Linux的常用命令及快捷键

    常用快捷键 1 终端中的快捷键 ctrl+a 回到行首,ctrl+e回到行尾 ctrl+n 代码候选 常用命令