vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解
Sass是什么？
Sass（Syntactically Awesome Style Sheets）是一種CSS預(yù)處理器，它擴展了CSS的功能，提供了更高級的語法和特性，例如變量、嵌套、混合、繼承和顏色功能等，這些特性可以幫助開發(fā)者更高效地管理和維護樣式表。Sass語法是基于縮進（縮進花括號）的，它與傳統(tǒng)的CSS語法類似，但添加了一些額外的規(guī)則和語法結(jié)構(gòu)。Sass代碼需要編譯成CSS代碼才能在瀏覽器中呈現(xiàn)。
為什么使用Sass?
Sass讓編寫可維護的CSSS更加簡易方便?？梢杂酶俚拇a，做更多的事，用更少的時間，具有更強的可讀性。
安裝sass
以前用vue-cli的時候，還要安裝sass-loader、node-sass什么的，安裝的時候還會遇到各種問題，但是vite其實安裝sass就可以了，很簡單。
1、安裝sass
npm install sass -D
2、編寫全局css變量/全局mixin
// 全局變量 / globalVar.scss
$font-size-normal: 32px;
$bg-color: #1989fa;
// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
-webkit-box-shadow: 0px 0px $bulr $color;
-moz-box-shadow: 0px 0px $bulr $color;
box-shadow: 0px 0px $bulr $color;
}3、vite引入并使用
//全局引入
css: {
preprocessorOptions: {
scss: {
/**如果引入多個文件，可以使用
* '@import "@/assets/scss/globalVariable1.scss";
* @import"@/assets/scss/globalVariable2.scss";'
**/
additionalData: '@import "@/style/globalVar.scss";',
}
}
},4、按需引入并使用
<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
width: 650px;
height: 60px;
font-size: $font-size-normal;
background-color: $bg-color;
@include box-shadow;
}sass語法
1、變量
Sass讓CSS可以使用變量。變量類型可以是數(shù)字，字符串，顏色，null，列表和maps。在Sass中使用$符號定義變量。
創(chuàng)建一個變量
$primaryColor: #eeffcc;
定義變量并不會輸出任何CSS，它們只會被記錄在當前作用域的變量集中。
使用變量
body {
background: $primaryColor;
}變量作用域
如果你在選擇器中聲明了一個變量，那么它的作用范圍就是這個選擇器內(nèi)部。
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor; //編譯后#ccc
}
p {
color: $primaryColor; //編譯后#eeccff
}Sass提供了一個!global標識符，可以在選擇器中聲明一個全局變量。
$primaryColor: #eeccff;
body {
$primaryColor: #ccc !global;
background: $primaryColor; //編譯后#ccc
}
p {
color: $primaryColor; //編譯后#ccc
}2、數(shù)學計算
與CSS不同，Sass允許使用數(shù)學表達式！這對于混合宏非常有用，是我們能夠使用自己的標記做一些很酷的事情。
支持的操作符包括：
加：+
減：-
除：/
乘：*
取余：%
相等：==
不相等：!=
兩個Sass有關(guān)于數(shù)學計算的“陷阱” /符號用來簡寫CSS字體屬性，比如font: 14px/16px，所以如果你想在非變量值上使用除法操作符，那么你需要使用括號包裹它們：
$fontDiff: (14px/16px);
不可以混合使用值的單位：
$container-width: 100% - 20px;
基于基礎(chǔ)的容器寬度創(chuàng)建一個動態(tài)列
$container-width: 100%;
.container {
width: $container-width;
}
.col-4 {
width: $container-width / 4;
}
// 編譯后是這樣的
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }3、嵌套
Sass中一個很有用又經(jīng)常被誤用的特性，就是嵌套聲明。
CSS中，我們會這么寫
.container {
width: 100%;
}
.container h1 {
color: red;
}在Sass中，我們這樣寫
.container {
width: 100%;
h1 {
color: red;
}
}可以通過使用&符號來引用父選擇器給偽選擇器添加鏈接屬性
a.myAnchor {
color: blue;
&:hover {
text-decoration: underline;
}
&:visited {
color: purple;
}
}4、Imports
imports允許將總的樣式分割成小文件，并在另一個文件中導(dǎo)入。
我們可以使用@import指令導(dǎo)入.scss文件
@import "grids.scss";
也可以不需要寫擴展名
@import "grids";
sass中文官網(wǎng)
更多詳細可以訪問sass中文官網(wǎng)
到此這篇關(guān)于vue3中安裝并使用CSS預(yù)處理器Sass的方法介紹的文章就介紹到這了,更多相關(guān)vue3使用CSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
echarts是我們后臺系統(tǒng)中最常用的數(shù)據(jù)統(tǒng)計圖形展示,外界對它的二次封裝也不計層數(shù),這篇文章主要介紹了vue3.x對echarts的二次封裝之按需加載,需要的朋友可以參考下2023-09-09
Vue3.x如何設(shè)置瀏覽器動態(tài)Title方法
這篇文章主要介紹了Vue3.x如何設(shè)置瀏覽器動態(tài)Title方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue-路由精講 二級路由和三級路由的作用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-12-12
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點,有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
今天小編就為大家分享一篇Vue表單及表單綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了VueX如何實現(xiàn)數(shù)據(jù)共享問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue Cli 3項目使用融云IM實現(xiàn)聊天功能的方法
這篇文章主要介紹了Vue Cli 3項目 使用融云IM實現(xiàn)聊天功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)下載文件流完整前后端代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue-admin-template?報Uncaught?(in?promise)?error問題及解決
這篇文章主要介紹了Vue-admin-template?報Uncaught?(in?promise)?error問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07