SASS(Syntactically Awesome Stylesheet)是一個CSS預處理器，有助于減少CSS的重復，節省時間。 它是更穩定和強大的CSS擴展語言描述文檔的風格結構。sass中文網

而且Sass算是CSS的超集，它100%兼容CSS的語法，所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。換個說法也就是：如果你喜歡，可以在Sass文件中完全以CSS的語法來寫代碼，它也是完全支持的。

SASS程序有3種使用方式：

作為命令行工具作為獨立的Ruby模塊作為任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件

Sass安裝

Sass的安裝分為2步：

安裝Ruby，sass程序基于Ruby所以需要先安裝Ruby

安裝Sass程序

安裝Ruby

從Ruby官網下載對應你電腦版本的安裝包，然后按照步驟一步一步安裝到你的電腦上(安裝過程中記得勾選Add Ruby executablesto your PATH，免去安裝后再去配置的煩惱)。完成安裝后，在你的命令行程序中輸入 ruby -v驗證是否安裝成功：

ruby -v #驗證版本號#ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]

如果出現對應的版本號說明安裝成功，那么你就可以進行下面的操作了。

安裝Sass

安裝完Ruby后，打開命令行工具，輸入以下命令安裝sass程序：

gem install sass #gem是Ruby命令sass -v #驗證sass是否安裝成功

如果打印出版本號，說明我們安裝成功！

上述是一種官方安裝的方法，有時候官方提供的安裝方式可能是最簡潔的，但也有可能不是最快速的，所以下面介紹另外一種鏡像安裝，速度會相對快一些：

gem sources --remove #移除自帶源gem sources -a https://gems.ruby-china.org/ #安裝RubyChina的源gem sources -l #查看當前的源gem install sasssass -v

Sass編譯

所有準備工作完成后，就可以開始sass的編譯。

編輯sass文件

打開編輯器，首先創建一個index.scss文件，然后保存好，內容如下：

index.scss文件

$color:yellow;$font:18px;$background:red;body { color:$color; background:$background; font-size:$font;}

生成css文件(命令行版)

打開命令行工具，切換到index.scss文件所在目錄，執行以下命令：

sass index.scss index.css#把名為index的Sass文件轉換為CSS文件。#每次有更新保存之后，都需要執行這個命令。

為了更方便操作，我們可以監聽這個文件，然后就省去了每次保存都要重新生成的麻煩。

sass --watch index.scss:index.css#`--watch`參數加上之后，可以監測index這個文件的變化，更新保存之后自動編譯。

多文件(文件夾)監聽命令：

sass --watch sass/main:dist/css#監視sass目錄下main文件夾中的所有Sass文件，并自動編譯為CSS文件之后，放到dist/css目錄下。

逆向操作，css文件轉換為sass/scss文件：

sass-convert index.css index.sasssass-convert index.css index.scss

生成css文件(編輯器版)

有些人可能就覺得上面的命令操作有些繁瑣，有沒有更簡便的方法呢，答案是肯定的，畢竟能人太多。我們可以通過編輯器插件的方式，自動編譯成css文件。

作為一個前端開發，我經常用到的編輯器就是sublime text，然而sublime中就有兩個比較好用的sass編輯插件：Sass(Sass語法高亮)和Sass Build(編譯)。非常之好用。如果不知道具體的插件安裝方法，請自行百度，節約時間，就是在珍惜生命！

完成好scss文件后，保存，快捷鍵Ctrl+B，就會在同一個文件夾里面生成對應的css文件和css.map文件。是不是省略了很多麻煩(就是這么任性)。

編譯結果

上面兩種方式都可以生成對應的css文件，生成的css文件如下：

index.css

