原文网址:less与sass(scss)的区别_IT利刃出鞘的博客-CSDN博客
简介
本文介绍less与sass(scss)的区别。
编译环境
less环境较sass简单
less:通过客户端处理的(基于JavaScrip)。
法1:引入less.js来处理代码输出css到浏览器。
法2:开发环节使用less,编译成css文件放在项目中。一般用 nmp或yarn将less和less-loader添加到项目里。
sass:通过服务端处理。相比less解析速度会快一点
需要安装Ruby环境。
上手难度
less:容易上手
sass:上手难度略高
语法
less:变量符是@
sass:变量符是$
变量的作用域也不一样
less:{}内定义的变量为局部变量。
Sass3.4.0之前:没有局部变量,满足就近原则。(3.4.0之后已修复)
功能
条件语句
less
不支持条件语句
scss
支持if{}else{}、for{}循环语句
/** if else */
@if lightness($color) > 30% {
/** do....*/
} @else {
/** do....*/
}
/** 循环*/
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid red;
}
}
输出设置
less
没有输出设置
sass
提供4中输出选项:nested, compact, compressed 和 expanded
- nested:嵌套缩进的css代码
- expanded:展开的多行css代码
- compact:简洁格式的css代码
- compressed:压缩后的css代码
引入外部css
less
引用外部文件和css中的@import没什么差异。
scss
scss引用的外部文件命名必须以_开头,文件名如果以下划线_开头的话,sass会认为该文件是一个引用文件,不会将其编译为css文件。
如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。
// 源代码:
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后:
h1 {
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}