Javascript如何与Sass,Less,Css之间共享变量？

honhon 发布于2019-08-23 16:49 / 3020人阅读

摘要：环境和及其等先安装，下已配置如何之间共享变量文件目录文件夹下代码核心代码文件定义变量，然后使用。文件有一个关键字，它在功能上等同于的关键字，即导出一个对象。

原博文地址，此博文首次发于csdn，原创

前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式

得多带带设置，好麻烦。

本文章代码gitHub地址 https://github.com/l-x-f/variables-css-less-sass-js

这个时候如果能让样式文件和 js 文件实现变量共享，那这个问题就解决了。查了好多资料，最终的解决方案如下：

1.原理介绍：通过 webpack 和 css module，我们可以在 js 中使用样式 Sass,Less,Css 文件中定义的变量。

2.环境： node: v8.10.0 vue-cli:3.5.3

3.package.json （ scss和less及其loader等先安装，vue-cli:3.5.3 下webpack已配置）

{
  "name": "Javascript 如何 Sass,Less,Css 之间共享变量",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  }
}

4.文件目录

5.variables文件夹下代码（核心代码）
css.css文件

/* @value 定义变量，然后使用。

@value bgcColor: red;   会导出@ 后面的变量，
在:export {}  可以取到该变量，也可以导出
他们在功能上等同于 ES6 的关键字export，即导出一个 js 对象。*/

@value bgcColor: red;
@value fontSize: 10px;

/*   这里可以直接使用
.demo { 
  background-color: bgcColor;
  font-size: fontSize;
} */


/*  CSS Module  导出 
 :export {
  cssExportBgcColor: bgcColor;
}
 */

less.less文件

@mainColor: #398bd0;
@fontSize: 100px;

// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
  name: "less";
  mainColor: @mainColor;
  fontSize: @fontSize;
}

scss.scss文件

$primaryColor: #f4d020;
$fontSize: 11px;

// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
  name: "scss"; 
  primaryColor: $primaryColor;
  fontSize: $fontSize;
}

index.js文件

import variablesScss from "./scss.scss";
import variablesLess from "./less.less";
import variablesCss from "./css.css";

// 导出变量
export default {
  variablesScss,
  variablesLess,
  variablesCss
};

6.styles文件夹下代码（样式文件中使用变量）

css-use.css文件

@value variables: "../variables/css.css"; /* 导入变量*/
@value bgcColor, fontSize from variables;/* 取出变量*/

.box {
  name: "css"; /* 此属性错误，仅用于区分，可忽略*/
  background-color: bgcColor;
  font-size: fontSize;
}

less-use.less文件

@import "../variables/less.less";

.box {
  name: "less";/* 此属性错误，仅用于区分，可忽略*/
  background-color: @mainColor;
  font-size:  @fontSize;
 
}

scss-use.scss文件

@import "../variables/scss.scss";

.box {
  name: "scss"; /* 此属性错误，仅用于区分，可忽略*/
  background-color: $primaryColor;
  font-size: $fontSize;
 
}

7.main.js代码

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
import variables from "./variables";

console.log(variables, "main-variables");

new Vue({
  render: h => h(App)
}).$mount("#app");

8.App.vue文件代码

9.最后的效果

如图我们在js文件（或vue 文件）中取到样式变量，最后引用第三个资料中的一句话结束本文章

环境之间共享变量是编程的圣杯

参考资料
http://www.ruanyifeng.com/blo...
https://github.com/css-module...
https://www.bluematador.com/b...
https://github.com/css-module...
https://github.com/css-module...

GPU云服务器云服务器大数据与共享经济之间的联系 linux 用户之间共享数据 centos与主机之间复制粘贴 javascript+css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103344.html

Javascript如何与Sass,Less,Css之间共享变量？

摘要：环境和及其等先安装，下已配置如何之间共享变量文件目录文件夹下代码核心代码文件定义变量，然后使用。文件有一个关键字，它在功能上等同于的关键字，即导出一个对象。原博文地址，此博文首次发于csdn，原创前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式得单独设置，好麻烦。本文章代码gitHub地址 ...

CloudDeveloper 2019-08-29 18:33 评论0 收藏0
Compass创建者Chris Eppstein：真正的CSS框架是如何工作的

摘要：当我的补丁被拒绝了之后，我想要指出一个方向真正的框架是如何工作的。发起这项捐助有我的个人原因在里面，我的父亲在年被确诊为患有一种罕见的成年人形式的线粒体疾病。正是一个经历了如此过程的产品。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/120792 Chris Eppstein，Compass框架的创建...

BigTomato 2019-08-28 18:01 评论0 收藏0
CSS预编译语言Less的用法总结

摘要：例如解析现在流行的预编译语言和的优点简单，易于维护，管理更加容易高效的进行开发使用实现配色将变得非常容易。变量避免编译，有时候需要输出一些不正确的语法或者使用一些不认识的专有语法，在前面加入。对于刚接触的预编译的前端，我推荐用。 1、什么是Less？ less官网：Less is More , Than CSS -少即是多，比CSS 官网gitHub：https:/...

vboy1010 2019-08-29 15:21 评论0 收藏0
前端工程师面试必备（持续更新中）

摘要：最近的一次更新的变量有效，并且会作用于全部的引用的处理方式和相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效嵌套三种预编译器的选择器嵌套在使用上来说没有任何区别，甚至连引用父级选择器的标记也相同。面试汇总一：2018大厂高级前端面试题汇总高级面试：【半月刊】前端高频面试题及答案汇总 css内容响应式布局当前主流的三种预编译器比较 CSS预处理器用一种专门的...

jubincn 2019-05-22 14:42 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0