简介
本文介绍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{}循环语句
输出设置
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。