vue項目中scss樣式管理

最近有報一個全棧課程，里面內容比較新穎，其中對scss樣式管理的理念讓我十分喜歡，各種操作讓項目更加具有條理性。

1.@mixin 

在一個可以全局適用的scss文件中，姑且叫global.scss，寫入：

@mixin center(){
 display:flex;
 justify-content:center;
 align-items:center;
}

　用css的眼光看，這是一個彈性布局，使其中的元素居中對齊，交叉軸方向也是居中對齊。是項目中很常用的代碼，這里將其放入global.scss,並在main.js引入。

那么，在組件中也需要引入global.scss文件！style 加入lang="scss"時，可以直接用scss語法來寫樣式。

使用這里的mixin里面的方案可以使用：

@include center;

 

那么，使用@include center;的當前元素將適用其中的規則！

 

2.字體大小管理

在不同瀏覽器中默認的字體像素各有不同，為了統一項目在不同瀏覽器顯示的效果，可以手動將其統一，使用rem與px的比例管理

在global.scss中：

$fontSize:37.5;

@function px2rem($px){
 @return ($px/$fontSize)+rem
}

　　那么，在組件中引入global.scss文件時，ps:在組件style標簽中引入scss文件語句：

@import "@/styles/common/global.scss"

　　直接使用函數名加參數統一規格：

.container{
 span{
   font-size:px2rem(16)
 }
}

　　在頁面中的像素便是16像素，不會根據瀏覽器變化而變化！

 還可以使用transform:scale(0.5)來縮小字體，這適應於大多數情況，需要注意的是，transform需要將對象轉換為行內塊才生效！

3.拋出樣式作為組件參數使用

有些組件庫可以根據傳遞給屬性的樣式值修改樣式體現，比如element-ui的滑塊：

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
</el-tooltip>

　　這里的active-color、inactive-color時可以在項目全局上進行統一的。

可以使用scss文件global.scss全局文件拋出該值作為參數使用：

:export{
 activeColor:#13CE66;
 inactiveColor:#ff4949;
}

　　在組件中引入global.scss，注意是在script的標簽里面！！

<script>
 import  switch from "@/styles/common/global.scss"
 export default{.....}
</script>

 

在computed里返回switch：

computed:{
 switch(){
   return switch;
 }
}

現在可以將滑塊元素的顏色替換成我們統一管理的樣式：

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    :active-color="switch.activeColor" :inactive-color="switch.inactiveColor"
    active-value="100"
    inactive-value="0">
  </el-switch>
</el-tooltip>

　　,被:export拋出的樣式可以直接被存放在switch里，作為變量被讀取了！

 

4.改變svg的深淺

在項目中有遇到一個需求：清空輸入內容后的小×是個svg圖片，需要在鼠標hover的時候讓其顏色變深，這里的做法是：

圖片顏色是淺灰色，這里設置的值是0-1的取值范圍，0為純黑色

-webkit-filter:contrast(0.6)

　　設置svg的樣式顏色可以了解更多-webkit-filter相關的點