LESS 和 SCSS 有什么区别？
LESS 和 SCSS 的区别
LESS 和 SCSS 都属于 CSS 预处理器的范畴，也就是 CSS 的超集，但是两者的语法、如何使用和具体的功能实现还是有差异的。
下面我试着以代码示例的方式给大家演示一下两者的几个常见区别。
声明和使用变量
LESS 采用 @ 符号，SCSS 采用 $ 符号。
在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。
LESS：
@link-color: #428bca;
#main {@width: 5em;width: @width;
}SCSS：
$link-color: #428bca;
#main {$width: 5em;width: $width;
}变量插值（Variable Interpolation）
LESS 采用 @{xxxx} 的形式，SCSS 采用 ${xxxx} 的形式。
示例一：使用变量插值作为 CSS 选择器
LESS：
// Variables
@my-selector: banner;// Usage
.@{my-selector} {font-weight: bold;line-height: 40px;margin: 0 auto;
}SCSS：
// Variables
$my-selector: banner;// Usage
.#{$my-selector} {font-weight: bold;line-height: 40px;margin: 0 auto;
}Mixins 的定义、使用及参数
定义一个 Mixin
LESS 使用 dot 符号（也就是句点）来定义一个 Mixin，并且可以把任意的 CSS 规则作为 Mixin 使用；SCSS 使用 @mixin 指令来定义一个 Mixin。
示例 – 来自 BootStrap 的 alert-variant Mixin 的定义
LESS：
.alert-variant(@background; @border; @text-color) {background-color: @background;border-color: @border;color: @text-color;hr {border-top-color: darken(@border, 5%);}.alert-link {color: darken(@text-color, 10%);}
}SCSS：
@mixin alert-variant($background, $border, $text-color) {background-color: $background;border-color: $border;color: $text-color;hr {border-top-color: darken($border, 5%);}.alert-link {color: darken($text-color, 10%);}
}使用 Mixin
LESS 仍是使用 dot 符号（句点），如果 Mixin 没有参数的话可以省略后面的圆括号；SCSS 使用 @include 指令来引入一个 Mixin。
示例 – 引入一个名为 center-block 的 Mixin。
LESS：
.center-block() {display: block;margin-left: auto;margin-right: auto;
}.a {.center-block;
}SCSS：
@mixin center-block() {display: block;margin-left: auto;margin-right: auto;
}.a {@include center-block;
}参数形式
如果存在多个参数的话，LESS 使用分号分隔；SCSS 使用逗号分隔。两者都支持为参数设置默认值。
示例 – 来在 BootStrap 的 form-control-validation Mixin 的使用
LESS：
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);.box-shadow(@shadow) {-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow;
}.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {// Color the label and help text .help-block,.control-label,.radio,.checkbox,.radio-inline,.checkbox-inline,&.radio label,&.checkbox label,&.radio-inline label,&.checkbox-inline label {color: @text-color;}// Set the border and box shadow on specific inputs to match .form-control {border-color: @border-color;.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus {border-color: darken(@border-color, 10%);@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);.box-shadow(@shadow);}}// Set validation states also for addons .input-group-addon {color: @text-color;border-color: @border-color;background-color: @background-color;}// Optional feedback icon .form-control-feedback {color: @text-color;}
}// Feedback states
.has-success {.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.has-warning {.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.has-error {.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}SCSS：
$state-success-text: #3c763d;
$state-success-bg: #dff0d8;
$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);$state-info-text: #31708f;
$state-info-bg: #d9edf7;
$state-info-border: darken(adjust_hue($state-info-bg, -10), 7%);$state-warning-text: #8a6d3b;
$state-warning-bg: #fcf8e3;
$state-warning-border: darken(adjust_hue($state-warning-bg, -10), 5%);$state-danger-text: #a94442;
$state-danger-bg: #f2dede;
$state-danger-border: darken(adjust_hue($state-danger-bg, -10), 5%);@mixin box-shadow($shadow) {-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow;
}@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {// Color the label and help text .help-block,.control-label,.radio,.checkbox,.radio-inline,.checkbox-inline,&.radio label,&.checkbox label,&.radio-inline label,&.checkbox-inline label {color: $text-color;}// Set the border and box shadow on specific inputs to match .form-control {border-color: $border-color;@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus {border-color: darken($border-color, 10%);$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);@include box-shadow($shadow);}}// Set validation states also for addons .input-group-addon {color: $text-color;border-color: $border-color;background-color: $background-color;}// Optional feedback icon .form-control-feedback {color: $text-color;}
}// Feedback states
.has-success {@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}
.has-warning {@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}
.has-error {@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}函数的使用
字符串函数
LESS 使用 e 或者 ~”xxxx” 这种语法进行 CSS 转义；SCSS 本身并没有提供 CSS 转义的函数，中要达到相同的效果可以使用变量插值（Variable Interpolation）实现。
示例 – CSS 转义
LESS：
@input-border-focus: #66afe9;.box-shadow(@shadow) {-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow;
}.form-control-focus(@color: @input-border-focus) {@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);&:focus {border-color: @color;outline: 0;.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");}
}.form-control {.form-control-focus();
}SCSS：
$input-border-focus: #66afe9;@mixin box-shadow($shadow) {-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow;
}@mixin form-control-focus($color: $input-border-focus) {$color-rgba: rgba(red($color), green($color), blue($color), .6);&:focus {border-color: $color;outline: 0;@include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});}
}.form-control {@include form-control-focus();
}颜色函数
调节色相，LESS 使用名为 spin() 的函数；SCSS 使用名为 adjust_hue() 的函数。
示例 – 调节色相
LESS：
@state-success-border: darken(spin(@state-success-bg, -10), 5%);SCSS：
$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);数学函数
LESS 提供了一些 SCSS 中并不具备的数学函数，在 SCSS 中只能通过自定义函数实现，然后通过 node-sass 的接口传递给编译器。
示例 – 数学函数
SCSS：
// rotate for ie8 and blow
@mixin ie-rotate($rotation) {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
}// rotate for ie8 and blow
// degrees unit
@mixin ie-rotate-via-degrees($degrees) {/* IE6-IE8 */$radians: parseInt("#{$degrees}") * PI() * 2 / 360;$costheta: cos("#{$radians}");$sintheta: sin("#{$radians}");$negsintheta: "#{$sintheta}" * -1;-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";zoom: 1;:root & {filter: none;}
}// support rotate for all browsers
@mixin cross-rotate($degrees) {@include rotate($degrees);@include ie-rotate-via-degrees($degrees);
}// Placeholder text
@mixin placeholder($color: $input-placeholder-color) {// Firefox&::-moz-placeholder {color: $color;opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526}// Internet Explorer 10+&:-ms-input-placeholder {color: $color;}// Safari and Chrome&::-webkit-input-placeholder {color: $color;}
}上述 Math 实现所需的 JS 文件：
module.exports = {'parseInt($str)': function (str) {return parseInt(str, 10);},'Math.sin($degree)': function (degree) {return Math.sin(degree);},'Math.cos($degree)': function (degree) {return Math.cos(degree);},'Math.PI': Math.PI
}有关函数的区别还有：
- LESS 的 fade() 函数在 SCSS 中只能使用 rgba() 之类的实现，因为 SCSS 也没有这个函数。
@import 的实现
像 @media, @import 这些带 @ 符号的在 CSS 中都称为 At-rules。
值的一提的是 LESS 和 SCSS 对@import 实现的区别。
LESS 的 @import 对文件扩展名的处理：
- 如果扩展名为 .css，将文件识别为 CSS 文件
- 其他任何扩展名都将被作为 LESS 文件处理
- 没有扩展名会被附加一个 .less 的扩展名并且作为 LESS 文件处理
SCSS 的 @import 实现对文件扩展名的处理：
- 默认情况下，SCSS 的 @import 实现会试图寻找一个 Sass 文件进行导入。
- 但是在下列情况出现时，@import 会直接被编译为 CSS 的 @import at-rule
- 文件扩展名是 .css
- 文件以 http:// 开头
- 文件名是一个 url()
- @import 具有媒体查询
- SCSS 按约定认为下划线开始的文件是内联文件，不会被编译为单独的 CSS 文件输出。
示例 – 使用 @import
LESS：
@import "foo";
@import "bar.less";
@import "foo.php"; // 当成 LESS 文件处理
@import "foo.css";SCSS：
@import "foo";
@import "foo.scss";都会导入 foo.scss 文件。
其他区别
引用父选择器 & 符号的使用
LESS 和 SCSS 均使用 & 符号表示父选择器，但是 SCSS 的 & 符号只能出现在一个组合选择器的开始位置，LESS 则没有这个限制。
示例 – & 选择器
LESS：
.bg-variant(@color) {background-color: @color;a&:hover,a&:focus {background-color: darken(@color, 10%);}
}SCSS：
a {font-weight: bold;text-decoration: none;&:hover { text-decoration: underline; }body.firefox & { font-weight: normal; }
}SCSS 不支持 LESS 中的 CSS Guard 功能，比如 if, when …，在 SCSS 中需要换种方式实现。
LESS 示例：
.my-optional-style() when (@my-option = true) {button {color: white;}
}
.my-optional-style();Note：SCSS 需要换一种写法实现同样的功能。
SCSS 支持 !default，一般是用在基础 Rule 的声明中，告诉使用者这是可以被覆盖的。
SCSS 示例：
$primary: $blue !default;
$secondary: $gray-600 !default;有关 extend
SCSS 不像 LESS 一样默认可以把 rule 作为 Mixin 使用，但是 SCSS 有类似的 @extend 指令；而 LESS 的 extend 语法看起来则像是伪类一样。
示例：
LESS：
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}SCSS ：
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}集成 JavaScript 功能的方式
LESS 使用 @functions 指令，可以把 js 代码直接放到 ~
xxx中间即可；SCSS 可以把 JS 代码放到一个单独的文件中，然后使用 node-sass编译的时候指定参数传给 node-sass。
LESS 示例： ant-design/tinyColor.less
SCSS 示例：
kant/Math.js
编译命令： node-sass --output-style expanded --source-map true --precision 6 --functions components/style/custom.js components/button/style/index.scss components/button/style/index.css
最后两个：
- LESS 支持 lazy evaluation，但是 SCSS 不支持，所以在 LESS 中可以先使用再定义，但是在 SCSS 中一定要先定义再使用。
- SCSS 是不支持 Mixin 重载的, 也就是说 LESS 可以有同名但是参数个数不同的几个 Mixins, SCSS 同样名字的 Mixin 只能有一个.
LESS 和 SCSS 有什么区别？相关推荐
- sass、scss、less区别
Sass (Syntactically Awesome StyleSheets),后缀名为.sass,是由ruby语言编写的一款css预处理语言 SCSS (Sassy CSS),后缀名为 .scss ...
- Css、less和Sass（SCSS）的区别
随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,less和Sass就是其中两种,下面我们就一起来看看它们到底有何区别. 背景 CSS(Cascading Style Sheets,层叠样式表 ...
- Sass 和 SCSS 有什么区别？
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: ...
- Sass和SCSS有什么区别？
Sass和SCSS其实是同一种东西,我们平时称之为Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass是以".sass"后缀为扩展名,而SCSS是以".scs ...
- SASS 和 SCSS 的区别
原文 Difference Between SASS and SCSS SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计.C ...
- SCSS和Sass有什么区别？
根据我的阅读,Sass是一种语言,它通过变量和数学支持使CSS更加强大. SCSS有什么区别? 是否应该使用相同的语言? 类似? 不同? #1楼 基本区别是语法. 尽管SASS的语法宽松,带有空格,没 ...
- SCSS 和 Sass 有什么区别？
问: 从我一直在阅读的内容来看,Sass 是一种通过变量和数学支持使 CSS 更强大的语言. 与 SCSS 有什么区别?它应该是同一种语言吗?相似的?不同的? 答1: huntsbot.com – 程 ...
- Sass、Scss、Less和Stylus区别总结
Sass.Scss.Less.Stylus CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架.本文便总结下 Sass.Less CSS.Stylus这三个预处理器 ...
- .scss和.css的区别,css - SCSS和Sass有什么区别？
css - SCSS和Sass有什么区别? 从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言. 与SCSS有什么区别? 它应该是同一种语言吗? 类似? 不同? bruno ...
最新文章
- DNS Tunnel判定方法
- 702:Crossing River （贪心）
- 手动安装K8s第六节：node节点部署-kubelet
- why-and-howto-calculate-your-events-per-second
- Leetcode 283. 移动零 解题思路及C++实现
- 测试mysql安装成功_MySQL安装之“测试”
- 2020年阿里云边缘计算和CDN的关键词
- Struts2与Servlet之间的关系
- C++ 文本文件的读取和写入
- 【clickhouse】ClickHouse中的低基数（LowCardinality）类型
- 39.Linux/Unix 系统编程手册(下) -- 能力
- 约瑟夫环c语言不用链表,C语言基于循环链表解决约瑟夫环问题的方法示例
- 硬盘分区表错误与解决办法
- kali linux 初始密码
- bzoj4987 Tree 分类讨论+树形背包
- s8 android调用相机,android-扎根的Galaxy S8上的设备所有者
- 较于微信红包，支付宝AR红包是个好产品吗？
- 第4篇 Fast AI深度学习课程——深度学习在回归预测、NLP等领域的应用
- tf.Variable() 和 tf.get_variable()，tf.name_scope() 和 tf.variable_scope()
- FBI找到邪恶帮手?据称可分分钟破解iPhone