欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解

 更新時(shí)間：2024年01月16日 09:50:33   作者：鄒榮樂(lè)  
Sass是一種CSS預(yù)處理器,它擴(kuò)展了CSS的功能,提供了更高級(jí)的語(yǔ)法和特性,例如變量、嵌套、混合、繼承和顏色功能等,這些特性可以幫助開(kāi)發(fā)者更高效地管理和維護(hù)樣式表,本文介紹vue3中安裝并使用CSS預(yù)處理器Sass的方法,感興趣的朋友一起看看吧

Sass是什么？

Sass（Syntactically Awesome Style Sheets）是一種CSS預(yù)處理器，它擴(kuò)展了CSS的功能，提供了更高級(jí)的語(yǔ)法和特性，例如變量、嵌套、混合、繼承和顏色功能等，這些特性可以幫助開(kāi)發(fā)者更高效地管理和維護(hù)樣式表。Sass語(yǔ)法是基于縮進(jìn)（縮進(jìn)花括號(hào)）的，它與傳統(tǒng)的CSS語(yǔ)法類似，但添加了一些額外的規(guī)則和語(yǔ)法結(jié)構(gòu)。Sass代碼需要編譯成CSS代碼才能在瀏覽器中呈現(xiàn)。

為什么使用Sass?

Sass讓編寫(xiě)可維護(hù)的CSSS更加簡(jiǎn)易方便。可以用更少的代碼，做更多的事，用更少的時(shí)間，具有更強(qiáng)的可讀性。

安裝sass

以前用vue-cli的時(shí)候，還要安裝sass-loader、node-sass什么的，安裝的時(shí)候還會(huì)遇到各種問(wèn)題，但是vite其實(shí)安裝sass就可以了，很簡(jiǎn)單。

1、安裝sass

npm install sass -D

2、編寫(xiě)全局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: {
        /**如果引入多個(gè)文件，可以使用
       * '@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語(yǔ)法

1、變量

Sass讓CSS可以使用變量。變量類型可以是數(shù)字，字符串，顏色，null，列表和maps。在Sass中使用$符號(hào)定義變量。

創(chuàng)建一個(gè)變量

$primaryColor: #eeffcc;

定義變量并不會(huì)輸出任何CSS，它們只會(huì)被記錄在當(dāng)前作用域的變量集中。

使用變量

body {
    background: $primaryColor;
}

變量作用域

如果你在選擇器中聲明了一個(gè)變量，那么它的作用范圍就是這個(gè)選擇器內(nèi)部。

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor; //編譯后#ccc
}
p {
  color: $primaryColor; //編譯后#eeccff
}

Sass提供了一個(gè)!global標(biāo)識(shí)符，可以在選擇器中聲明一個(gè)全局變量。

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor; //編譯后#ccc
}
p {
  color: $primaryColor; //編譯后#ccc
}

2、數(shù)學(xué)計(jì)算

與CSS不同，Sass允許使用數(shù)學(xué)表達(dá)式！這對(duì)于混合宏非常有用，是我們能夠使用自己的標(biāo)記做一些很酷的事情。

支持的操作符包括：

加：+
減：-
除：/
乘：*
取余：%
相等：==
不相等：!=

兩個(gè)Sass有關(guān)于數(shù)學(xué)計(jì)算的“陷阱” /符號(hào)用來(lái)簡(jiǎn)寫(xiě)CSS字體屬性，比如font: 14px/16px，所以如果你想在非變量值上使用除法操作符，那么你需要使用括號(hào)包裹它們：

$fontDiff: (14px/16px);

不可以混合使用值的單位：

$container-width: 100% - 20px;

基于基礎(chǔ)的容器寬度創(chuàng)建一個(gè)動(dò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中一個(gè)很有用又經(jīng)常被誤用的特性，就是嵌套聲明。

CSS中，我們會(huì)這么寫(xiě)

.container {
    width: 100%;
}
.container h1 {
    color: red;
}

在Sass中，我們這樣寫(xiě)

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

可以通過(guò)使用&符號(hào)來(lái)引用父選擇器給偽選擇器添加鏈接屬性

a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

4、Imports

imports允許將總的樣式分割成小文件，并在另一個(gè)文件中導(dǎo)入。

我們可以使用@import指令導(dǎo)入.scss文件

@import "grids.scss";

也可以不需要寫(xiě)擴(kuò)展名

@import "grids";

sass中文官網(wǎng)

更多詳細(xì)可以訪問(wèn)sass中文官網(wǎng)

在線css轉(zhuǎn)sass代碼

到此這篇關(guān)于vue3中安裝并使用CSS預(yù)處理器Sass的方法介紹的文章就介紹到這了,更多相關(guān)vue3使用CSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論