SASS 和 LESS 的区别
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 的区别的更多相关文章
- Sass和Less的区别?
这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...
- less和sass的定义和区别
less是单独的一种文件,可以理解为css的升级版: sass是一个相对新的编程语言,为web前端开发而生,可以用它来定义一套新的语法规则和函数: 区别: ① 表现方式不同:less基于javas ...
- 动态样式语言Sass&Less介绍与区别
一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...
- sass与less的区别?Stylus又是啥?
现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了Less.Sass 和 Stylus: 在这之前,我们先了解一点,sass和scss有什么区别? SCSS 是 Sass ...
- sass 与 less 的区别与学习
一直使用的都是sass,公司提出新需求要用less,看了一下less的官方文档,感觉记不住.在这我想用与sass的比较学习,加深印象.也希望可以帮助到一些人. 一.安装sass与less sass基于 ...
- sass和scss的区别
页面引入的时候还是引入的css文件 因为sass和scss都是一种css的预处理工具 目的最后都是生成css文件 sass不带{}和:是基于Ruby 写出来的,严格的缩进方式来控制 scss带这两个 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- 【less和sass的区别,你了解多少?】
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...
- scss、sass、less的对比与区别
什么是Sass和Less? sass和less都属于CSS预处理器. css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开 ...
随机推荐
- 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink
目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...
- [转帖]实时流处理系统反压机制(BackPressure)综述
实时流处理系统反压机制(BackPressure)综述 https://blog.csdn.net/qq_21125183/article/details/80708142 2018-06-15 19 ...
- [C#] - 从 HTML 代码中 转换 / 提取 可读文字(PlainText)的方法
背景 在做网页数据分析的时候,我们关注的部分是内容,可以过滤掉HTML标签.Javascript.CSS等代码. 目标输入 <b>Hello World.</b><br/ ...
- Quartz.Net—JobBuilder
JobBuilder JobBuilder是一个建造者模式,链式建造.通过静态方法构建一个JobBuilder实例,然后再调用类方法Build()创建一个IJobDetail的实现. 1.静态方法 p ...
- hadoop常见问题收集
hadoop 搭建 常用命令记录 快捷键安装在/user/local/bin目录下 nano 文件名 ctrl + k 剪切一行 ctrl + o 保存并重命名,不重命名直接enter ctrl + ...
- java当中JDBC当中请给出一个sql server的dataSource的helloworld例子
[学习笔记] 4. sql server的dataSource的helloworld: import java.sql.*;import javax.sql.*;import net.sourcef ...
- 分布式自增ID算法snowflake
分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的,作为索引非常不好,严重影响性能. ...
- Java 发送http GET/POST请求
最近项目里面需要用到Java发送http请求,由于发送https请求有点复杂,暂时不考虑 HttpURLConnection HttpURLConnection是一种多用途.轻量极的HTTP客户端,使 ...
- Python 容器用法整理
本文整理几种基本容器:列表.元组.字典和集合的用法和collections中几种已经预先实现的容器数据结构:namedtuple(),双向链表deque,ChainMap,Counter,Ordere ...
- Linux的常用命令及快捷键
常用快捷键 1 终端中的快捷键 ctrl+a 回到行首,ctrl+e回到行尾 ctrl+n 代码候选 常用命令