sass主流版本

Ⅰ Node node-sass sass-loader 版本对应关系

当前已知 node-sass 与 node 版本对应如下：

node-sass 和 sass-loader 的困册对应关系未找罩尺段到官方说明，物誉附上常见版本对应关系：

Ⅱ 解决项目中 sass 和 less并存需要统一的问题

目前场景是接到的项目中没有统一样式处理，例如不同模块，有的使用了 sass ，有的使用了less。

我们知道sass是成熟、稳定、强大的 CSS 预处理器，而 SCSS 是 Sass3 版本当中引入的新语法特性，完全兼容 CSS3 的同时继承了Sass强衫喊大的动态功能。

而Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。或斗野

两者各有千秋，没有特殊洁癖个人觉得均可，但是因为项目中使用了 ant-desgin-vue, 而它本身是使用less的，于是决定项目中还是统一使用 less 吧。

1、首先移除 node-sass 和 sass-laoder

2、将所有的 lang="scss" 替换成 lang="less"

3 、变量销胡控制定义： 将 $ 更改为 @

4、.scss 后缀文件改为 .less
例如 下面引入的 chart.scss 文件，应该改为 chart.less

Ⅲ Sass平台是什么，现在有什么主流的sass平台

saas既软件作为服务，把软件作为在线服务供企业使用，比如金蝶云。

Ⅳ sass和scss区别

SCSS 是 Sass 3 引入新的语游仔法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。可以简单理解为scss是sass的一个升级版本，完全兼容sass之前的功源誉能，又有了些新增能力。神裂汪语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。

Ⅳ 现在sass软件有什么好做的

1、安装sass

1.安装ruby

因为sass是用ruby语言写的，所以需要安装ruby环境
打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径

• Add Ruby executables to your PATH
  安装完成之后继续下一步操作

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具，类似于nodejs 的npm

• gem install sass1



这个时候如果不翻墙的话是会出问题的，因为：
由于国内网络原因（你懂的），导致rubygems.org存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了

• $ gem sources --remove https://rubygems.org/


• $ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】


• $ gem sources -l


• *** CURRENT SOURCES ***


• https://ruby.taobao.org


• # 请确保只有 ruby.taobao.org


• $ gem install sass1234567



安装好之后执行sass -v就可以看到sass的版本了
实在实在不行，就安装离线文件吧,但是失败率也很高
gem install ./…/sass-3.4.22.gem

2、编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译
例如：

• sass scss/a.scss:css/a.css1



sass 后面写要编译的sass文件的路径，‘：’后面写的是
要输出的目录及名字

• 需要注意的是：必须有这个文件夹才能在里面生成css
  这样的话写一句执行一次编译一次有些太麻烦
  可以开启一个watch来监听文件变化来进行编译

• sass --watch scss:css1



–watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了，大家i自己去看一下
gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less
这里是网址，点击查看

3、sass四种风格

sass编译的格式

sass编译输出的css有四种格式

• nested 嵌套

• compact 紧凑

• expanded 扩展

• compressed 压缩

这些样式会影响输出的css的格式
简单介绍一下：
css默认输出的嵌套

• ul{


• font-size:15px;


• li{


• list-style:none;


• }


• }123456



—》

• ul {


• font-size: 15px; }


• ul li {


• list-style: none; }1234



紧凑compact
在编译的时候需要执行

• sass --watch scss:css --style compact1



这个时候输出的代码就是

• ul { font-size: 15px; }


• ul li { list-style: none; padding: 5px; }12



compressed 压缩
在编译的时候需要执行

• sass --watch scss:css --style compressed1



—>

• ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}1



expanded 扩展
更像是平时写的css一样
在编译的时候需要执行

• sass --watch scss:css --style expanded1



—>

• ul {


• font-size: 15px;


• }


• ul li {


• list-style: none;


• animation: all 0.3s;


• }1234567



compressed 压缩
更像是平时写的css一样
在编译的时候需要执行

• sass --watch scss:css --style compressed1



—>

• .a{width:100px;height:100px;border:1px solid red}.a .b{background:red}1



4、sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法

两个版本的区别

• 后缀名不同 .sass和.scss

• 语法不同，请看下面
  新版：

• /*新版本


• 多行文本注释*/


• //新版本


• //单行文本注释


• @import "base";


• @mixin alert{


• color:red;


• background:blue;


• }


• .alert-warning{


• @include alert;


• }


• ul{


• font-size:15px;


• li{


• list-style:none;


• }


• }123456789101112131415161718



