如何让scss变量能够当做js变量来使用

Posted 2023-03-18

参考技术A 当前我们使用scss变量有两个痛点：

需要手动导入

无法与js建立联系或者很难，后续不能在此基础上做一些骚操作 为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。

scss变量使用规范

变量创建

所有scss变量在style/variables.scss.js编写，格式要求为：

只允许使用小写字母

单词间以下划线"_"连接

命名应简洁易懂，以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾

const variables =

  'header_height': '60px',

  'header_background': `#ededed`



module.exports = variables;

注意：命名以下划线连接是为了在js文件中能够单个import, 使用中已经在webpack进行转换，必须按照此格式！

在scss变量中使用是正常的scss变量：$header-height

在js中使用是定义时的变量格式：import header_height from "@/style/variables.scss.js";

变量使用

配置webpack中sass解析方式，一般来说项目构建者已经处理完毕，项目成员无需关心。

使用时无需引入，直接在样式文件中正常使用即可。

scss中使用示例

.the-nav

  height: $header-height;



js中使用示例

import header_height from "@/style/variables.scss.js";

...

data()

  return

    header_height: header_height

 



...

配置讲解

vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports =

  css:

    loaderOptions:

      sass:

        prependData: Object.keys(scssVariables)

          .map(k => `\$$k.replace('_', '-'): $scssVariables[k];`)

          .join('\n')

     

   

 

;

注意：此处有个坑，新版本的sass-loader更换了api参数prependData但是似乎没有文档说明

老版本的sass-loader vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports =

  css:

    loaderOptions:

      sass:

        data: Object.keys(scssVariables)

          .map(k => `\$$k.replace('_', '-'): $scssVariables[k];`)

          .join('\n')

     

   

 

;

老版本data => 新版本 prependData

webpack.config.js中 vuecli2

let scssVariables = require('./src/style/variables.scss.js');

...



  test: /\.scss$/,

  use: [

    'css-loader',

    'postcss-loader',

   

      loader: 'sass-loader',

      options:

        data: Object.keys(scssVariables)

          .map(k => `\$$k.replace('_', '-'): $scssVariables[k];`)

          .join('\n')

     

   

  ]



链接:  http://www.fly63.com/article/detial/7274

变量学习随笔

　　今天主要了解变量，变量拆开理解的话，量：是衡量/记录现实世界中的某种特征/状态，变：指的是记录的状态是可以发生变化的。用变量就是为了让计算机能够像人一样去将一个事物的特征/状态记忆下来（存到计算机内存）以后可以取出来使用
　　总结一：变量的使用是通过变量名来引用的，先定义，再通过变量名去引用

　　　　　　age=20

　　　　　　name=‘layer’

　　　　　　print("age")

　　　　　　print("name")

　　　　　　变量名的命名应该能够反映出值记录的状态，方便我们标识存到内存中值的功能

　　总结二：变量名的一些规则：1、变量名只能是字母、数字或下划线的任意组合，（区分大小写）
　　　　　　　　　　　　　　　2、变量名的第一个字符不能是数字
　　　　　　　　　　　　　　　3、不能将变量名命名为python的关键字

　　　　　　　[‘and‘, ‘as‘, ‘assert‘, ‘break‘, ‘class‘, ‘continue‘, ‘def‘, ‘del‘, ‘elif‘, ‘else‘, ‘except‘, ‘exec‘, ‘finally‘, ‘for‘, ‘from‘, ‘global‘, ‘if‘, ‘import‘, ‘in‘, ‘is‘, ‘lambda‘, ‘not‘, ‘or‘, ‘pass‘, ‘print‘, ‘raise‘, ‘return‘, ‘try‘, ‘while‘, ‘with‘, ‘yield‘]

　　总计三：变量的三个特征：1.id：反应值在内存中的位置

　　　　　　　　　　　　　　2.类型（type）：不同类型的值是用来表示/记录不同的状态的

　　　　　　　　　　　　　　3.value：我们存放在内存中的数据

　　　　　　name=‘layer’

　　　　　　print（id(name)）

　　　　　　print(type(name))

　　　　　　print(name)

　　　　　　小数池：在cmd中变量的值处于（-5，257）之间的如果相同的话id相同 在pycharm中不同变量相同值id还是一样

　　　　　　 x=100
　　　　　　 y=20
　　　　　　 print(id(x))
 　　　　　　print(id(y))
　　　　　　 x=12312312321312222222222222222222222222222222222223123123123
　　　　　　 y=12312312321312222222222222222222222222222222222223123123123
　　　　　　 print(id(x))
　　　　　　 print(id(y))