body{ color:#ff0; background:red; font-size:18px}/*# sourceMappingURL=index.css.map */

可以看到生成的css文件只包含CSS代碼，Sass源文件中設置的變量已經被處理了。

/*# sourceMappingURL=styles.css.map */`表示映射文件是styles.css.map，映射文件記錄了源文件到css文件的映射信息。

sass@import導入

sass提供導入機制，可以將頁面的共用較為通用的scss提取出來，這樣方便維護，其他頁面按需導入相關的scss文件，避免了所有的樣式都在一個樣式文件中，一個樣式文件較為繁重難以維護。

scss文件中引入scss文件

css3的@import，在css樣式表之中使用絕對或相對地址指定導入的外部樣式表文件。 如：@import url("style/index.css")；css3中的@import可能會造成延遲加載，有的地方沒有樣式。

sass @import解決了這個問題，它能將多個scss合并為一個。 如：@import "index.scss"。

index.scss文件中導入index2.scss文件

#index.scss文件$color:yellow;$font:18px;$background:red;@import 'index2.scss';body { color:$color; background:$background; font-size:$font; width: $width; height:$height;}#index2.scss文件$width:100px;$height:100px;body{ font-family:"Times New Roman",Georgia,Serif;}/*生成后的index.css文件*/body{ font-family:"Times New Roman",Georgia,Serif}body{ color:#ff0; background:red; font-size:18px; width:100px; height:100px}/*# sourceMappingURL=index.css.map */

用法：可以在被引入的文件中定義默認值，主文件@import這個文件后，如果主文件中變量有定義，就不會被覆蓋。

sass入門用法

語法與注釋

Sass中的注釋有3種：//我是單行注釋不會出現在編譯之后任何格式的CSS文件中。/*我是多行注釋*/只會出現在編譯之后代碼格式為expanded的CSS文件中。/*!我是強制注釋*/會出現在任何代碼格式的CSS文件中。//使用大括號的方式布局，類似于cssbody { color:red; background:#fff;}div{ }

變量和嵌套

變量是Sass中最基本的語法。凡是css屬性的標準值(比如說1px或者bold)可存在的地方，都可以替換為變量。之后，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。 通過 $ 符號來定義，通過變量名稱實現多處重復引用。(注：變量名中連字符和下劃線等效，$primary_color 與 $primary-color是同一個變量)

$color:yellow; //定義變量$font:18px; //定義變量$background:red; //定義變量body { $width:180px; //定義局部變量 $header-color: orange !global; //可以在選擇器中使用 !global 標志定義全局變量。 color:$color; //引用變量 background:$background; //引用變量 font-size:$font; //引用變量 border:1px solid $color; //多個屬性值時引用變量 width:$width; //引用變量}div{ color:$header-color;}//編譯成css文件body { color:yellow; background:red; font-size:18px; border:1px solid yellow; width:180px;}div{ color:orange;}

sass可以嵌套設置樣式，這樣比css方便了很多：

div{ p{ color:$color; a{ font-size:$font; } } span{font-size:$font;}}//編譯成css文件div p{color:yellow;}div p a{font-size:18px;}div span{font-size:18px;}

大多數情況下上面那種簡單的嵌套都沒問題。但如果你想要在嵌套的選擇器里邊應用一個類似于：hover的偽類，就需要用到 & 這個連接父選擇器的標識符：

div { p { margin-bottom: 1.4px; &:hover { color: #999; } }}//編譯成css文件div p { margin-bottom: 1.4px; }div p:hover { color: #999; }

操作符

Sass操作符(或運算符)包括加法、減法、除法、等號操作符等。

等號操作符

所有數據類型都支持等號運算符：

==等于!=不等于

除了等號運算符之外，每種數據類型還支持各自的一組操作符。

數字操作符

SassScript支持以下標準的算術操作符:

+加-減*乘/除%取模

算術運算符的一個常見用法是寬度計算。

例如，下面的例子計算寬度百分比：

.container { width: 100%; }article { float: left; width: 700px / 960px * 100%;}.sidebar { float: right; width: 200px / 960px * 100%;}

經過編譯輸出以下CSS代碼：

.container { width: 100%; }article { float: left; width: 72.91667%; }.sidebar { float: right; width: 20.83333%; }

使用算術操作符時，參與運算的數據單位必須相同。否則會報錯(例如，一個用px，另一個用em)：

.box-big { font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'. width: 30% - 20px; // Error: Incompatible units: 'px' and '%'. }

顏色操作符

算術操作符也適用于顏色。計算顏色時，參與運算的是R, G, B分量，而不是整個六位數顏色值。

例如，當把兩個十六進制顏色值相加時，將依次把每一對分量值相加。

示例：

body { color: #991100 + #002299;}

經過編譯輸出以下CSS代碼：

body { color: #993399; }

還可以對顏色和數字應用運算符。例如

body { color: #112233 * 2;}

經過編譯輸出以下CSS代碼：

body { color: #224466; }

寫到這里，無不感慨sass的強大以及技術發展的迅速。到這里入門sass也綽綽有余了。后續會有進階文章繼續！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的nuxt sass 全局变量的问题_Sass入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。