vue建立專案時sass是什麼意思

vue創建專案時使用的sass是強化css輔助工具的意思，是對css的擴展；sass是由buby語言編寫的一款css預處理語言，和html有一樣嚴格的縮排風格，和css編寫規格相比是不使用花括號和分號的。

本教學操作環境：windows10系統、Vue3版、Dell G3電腦。

vue創建專案時sass是什麼意思

 Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮排風格，和css編寫規範有著很大的出入，是不使用花括號和分號的，所以不被廣為接受。

 Sass 是一款強化CSS 的輔助工具，是對CSS 的擴展，它在CSS 語法的基礎上增加了變數(variables)、嵌套(nested rules)、混合(mixins)、繼承( extend)、導入(inline imports) 等高階功能，這些拓展令CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更有效率地開發項目， 其後綴是.sass。

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

擴充知識：

vue-cli3提供了兩種方式整合sass/scss

• 建立專案時選擇預處理器sass

• 手動安裝sass-loader

#方法一：建立vue專案時選擇預處理器sass

使用vue-cli3建立vue項目

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

移動上下鍵選擇Manually select features，表示手動選擇建立項目的設定。

按enter鍵，進入下一步操作，顯示如下：

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

移動上下鍵在CSS Pre-processors處點擊空格鍵以選中，表示需要css預處理工具。

之後再進行css預處理工具操作，顯示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

選擇Sass/SCSS (with node-sass)作為我們的CSS預處理器。

完成後專案會幫我們自動安裝sass-loader 以及 node-sass依賴。

方法二：手動安裝

如果在建立專案沒有選擇CSS 預處理器，我們也可以手動安裝sass-loader以及node-sass來整合scss

npm install -D sass-loader node-sass

使用sass

至此我們只需要在style指定lang為scss即可：

<style>
$color = red;
</style>

vue service clie會自動使用我們安裝的sass-loader作為scss內容的加載器。

【相關推薦：《vue.js教學》】

以上是vue建立專案時sass是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！