Sass(Scss)、Less的区别与抉择 + 根本应用
Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其根本思维是，用一种专门的编程语言为 CSS 减少了一些编程的个性，将 CSS 作为指标生成文件，而后开发者就只有应用这种语言进行 CSS 的编码工作。
为什么要应用 CSS 预处理器
起因
- CSS 仅仅是一个标记语言，不能够自定义变量，不能够援用。
- 语法不够弱小，比方无奈嵌套书写，导致模块化开发中须要书写很多反复的选择器。
- 没有变量和正当的款式复用机制，使得逻辑上相干的属性值必须以字面量的模式反复输入，导致难以保护。
CSS 预处理器的益处
- 提供 CSS 层缺失的款式层复用机制
- 缩小冗余代码
- 进步款式代码的可维护性
CSS 预处理器的毛病
- 开发工作流中多了一个环节，调试也变得更麻烦。
- 预编译很容易造成后辈选择器的滥用
何时应用 CSS 预处理器
- 零碎级框架开发或者比拟大型简单的款式设计时
- 继续保护集成时
- 复用型组件开发时
Sass/Scss 与 Less 比照
根本介绍
Sass/Scss
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最后由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是一种动静款式语言，Sass 语法属于缩排语法，比 CSS 多出变量、嵌套、运算、混入(Mixin)、继承、色彩解决、函数等性能，更容易浏览。
在开发最后版本之后，Weizenbaum 和 Chris Eppstein 持续通过 SassScript 来持续裁减 Sass 的性能。SassScript 是一个在 Sass 文件中应用的小型脚本语言。Sass 是一个将脚本解析成 CSS 的脚本语言，即 SassScript。
Sass 的缩排语法，对于写惯 CSS 前端的 Web 开发者来说很不直观，也不能将 CSS 代码退出到 Sass 外面，因而 Sass 语法进行了改进，Sass3 就变成了 Scss(Sassy CSS) 。与原来的语法兼容，只是用 {} 取代了原来的缩进。所以 Sass 包含两套语法，通常状况下，这两套语法通过 .sass 和 .scss 两个文件扩展名辨别开。
Less
Less 是 CSS 预处理器，也是一种动静款式语言，它为 CSS 减少了变量、嵌套、运算、混入(Mixin)、函数等性能，让 CSS 更易保护、不便制作主题与裁减。Less 能够运行在 Node.js、浏览器(反对 IE6+、Webkit、Firefox)和 Rhino 平台上，网上有很多第三方工具帮忙你编译 Less 源码。
实质上，Less 蕴含一套自定义的语法及一个解析器，用户依据这些语法定义本人的款式规定，这些规定最终会通过解析器，编译生成对应的 CSS 文件。Less 并没有丢掉 CSS 原有的语法与个性，更不是用来取代 CSS 的，而是在现有 CSS 语法的根底上，为 CSS 退出动静语言的个性。
Less 以 CSS 语法为根底，又借用了很多咱们熟知编程式语言的个性，这对于咱们开发人员来讲学习老本简直能够疏忽，它在保留 CSS 语法的根底上扩大了更多实用的性能，为咱们提供了一种新的编写样式表的办法，咱们能够依据咱们的我的项目个性抉择应用 Less 的局部个性，咱们只需用很少的老本就能够换了很大的回报。
一句话说就是 Less is more，借助 Less 能够更便捷的进行 Web 开发，Write more！
相同之处
- 都属于 CSS 预处理器
- 目标是使得 CSS 开发更灵便和更弱小
- 扩大的 CSS 性能个性基本相同
区别之处
- Sass 是在服务端解决的，以前是 Ruby，当初是 Dart-Sass 或 Node-Sass，而 Less 是在客户端解决的，须要引入
less.js来解决 Less 代码输入 CSS 到浏览器，也能够在开发服务器将 Less 语法编译成 CSS 文件，输入 CSS 文件到生产包目录，有npm less、Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。 - 变量符不一样，Less 是
@，而 Sass 是$。 - Sass 的性能比 Less 弱小，根本能够说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器，为 CSS 退出动静语言的个性。
- Less 绝对 Sass 清晰明了，装置便捷，易于上手，对编译环境要求比拟宽松，适宜小型我的项目。Sass 更实用于简单或大型项目。
- 输入设置，Less 没有输入设置，Sass 提供 4 种输入选项：
nested/compact/compressed/expanded，输入款式的格调能够有 4 种抉择，默认为nested。 - Sass 反对条件语句，能够应用
if...else.../for...while...each循环等，Less 不反对。 - Sass 援用的内部文件命名必须以
_结尾，Sass 会认为以_文件是一个援用文件，不会将其编译为 CSS 文件。Less 援用内部文件和 CSS 中的@import没什么差别。 - Less 中的变量运算能够带或不带单位，Sass 须要带单位。
- Sass 有工具库 Compass，简略说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的根底上，封装了一系列有用的模块和模板，补充强化了 Sass 的性能。Less 有 UI 组件库 Bootstrap，Bootstrap 是 Web 前端开发中一个比拟有名的前端 UI 组件库，Bootstrap 的款式文件局部源码就是采纳 Less 语法编写。
抉择与比拟
| 类别 | Sass/Scss | Less |
|---|---|---|
| 环境 | Dart/其余 | JavaScript |
| 应用 | 简单 | 简略(相对而言) |
| 性能 | 简单 | 简略(相对而言) |
| 解决 | 服务端 | 能够在 Node.js 或浏览器(客户端)运行 |
| 后缀 | .sass/.scss | .less |
目前大部分的实现都是随着前端我的项目一起打包构建，只在学习或演示的时候才辨别应用环境，所以不必在意解决机制，以上只是单纯的比照两者自身。
Sass/Scss 与 Less 相比，两者都属于 CSS 预处理器，性能上大同小异，都是应用相似程序式语言的形式书写 CSS，都具备变量、混入、嵌套、函数等个性，最终目标都是不便 CSS 的书写及保护。Less 和 Sass/Scss 互相促进相互影响，只是相比之下 Less 更靠近 CSS 语法且更容易应用上手。
因而对于我集体来说，在理论开发中更偏向于抉择 Less。
Sass/Scss、Less应用与语法
变量
// Less@width: 10px;@height: @width + 10px;@test: left;#header { width: @width; height: @height; margin-@{test}: 5px;}/* ------------------------------ */// Sass (老版本 Sass 应用 !，不是 $。)$blue: #1875e7; div { color: $blue;}$side: left;$my-radius: 5px;.rounded { border-#{$side}-radius: $my-radius;}运算
// Less// 所有操作数被转换成雷同的单位(乘法和除法不作转换)@conversion-1: 5cm + 10mm; // 后果是 6cm@conversion-2: 2 - 3cm - 5mm; // 后果是 -1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // 后果是 4px// example with variables@base: 5%;@filler: @base * 2; // 后果是 10%@other: @base + @filler; // 后果是 15%@base: 2cm * 3mm; // 后果是 6cm// 色彩运算@color: #224488 / 2; //后果是 #112244background-color: #112244 + #111; // 后果是 #223355// 为了与 CSS 放弃兼容，calc() 并不对数学表达式进行计算，然而在嵌套函数中会计算变量和数学公式的值。@var: 50vh/2;width: calc(50% + (@var - 20px)); // 后果是 calc(50% + (25vh - 20px))/* ------------------------------ */// Sass$var: 100px;body { margin: (14px/2); top: 50px + 100px; right: $var * 10%;}嵌套
// Less#header { color: black; width: 600px; .navigation { font-size: 12px; } .logo { width: 300px; } &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } &-bottom { background-image: url("header-bottom.png"); } @media (min-width: 1280px) { width: 800px; }}/* ------------------------------ */// Sass。。。跟下面大同小异。。。正文
// Less/* 一个块正文，源文件与编译后失常默认文件都保留。 * style comment! */@var: red;// 这一行被正文掉了，仅保留源文件中！@var: white;/* ------------------------------ */// Sass/* 一个块正文，源文件与编译后失常默认文件都保留。 * style comment! */$var: red;// 这一行被正文掉了，仅保留源文件中！$var: white;/*! 重要正文！压缩模式也会保留*/混入(Mixin)
// Less// .bordered 类所蕴含的属性就将同时呈现在 #menu a 和 .post a 中了。// 留神，你也能够应用 #ids 作为 mixin 应用。.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered();}.post a { color: red; .bordered();}/* ------------------------------ */// Sass@mixin bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; @include bordered;}.post a { color: red; @include bordered;}本义
// Less@min768: ~"(min-width: 768px)"; // 从 Less 3.5 开始，能够简写为：@min768: (min-width: 768px);.element { @media @min768 { font-size: 1.2rem; }}// 编译后@media (min-width: 768px) { .element { font-size: 1.2rem; }}函数
// Less@base: #f04615;@width: 0.5;.class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8);}// ui 给到的个别都是 px，能够应用此函数转换。.rem(@name, @px) { @{name}: unit(@px / 100, rem);}.test(@a, @b) { @width: @a + @b;}@my-radius: 10px;.border_radius(@v, @h, @radius: @my-radius){ box-@{v}-@{h}-radius: @my-radius;}.good{ .test(20px, 30px); .border_radius(top, left); .border_radius(bottom, right, 5px); width: @width; }/* ------------------------------ */// Sass@function double($n) { @return $n * 2;}#sidebar { width: double(5px);}优雅的动静获取元素数据
// 除了以下办法可应用 less 的 plugin// https://lesscss.org/features/#plugin-atrules-feature// less 应用 js （未测试，纯百度到的栗子而已！）.calcHeight() { // 3.5+ 可省略 ~ @functions: ~`(function() { this.calcHeight = function() { return document.body.clientHeight - document.getElementById('test').height; }; })()`;}// It is hacky way to make this function will be compiled preferentially by less// resolve error: `ReferenceError: colorPalette is not defined`// https://github.com/ant-design/ant-motion/issues/44.calcHeight();.test { width: `calcHeight()`;}// 或者奇妙应用 css 的 var() 函数或者 attr() 函数// var() 函数必须要获取内联属性，即必须要是在 style 中的属性，且必须要加上 -- 前缀来表明这是一个自定义属性，否则浏览器无奈解析。// attr() 函数须要获取的标签中的属性，也能够是自定义属性, 然而必须要是在标签中的属性。// <div self-property="attr-value" style="--test: 'var-value'"></div>// attr(self-property) 或 var(--test)// 所以咱们就能够曲线救国，实现下面的需要。// 先在 JS 代码中应用 [document.body.clientHeight - document.getElementById('test').height] 获取到数据，再填到页面中标签属性或 style 属性中。// 在 CSS 中定义变量 $test: var(--参数名) 或 attr(参数名);// 或 @test: var(--参数名) 或 attr(参数名);// 最初间接应用.test { width: @test; // Less width: $test; // Sass width: calc(100% - #{$test}); // Sass}继承
// Lessnav ul { &:extend(.inline); background: blue;}.inline { color: red;}// OUTPUTnav ul { background: blue;}.inline, nav ul { color: red;}// https://lesscss.org/features/#extend-feature命名空间和拜访符
// Less (利用此个性也可变相实现继承)#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... }}#header a { color: orange; #bundle.button(); // 还能够书写为 #bundle > .button 模式}// 留神：如果不心愿它们呈现在输入的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间前面（例如 #bundle().tab）。映射
// Less#colors() { primary: blue; secondary: green;}.button { color: #colors[primary]; border: 1px solid #colors[secondary];}// OUTPUT.button { color: blue; border: 1px solid green;}@sizes: { mobile: 320px; tablet: 768px; desktop: 1024px;}.navbar { display: block; @media (min-width: @sizes[tablet]) { display: inline-block; }}作用域
// Less@var: red;#page { @var: white; #header { color: @var; // white }}@var: red;#page { #header { color: @var; // white } @var: white;}导入
// Less@import "library"; // .less 能够省略后缀@import "test.css";Sass if-else
$color: red;p { color: $color; @if $color == red { background-color: #000; } @else { background-color: #fff; }}Sass for/while/each
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; }}$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); }}Sass 继承
.class1 { border: 1px solid #ddd;}.class-sub { @extend .class1; font-size: 120%;}参考起源
- 简书