老版本：

• /*新版本


• 多行文本注释


• //新版本


• 单行文本注释


• @import "base"


• =alert


• color:red


• background:blue


• .alert-warning


• +alert


• ul


• font-size:15px


• li


• list-style:none1234567891011121314



5、变量、嵌套、混合、继承拓展

变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便

变量的使用

可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如

• $primary-color:#ff6600;


• $primary-border:1px solid $primary_color;


• div.box{


• background:$primary-color;


• }


• h1.page-header{


• border:$primary-border;


• }12345678



—》

• div.box {


• background: #ff6600;


• }


• h1.page-header {


• border: 1px solid #ff6600;


• }123456



嵌套的使用

合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：

• .nav {


• height: 100px;


• }


• .nav ul {


• margin: 0;


• }


• .nav ul li {


• float: left;


• list-style: none;


• padding: 5px;


• }1234567891011



在sass里我们可以这样写

• .nav{


• height:100px;


• ul{


• margin:0;


• li {


• float:left;


• list-style:none;


• padding:5px;


• }


• }


• }1234567891011



大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写

• .nav{


• height:100px;


• a{


• color:#fff;


• :hover{


• color:#ff6600;


• }


• }


• }123456789



在里面就会出现这样的情况

• .nav a :hover {


• color: #ff6600;


• }123



我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类
例如：

• .nav{


• height:100px;


• a{


• color:#fff;


• &:hover{


• color:#ff6600;


• }


• }


• }123456789



这样就好了，下面来个完整的代码：

• .nav{


• height:100px;


• ul{


• margin:0;


• li{


• float:left;


• list-style:none;


• padding:5px;


• }


• a{


• display:block;


• color:#000;


• &:hover{


• color:#f60;


• background:red;


• }


• }


• }


• & &-text{


• font-size:15px;


• }


• }



-----》

• .nav {


• height: 100px;


• }


• .nav ul {


• margin: 0;


• }


• .nav ul li {


• float: left;


• list-style: none;


• padding: 5px;


• }


• .nav ul a {


• display: block;


• color: #000;


• }


• .nav ul a:hover {


• color: #f60;


• background: red;


• }


• .nav .nav-text {


• font-size: 15px;


• }



嵌套属性

我们可以把一些个复合属性的子属性来嵌套编写，加快编写速度，例如

• body{


• font:{


• family:Helvitica;


• size:15px;


• weight:bold;


• }


• }


• .nav{


• border:1px solid red{


• left:none;


• right:none;


• }


• }


• .page-next{


• transition:{


• property:all;


• delay:2s;


• }


• }12345678910111213141516171819



-----》

• body {


• font-family: Helvitica;


• font-size: 15px;


• font-weight: bold;


• }


• .nav {


• border: 1px solid red;


• border-left: none;


• border-right: none;


• }


• .page-next {


• transition-property: all;


• transition-delay: 2s;


• }1234567891011121314



mixin 混合

你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字，类似于js里的函数定义方法如下

• @mixin 名字(参数1，参数2...){


• ...


• }123



使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

• @mixin alert {


• color:#f60;


• background-color:#f60;


• a{


• color:pink;


• }


• &-a{


• color:red;


• }


• }


• .alert-warning{


• @include alert;


• }12345678910111213



-----》

• .alert-warning {


• color: #f60;


• background-color: #f60;


• }


• .alert-warning a {


• color: pink;


• }


• .alert-warning-a {


• color: red;


• }12345678910



刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

• 形参的名字前要加$

• 传参的时候只写值的话要按顺序传

• 传参的时候不想按顺序的话需要加上形参名字
  例如：

• @mixin alert($color,$background) {


• color:$color;


• background-color:$background;


• a{


• color:darken($color,10%);//把颜色加深百分之十


• }


• }


• .alert-warning{


• @include alert(red,blue);


• }


• .alert-info{


• @include alert($background:red,$color:blue);


• }12345678910111213



------》

• .alert-warning {


• color: red;


• background-color: blue;


• }


• .alert-warning a {


• color: #cc0000;


• }


• .alert-info {


• color: blue;


• background-color: red;


• }


• .alert-info a {


• color: #0000cc;


• }1234567891011121314



继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承
大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：

• .alert {


• padding:5px;


• }


• .alert a {


• font:{


• weight:bold;


• size:15px;


• }


• }


• .alert-info {


• @extend .alert;


• backgournd:skyblue;


• }12345678910111213



----》

• .alert, .alert-info {


• padding: 5px;


• }


• .alert a, .alert-info a {


• font-weight: bold;


• font-size: 15px;


• }


• .alert-info {


• backgournd: skyblue;


• }12345678910



partials

在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。
在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译

• 需要注意的是 partials的文件名前要加_

_base.sass :

• body{


• margin:0;


• padding:0;


• }1234



style.sass :

• @import "base";


• .alert {


• padding:5px;


• }


• .alert a {


• font:{


• weight:bold;


• size:15px;


• }


• }


• .alert-info {


• @extend .alert;


• backgournd:skyblue;


• }1234567891011121314



----------->

• body {


• margin: 0;


• padding: 0;


• }


• .alert, .alert-info {


• padding: 5px;


• }


• .alert a, .alert-info a {


• font-weight: bold;


• font-size: 15px;


• }


• .alert-info {


• backgournd: skyblue;


• }1234567891011121314



这样的话我们就可以把模块化的思想引入到sass里了

comment注释

sass里的注释有三种

• 多行注释

• 单行注释

• 强制注释
  多行注释：压缩后不会出现在css里 /*/
  单行注释: 不会出现在css里 //
  强制注释：压缩后也会出现在css里 /! */

