vue創建專案時使用的sass是強化css輔助工具的意思,是對css的擴展;sass是由buby語言編寫的一款css預處理語言,和html有一樣嚴格的縮排風格,和css編寫規格相比是不使用花括號和分號的。
本教學操作環境:windows10系統、Vue3版、Dell G3電腦。
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中文網其他相關文章!