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

WBOY
發布: 2022-06-21 10:33:56
原創
2421 人瀏覽過

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

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

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板