Ⅰ 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 +alertul 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) -> stringtype-of('hello') -> string12
list类型：
type-of(1px solid red) -> listtype-of(5px 10px) -> list12
颜色：
type-of(red) -> colortype-of(rgb(255,0,0) -> colortype-of(#333) -> color123
number 计算
2+9 -》102*8 -》16(8/2) ->4 //除法要写括号123
也可以包含单位
5px + 5px -> 10px5px -2 ->3px5px *2 ->10px5px * 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)->4ceil(3.2)->4 //向上取整ceil(3.6)->4floor(3.2)->3 //向下取整floor(3.9)->3percentage(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;}1234567body { 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 redCourier,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 的lengthlength($color) ->2//得到map里key对应的值map-get($color,dark) ->#000000获取map里的所有键的列表map-keys($color) ->("light","dark") //列表类型获取map里的所有值的列表map-values($color) -> ("#ffffff","#000000") //列表类型判断map里是否含有这个keymap-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 -> true5px<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 3from 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*/h1color:#936background-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;}/*省略大括号（｛｝）*/h1color: #963; background-color: #333;/*省略大括号（｛｝）和分号（;）*/h1color:#963background-color:#333
在Stylus样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：
/*style.styl*/h1 {color #963}h2font-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 #963max-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版本对照图
