摘要:環(huán)境和及其等先安裝,下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量,然后使用。文件有一個關鍵字,它在功能上等同于的關鍵字,即導出一個對象。
原博文地址,此博文首次發(fā)于csdn,原創(chuàng)
前段時間遇到網(wǎng)站換膚的需求,本想挺簡單的,直接用 Sass 或者 Less 設置變量就好了,結果導致的問題就是 js 中設置的樣式
得多帶帶設置,好麻煩。
本文章代碼gitHub地址 https://github.com/l-x-f/variables-css-less-sass-js
這個時候如果能讓樣式文件和 js 文件實現(xiàn)變量共享,那這個問題就解決了。查了好多資料,最終的解決方案如下:
1.原理介紹:通過 webpack 和 css module,我們可以在 js 中使用樣式 Sass,Less,Css 文件中定義的變量。
2.環(huán)境: 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"; /* 此屬性錯誤,僅用于區(qū)分,可忽略*/
background-color: bgcColor;
font-size: fontSize;
}
less-use.less文件
@import "../variables/less.less";
.box {
name: "less";/* 此屬性錯誤,僅用于區(qū)分,可忽略*/
background-color: @mainColor;
font-size: @fontSize;
}
scss-use.scss文件
@import "../variables/scss.scss";
.box {
name: "scss"; /* 此屬性錯誤,僅用于區(qū)分,可忽略*/
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 文件)中取到樣式變量,最后引用第三個資料中的一句話結束本文章
環(huán)境之間共享變量是編程的圣杯
參考資料
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...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103344.html
摘要:環(huán)境和及其等先安裝,下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量,然后使用。文件有一個關鍵字,它在功能上等同于的關鍵字,即導出一個對象。 原博文地址,此博文首次發(fā)于csdn,原創(chuàng) 前段時間遇到網(wǎng)站換膚的需求,本想挺簡單的,直接用 Sass 或者 Less 設置變量就好了,結果導致的問題就是 js 中設置的樣式 得單獨設置,好麻煩。 本文章代碼gitHub地址 ...
摘要:當我的補丁被拒絕了之后,我想要指出一個方向真正的框架是如何工作的。發(fā)起這項捐助有我的個人原因在里面,我的父親在年被確診為患有一種罕見的成年人形式的線粒體疾病。正是一個經歷了如此過程的產品。 非商業(yè)轉載請注明作譯者、出處,并保留本文的原始鏈接:http://www.ituring.com.cn/article/120792 Chris Eppstein,Compass框架的創(chuàng)建...
摘要:例如解析現(xiàn)在流行的預編譯語言和的優(yōu)點簡單,易于維護,管理更加容易高效的進行開發(fā)使用實現(xiàn)配色將變得非常容易。變量避免編譯,有時候需要輸出一些不正確的語法或者使用一些不認識的專有語法,在前面加入。對于剛接觸的預編譯的前端,我推薦用。 1、什么是Less? ? less官網(wǎng):Less is More , Than CSS -少即是多,比CSS ? 官網(wǎng)gitHub:https:/...
摘要:最近的一次更新的變量有效,并且會作用于全部的引用的處理方式和相同,變量值輸出時根據(jù)之前最近的一次定義計算,每次引用最近的定義有效嵌套三種預編譯器的選擇器嵌套在使用上來說沒有任何區(qū)別,甚至連引用父級選擇器的標記也相同。 面試匯總一:2018大廠高級前端面試題匯總 高級面試:【半月刊】前端高頻面試題及答案匯總 css內容 響應式布局 當前主流的三種預編譯器比較 CSS預處理器用一種專門的...
摘要:值得慶幸的是,這三款預處理器語言的語法和語法都差不多。在這一節(jié)中,我們依次來對比一下這三款預處理器語言各種特性的異同之處,以及使用方法。預處理器語言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規(guī)則,CSS預處理器語言也不例外,在真正使用CSS預處器語言之前還有一個不可缺少的知識點,就是對語法的理解。值得慶幸的是,這三款CSS預...
閱讀 2331·2021-10-08 10:04
閱讀 1104·2021-09-03 10:40
閱讀 1157·2019-08-30 15:53
閱讀 3313·2019-08-30 13:13
閱讀 2930·2019-08-30 12:55
閱讀 2286·2019-08-29 13:21
閱讀 1352·2019-08-26 12:12
閱讀 2760·2019-08-26 10:37