6、数据类型与函数

数据类型

在sass里有数字、字符串、列表、颜色等类型
在cmd里 输入

• sass -i1



就会进入到交互模式，输入的计算可以马上得到结果
type-of()可以用来得到数据类型，如：

• type-of(5) -> number1



注意数字类型的可以包含单位，如：

• type-of(5px) -> number1



字符串类型：

• type-of(hello) -> string


• type-of('hello') -> string12



list类型：

• type-of(1px solid red) -> list


• type-of(5px 10px) -> list12



颜色：

• type-of(red) -> color


• type-of(rgb(255,0,0) -> color


• type-of(#333) -> color123



number 计算

• 2+9 -》10


• 2*8 -》16


• (8/2) ->4 //除法要写括号123



也可以包含单位

• 5px + 5px -> 10px


• 5px -2 ->3px


• 5px *2 ->10px


• 5px * 2px ->10px*px //这样就不对了哟


• （10px/2px） -> 5//除法单位取消


• 3+2*5px->13px123456



好吧，都是一些小学的数学题，很简单对吧

处理数字的函数

绝对值

• abs(10) -> 10;


• abs(10px) -> 10px;


• abs(-10px) -> 10px;123



四舍五入相关

• round(3.4)->3 //四舍五入


• round(3.6)->4


• ceil(3.2)->4 //向上取整


• ceil(3.6)->4


• floor(3.2)->3 //向下取整


• floor(3.9)->3


• percentage(600px/1000px) ->65% //百分之


• min(1,2,3) -> 1 //最小值


• max(2,3,4,5) -> 5 //最大值123456789



字符串相关

• //带引号和不带引号的字符串想加为带引号的字符串


• "a" + b ->"ab"


• a + "b" ->"ab"


• //字符串+数字


• "ab" + 1 ->"ab1"


• //字符串 - 和 / 字符串


• "a" - b ->"a-b"


• "a" / b ->"a/b"


• //注意字符串不能相乘123456789



字符串函数

大写：

• $word:"hello";


• to-upper-case($word) -> "HELLO"12



小写：

• $word:"Hello";


• to-lower-case($word) -> "hello"12



得到length：

• $word:"Hello";


• str-length($word) -> 512



得到字符串在字符串里的位置：

• $word:"Hello";


• str-index($word,"el") -> 212



字符串中插入字符串：

• $word:"Hello";


• str-insert($word,"aa",2) -> "Haaello"12



颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
分别表示的是 色相 0-360（deg） 饱和度 0-100% 明度 0-100%
例如：

• body {


• background-color:hsl(0,100%,50%);


• }


• -》


• body {


• background-color: red;


• }1234567


• body {


• background-color:hsl(60,100%,50%);


• }


• -》


• body {


• background-color: yellow;


• }1234567



也可以有透明哟

• body {


• background-color:hsl(60,100%,50%，0.5);


• }


• -》


• body {


• background-color: rgba(255,255,0,0.5);


• }1234567



颜色函数

lighten函数和darken函数可以把颜色加深或减淡，即调整明度，第一个参数为颜色，第二个参数为百分比，例如：

• $color:#ff0000;


• $light-color:lighten($color,30%);


• $dark-color:darken($color,30%);


• .a{


• color:$color;


• background:$light-color;


• border-color:$dark-color;


• }12345678



—》

• .a {


• color: #ff0000;


• background: #ff9999;


• border-color: #660000;


• }12345



saturate和desaturate函数可以调整颜色的纯度

• $color:hsl(0,50%,50%);


• $saturate-color:saturate($color,50%);


• $desaturate-color:desaturate($color,30%);


• .a{


• color:$color;


• background:$saturate-color;


• border-color:$desaturate-color;


• }12345678



–》

• .a {


• color: #bf4040;


• background: red;


• border-color: #996666;


• }12345



用transparentize来让颜色更透明
用opatify来让颜色更不透明

• $color:rgba(255,0,0,0.5);


• $opacify-color:opacify($color,0.3);


• $transparentize-color:transparentize($color,0.3);


• .a{


• color:$color;


• background:$opacify-color;


• border-color:$transparentize-color;


• }12345678



—》

• .a {


• color: rgba(255, 0, 0, 0.5);


• background: rgba(255, 0, 0, 0.8);


• border-color: rgba(255, 0, 0, 0.2);


• }12345



列表类型

在sass里，用空格或者逗号隔开的值就是列表类型
如：

• 1px solid red


• Courier,microsoft yahei12



列表函数

sass里的列表类似与数组

• 获取列表的长度


• length(5px 10x) 2


• 获取列表中的第几个元素


• nth(5px 10px,2) 10px


• 获取一个元素在一个列表里的下标


• index(1px solid red,solid) 2


• 给列表里加入新的元素


• append(5px 10px,5px) 5px 10px 5px


• 连接两个列表


• join(5px 10px,5px 0) 5px 10px 5px 012345678910



map类型

sass里的map类型类似与js里的object

• $map:(key1:value1,key2:value2,key3:value3);1



map 函数

• //定义一个map


• $color:(light:#ffffff,dark:#000000);


• //获取map 的length


• length($color) ->2


• //得到map里key对应的值


• map-get($color,dark) ->#000000


• 获取map里的所有键的列表


• map-keys($color) ->("light","dark") //列表类型


• 获取map里的所有值的列表


• map-values($color) -> ("#ffffff","#000000") //列表类型


• 判断map里是否含有这个key


• map-has-key($color,light) ->true


• 给map里添加键值对


• map-merge($color,(light-gray:#cccccc))


• ->(light:#ffffff,dark:#000000,light-gray:#cccccc)


• 移除map里的某个键值对


• map-remove($colors,light) ->(dark:#000000,light-gray:#cccccc)1234567891011121314151617



boolean类型

在sass里通过> < 比较得到的值就是布尔值 true 和false

• 5px>3px -> true


• 5px<2px -> false12



在sass里也可以有或 且 非
且：

• (5px > 3px) and (5px < 2px) -> false


• (5px > 3px) and (5px > 2px) -> true12



或：

• (5px > 3px) or (5px < 2px) -> true


• (5px < 3px) and (5px > 2px) -> false12



非：

• not(5px>3px) -> false1



interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值，例如

• $name:"info";


• $attr:"border";


• .alert-#{$name}{


• #{$attr}-color:red;


• }12345



---->

• .alert-info {


• border-color: red;


• }123



7、分支结构、循环结构、函数

分支结构

在sass里，可以使用@if让我们根据一些条件来应用特定的样式
结构：

• @if 条件 {




• }123



如果条件为真的话，括号里的代码就会释放出来
例如：

• $use-refixes:true;


• .rounded{


• @if $use-refixes {


• -webkit-border-radius:5px;


• -moz-border-radius:5px;


• -ms-border-radius:5px;


• -o-border-radius:5px;


• }


• border-radius:5px;


• }12345678910



—>

• .rounded {


• -webkit-border-radius: 5px;


• -moz-border-radius: 5px;


• -ms-border-radius: 5px;


• -o-border-radius: 5px;


• border-radius: 5px;


• }1234567



如果是另外一种情况

• $use-refixes:false;1



—》

• .rounded {


• border-radius: 5px;


• }123



if else在sass里的写法是：

• body{


• @if $theme == dark {


• background:black;


• } @else if $theme == light {


• background:white;


• } @else {


• background:gray;


• }


• }123456789



for循环

在sass里的for循环是这样的

• @for $var form <开始值> through <结束值> {


• ...


• }123



还有一种是

• @for $var form <开始值> to <结束值> {


• ...


• }123



注意，开始值和结束值的关系可以是升序也可以是倒序，但是每次只能+1或者-1
这两种有什么区别呢？
区别就是 from 1 to 4 的话是执行三次，i的变化是 1 2 3
from 1 through 4 的话是执行四次，i的变化是 1 2 3 4
如：
from to

• $columns:4;


• @for $i from 1 to $columns{


• .col-#{$i}{


• width:100% / $columns * $i;


• }


• }123456



—》

• .col-1 {


• width: 25%;


• }


• .col-2 {


• width: 50%;


• }


• .col-3 {


• width: 75%;


• }123456789



from through

• $columns:4;


• @for $i from 1 through $columns{


• .col-#{$i}{


• width:100% / $columns * $i;


• }


• }123456



—>

• .col-1 {


• width: 25%;


• }


• .col-2 {


• width: 50%;


• }


• .col-3 {


• width: 75%;


• }


• .col-4 {


• width: 100%;


• }123456789101112



each 遍历list类型

在sass里可以利用each方法来遍历咱们的list类型的数据
list类型在js里类似于数组，那么each类似于for in遍历，结构如下：

• @each $item in $list{


• ...


• }123



例如：

• $colors:success error warning;


• $map:(success:green,warning:yellow,error:red);


• @each $color in $colors{


• .bg-#{$color}{


• background:map-get($map,$color);


• }


• }1234567



—>

• .bg-success {


• background: green;


• }


• .bg-error {


• background: red;


• }


• .bg-warning {


• background: yellow;


• }123456789



@while 循环

在sass里，拥有@while循环，比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行，每次变化都是1，while设置循环结构的话更为灵活；
结构：

• @while 条件{




• }123



eq：

• $i:6;


• @while $i>0{


• .item-#{$i}{


• width:$i*5px;


• }


• $i:$i - 2;


• }1234567



注意：$i - 2 需要用空格隔开哟
---------》

• .item-6 {


• width: 30px;


• }


• .item-4 {


• width: 20px;


• }


• .item-2 {


• width: 10px;


• }123456789



自定义函数

在sass里也可以定义函数，并且也可以有返回值
结构：

• @function 名称 (参数1，参数2){


• @return ...


• }123



例如，我们做一个返回map里key对应的值的函数：

• $colors:(light:#ffffff,dark:#000000,gray:#555555);


• @function color($key){


• @return map-get($colors,$key);


• }


• body{


• background:color(light);


• color:color(dark);


• border-color:color(gray);


• }123456789



—》

• body {


• background: #ffffff;


• color: #000000;


• border-color: #555555;


• }

Ⅵ node-sass和dart-sass区别（以及解决M1芯片/arm芯片无法使用node-sass的问题）

我们先用vue-cli举例

在这时我们可以看到有两个sass解释器一个为node-sass，另一个为dart-sass。
这里建议选择大家使用dart-sass。而不要使用node-sass，下面我会解释一下为什么推荐大家使用dartsass。

单独安装和dart-sass或node-sass的命令先贴在下面

我们选择dart-sass很重要的一点就是 sass官方推荐使用dart-sass
往后的node-sass虽然会继续维护，但是不会再更新新功能。
不过就目前来说，node-sass在编译时依然比dart-sass拥有更好的性能（个人猛漏觉得编译时性能对开发不构成影响）。
国内网络对node-sass不太友好。

启动报错症状：

安装报错症状：

解决方案：
从package.json文件中找到node-sass删掉
然后使用命令安装dart-sass

问题原因：
这个问题的原因其实我们从node-sass的github上的版本中可以找到答案

可以看到都macOSX系统仅仅支持x64而M1芯片是arm64并不是x86。
也就是说如果我们的nodejs环境若为使用rosetta转译运行的x86 64位nodejs版本，那么就可以使用这个node-sass并且不会报错。
所以网上有枝纯烂些人说让回退nodejs版本，裤蠢因为老版本nodejs不兼容arm64，那时候还没有M1芯片啊！QWQ。
老版本nodejs只能用resetta转译运行啊。

Ⅶ css预处理器有哪些

CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。CSS拥有对网页对象和模型样式编辑能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据 不同使用者的理解能力，简化或者优化写法，针对各类人群有较强的易读性。

就CSS本身而言，对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。换句话说，CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。

很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。

一、什么是CSS预处器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。

到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

二、Sass、LESS和Stylus背景介绍

为了能更好的了解这三款流行的CSS预处理器，我们先从其背景入手，简单的了解一下各自的背景信息。

1.Sass背景介绍

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

2.LESS的背景介绍

2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。

根据维基网络上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。

3.Stylus背景介绍

Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

注：Stylus上下载Ruby安装文件（随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：

除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具，比如说有名的Compass.app和fire.app。

2.LESS文件的转译成CSS文件

LESS文件的转译和Sass文件转译可以说是大同小异，不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。

$ lessc style.less

上面的命令会将编译的CSS传递给stdout，你可以将它保存到一个文件中：

$ lessc style.less > style.css

除了上面的命令转译LESS源文件之外，现在还有很多第三方开发的工具，比较常见的有：SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app等，我个人现在常用的是WinLess工具，简单易用，不过在IOS系统下LESS.app和CodeKit.app很好用。

3.Stylus源文件转译成CSS文件

Stylus具有可执行性，因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：

$ stylus –compress <some.styl> some.css

Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。

$ stylus css

下面的命令将输出到“./public/stylesheets”：

$ stylus css –out public/stylesheets

还可以同时转译多个文件：

$ stylus one.styl two.styl

如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。

$ stylus –firebug <path>

五、Sass、LESS和Stylus的语法

每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预处理器语言的语法和CSS语法都差不多。

1.Sass语法

Sass3.0版本开始使用的是标准的CSS语法，和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：

/*style.sass新版语法规则*/h1{ color:#936;
background-color:#333;}

正如你所看到的，在Sass样式中，这样的代码是在简单不过的了。

重要的一点是，Sass也同时支持老的语法，老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略大括号（｛｝）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用“.sass”扩展名，他的语法类似于：

/*style.sass*/h1
color:#936
background-color: #333

2.LESS语法

LESS是CSS的一种扩展形式，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”，其基本语法类似于：

/*style.less*/h1 { color: #963;
background-color: #333;}

3.Stylus语法

Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法，如下所示：

/*style.styl*//*类似于CSS标准语法*/h1 { color: #963;
background-color:#333;}/*省略大括号（｛｝）*/h1
color: #963; background-color: #333;/*省略大括号（｛｝）和分号（;）*/h1
color:#963
background-color:#333

在Stylus样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：

/*style.styl*/h1 {
color #963}
h2
font-size:1.2em

六、Sass、LESS和Stylus特性

这三款CSS预处理器语言具有一些相同的特性，例如：变量、混入、嵌套、函数等。在这一节中，我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处，以及使用方法。

1.变量（Variables）

如果你是一个开发人员，变量应该是你最好朋友之一。在CSS预处理器语言中你也可以声明变量，并在整个样式表中使用。CSS预处理器语言支持任何变量（例如：颜色、数值、文本）。然后你可以在任意地方引用变量。

a)Sass的变量

Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像CSS属性设置一样：

/*声明变量*/$mainColor: #963;$siteWidth: 1024px;$borderStyle: dotted;/*调用变量*/ | /*转译出来的CSS*/------------------------------------------+------------------------------
body { | body {
color: $mainColor; | color: #963;
border:1px $borderStyle $mainColor; | border:1px dotted #963;
max-width: $siteWidth; | max-width: 1024px;
} | }

b)LESS的变量

LESS样式中声明变量和调用变量和Sass一样，唯一的区别就是变量名前面使用的是“@”字符：

/*声明变量*/@mainColor: #963;@siteWidth: 1024px;@borderStyle: dotted;/*调用变量*/ | /*转译出来的CSS*/----------------------------------------+-------------------------------
body { | body {
color: @mainColor; | color:#963;
border:1px @borderStyle @mainColor; | border:1px dotted #963;
max-width: @siteWidth; | max-width:1024px;
} | }

c)Stylus的变量

Stylus样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。

/*声明变量*/mainColor = #963;siteWidth = 1024px;$borderStyle = dotted;/*调用变量*/ | /*转译出来的CSS*/----------------------------------------+--------------------------------
body | body {
color mainColor | color: #963;
border 1px $borderStyle mainColor | border:1px dotted #963
max-width siteWidth | max-width:1024px;
| }

Stylus还有一个独特功能，不需要分配值给变量就可以定义引用属性：

/*水平垂直居中*/ | /*转译出来的CSS*/------------------------------------+------------------------------------#logo | #logo {
position absolute | position:absolute;
top 50% | top:50%;
left 50% | left:50%;
width w = 150px | width:150px;
height h = 80px | height:80px;
margin-left -(w / 2)

Ⅷ 关于node,node-sass,sass-loader版本

1、node.js: node 10
2、node-sass: npm install [email protected] --save
3、sass-loader: npm i [email protected] --save-dev

附一张模扒梁node和旦运此塌node-sass版本对照图