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版本對照圖