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

vue項目中使用scss詳細方法步驟

 更新時間：2023年11月08日 10:47:39   作者：weixin_45665171  
這篇文章主要給大家介紹了關(guān)于vue項目中使用scss的詳細方法步驟,scss是一種css預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,無需考慮瀏覽器的兼容性,讓css更加簡潔、適應性更強,可讀性更佳,需要的朋友可以參考下

一、安裝使用scss

1. 安裝 scss

npm install scss --save

2. 安裝 node-sass 和 sass-loader

sass-loader：把 sass編譯成css

sass-loader：nodejs環(huán)境中將sass轉(zhuǎn)css

提示：限制 node-sass，sass-loader 版本號，防止默認安裝的版本號過高

npm i sass-loader@7.3.1 -D
npm i node-sass@4.14.1 -D

版本對應關(guān)系：

3. 配置 webpack.base.conf.js 文件

提示：在 build 文件夾目錄下 webpack.base.conf.js 文件中，找到 rules 添加以下代碼

rules: [
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  },
]

4. 組件中使用 scss

提示：在組件中style標簽上添加屬性 lang="scss"，保存運行。

<style lang="scss">
#app {
  background: $color;
}
</style>

二、設(shè)置scss變量

1. 使用 sass-resources-loader 實現(xiàn)全局變量

安裝 sass-resources-loader

cnpm install sass-resources-loader --save

2. 新建一個 public.scss 文件

在src目錄下的assets文件夾里面新建一個public.scss文件，用于存放所有的公共變量。

3. 根目錄下找到 build 下的 utils.js 文件

提示：resources里寫 scss（公共變量文件） 路徑

scss: generateLoaders('sass')
// 改為：
scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/public.scss') // 指定單個文件
    // resources: [path.resolve(__dirname, '../src/assets/public.scss'),path.resolve(__dirname, '../src/assets/public.scss')] // 指定多個文件
    // 將匹配文件夾和子目錄中的所有文件或路徑數(shù)組
    // resources: path.resolve(__dirname, '../src/assets/scss/**/*.scss') // 指定單個文件夾和子目錄中的所有文件
    // resources: [path.resolve(__dirname, '../src/assets/scss/**/*.scss'),path.resolve(__dirname, '../src/assets/scss/**/*.scss')] // 指定多個文件夾和子目錄中的所有文件
  }
}),

4. 運行項目

重新npm run dev ,組件中就可以使用全局變量了。

三、常用全局變量

1. 設(shè)置變量

在全局變量文件里面寫入變量（$），混合（@mixin，括號里面為默認值，可有可無），繼承（%）等語法。

// 變量
$color: #ff0;
$bac_color: #222;
$bac-color: #111;

.main {
  color: $color;
  background: $bac_color; /*$bac_color被$bac-color覆蓋*/
}

// 混合
@mixin borderRadius($num: 8px) {
  color: $color;
  border-radius: $num;
}

// 繼承
%cricle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}

2. 使用變量

在組建中使用變量（$+變量名），混合（@include），繼承（@extend）。

.div{
  // 變量
  background: $color;
  // 混合
  @include borderRadius(20px); /*()不傳值用默認值8px*/
  // 繼承
  @extend %cricle;
}

四、使用全局變量

1. 變量

1、變量以 $ 開頭，用來存儲一些在css中需要復用的參數(shù)；

2、變量存在作用域，內(nèi)部聲明的變量無法在外面使用，外部如需引用內(nèi)部的變量，可在變量值的后面添加!global聲明;

3、變量名中，中劃線等同下劃線，值會被第二次定義的變量覆蓋。

scss代碼

$color = #333;
$bac_color = #222;
$bac-color = #111;

.main {
  color: $color;
  background: $bac_color; /*$bac_color被$bac-color覆蓋*/
}
/*編譯后：*/
.main{
    color : #333;
    background: #111;
}

2. 嵌套

nav {
  ul {list-style: none;}
  li { display: inline-block; }
}
/*編譯后：*/
nav ul{list-style: none;}
nav li{display: inline-block;}

3. 引入

1、scss通過 @import 可以把多個文件結(jié)合到一起；

2、以 _開頭命名的文件不會直接生成為CSS文件，只在使用@import指令的位置被導入；

3、可全局引入或局部引入；

4、scss中引入片段時，可以缺省文件擴展名；

4、css原生的@import會通過額外的HTTP請求獲取引入的樣式片段，而scss的@import則會直接將這些引入的片段合并至當前CSS文件，并且不會產(chǎn)生新的HTTP請求。

/*_one.scss*/
nav {
  ul {list-style: none;}
  li { display: inline-block; }
}

/*two.scss*/
@import '_one' /*全局導入，缺省后綴*/

.main{
    @import '_one'/*局部導入*/
    color : #333;
    background: #111;
}

4. 混合

1、通過 @mixin 定義一個類或方法，在其它位置通過 @include 引用這個類或方法

2、@mixin 如果沒有調(diào)用，不會被渲染

3、多個參數(shù)時，傳參指定參數(shù)的名字，可以不用考慮傳入的順序

@mixin border-radius($radius：5px) {  /*設(shè)置默認值為5px*/
   border-radius: $radius;
   -ms-border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}
.box {
  @include border-radius(); /*未傳參數(shù)，默認值為5px*/
}
.box1 {
  @include border-radius(10px); /*傳入?yún)?shù)，值為10px*/
}
/*編譯后：*/
.box {
   border-radius: 5px;
   -ms-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
.box1 {
   border-radius: 10px;
   -ms-border-radius:10px;
   -moz-border-radius: 10px;
   -webkit-border-radius:10px;
}

5. 繼承

1、使用%定義一個被繼承的樣式，它本身不起作用，只用于被其他人繼承

2、樣式如果沒有被繼承，不會輸出到最終生成的CSS文件

3、注意，不能繼承 @extend .box .main 這種連續(xù)組合的類，應該寫為

@extend .box, .main

%err-color {
    color:red;
}

.errBox{
    @extend %err-color;
    padding: 10px;
}
.errBox2{
    @extend %err-color;
    padding: 5px;
}
/*編譯后：*/
.errBox, .errBox2{
    color:red;
}
.errBox{
    padding: 10px;
}
.errBox2{
    padding: 5px;
}

6. if / else / each / for

1、@if 和 @else

@if 條件為真 {
  //code
} @else {
  //code
}

2、 @each

遍歷變量所存在的所有數(shù)據(jù)。

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值，第七點會講到*/
    background-color: #{$color};
  }
}
/*編譯后：*/
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }

3、@for循環(huán)

(1) 關(guān)鍵字 through 表示包括終點值這個數(shù)，

(2) 關(guān)鍵字 to 不包括終點值這個數(shù)。

@for $i from 1 through 3 { /*through  包括3這個終點值*/
  .item-#{$i} { 
     width: 2px * $i;
   }
}
/*編譯后：*/
.item-1 {
  width: 2px;
}
.item-2 {
  width: 4xp;
}
.item-3 {
  width: 6px;
}

7. 其他

1、插值

一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性名稱或在某些特殊情況下則必須要以 #{$XXX} 形式使用。

如下，變量作為屬性名的情況使用插值的形式使用

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值，第七點會講到*/
    background-color: #{$color};
  }
}

2、注釋

(1) 使用//注釋的內(nèi)容編譯后不存在

(2) 使用/* */注釋的內(nèi)容編譯后會存在css文件中

總結(jié)

到此這篇關(guān)于vue項目中使用scss的文章就介紹到這了,更多相關(guān)vue使用scss內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論