在 template 中使用 sass 变量

日常开发中总会有些不如意的地方。比如说，在 sass 中定义好了颜色变量，而在 template 却不能直接使用，每次都要去找到对应的色彩值手动进行复制粘贴，真的是伤害不高，侮辱性极强！
那么，我们该如何解决这个问题呢？其实很简单， 可以使用 CSS Modules 提供的 :export 关键字，示例如下

// styles/_variables.scss
$purple: #5344b6;

:export {
    purple: $purple;
}

在 .vue 中使用

<template>
    <div>
        <van-icon :color="variables.purple"/>
    </div>
</template>
<script>
import variables from '@/styles/_variables.scss'
export default {
    data(){
        return {
             variables
        }
    }
}
</script>

为了方便管理，以及其它地方引用 _variables.scss 连同:export一同被解析的问题，我们新建一个文件来管理提供变量给 js 的方法

// styles/_export.scss
@import './_variables.scss'
:export {
    purple: $purple;
}

每次使用时都要定义个变量，是否还是有些不爽？别急，Vue 用户的话，如下可以解决

<template>
    <div>
        <van-icon :color="$style.purple"/>
    </div>
</template>
<style module lang="scss" src="@/styles/_export.scss"></style>

如果项目中使用了 typescript ，想要使用时有提示，则可定义对应的 ts 声明文件

参考

posted @ 2021-01-09 11:09  _fn  阅读(1467)  评论(0)  编辑  收藏  举报