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相关的点