整合CSS 变量及Js 和 Sass 之间共享变量

Posted 2021-10-11 面条请不要欺负汉堡

CSS 变量 这个是 CSS 新功能，2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量,所有主要浏览器已经都支持了。

一.css 变量 语法

（1）.变量的声明

声明变量的时候，变量名前面要加两根连词线（–）。

/* ody选择器里面声明了两个变量：--bgc和 --color。 */
body {
  --bgc: #B3C0D1;
  --color: #ccc;
}

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。
注意：变量名大小写敏感，–header-color和–Header-Color是两个不同变量。

A. 全局变量

root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

    :root { --color: blue; }
    .box{color: var(--color)}

B.局部变量

.pather{
--color:red
}
.child{
	color:var(--color)
}

（2）var() 函数

var()函数用于读取变量。

body {
  --bgc: #000;
  --color: #f00;
}
.pather{
	width: 200px;
	text-align: center;
	background-color:  var(--bgc);
    color:  var(--color);
}

<div class="pather">
			css变量
			<div class="child">var()函数</div>
		</div>

A .设置默认值

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(–color,#ccc);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

 var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

B.变量声明

var()函数还可以用在变量的声明。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

注意，变量值只能用作属性值，不能用作属性名

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量–side用作属性名，这是无效的

C. 结合css3 函数使用

如：CSS3 calc()一起计算

p{
  --size: 20;   
  font-size: calc(var(--size) * 1px);//20px
}

（3）.变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

.child {
    color: var(--color, #ccc);
    --text: "inline-";
    display: var(--text)"block";
}

如果变量值是数值，不能与数值单位直接连用。

.child {
    --size: 20;
    /*无效*/
    font-size: var(--size)px;
}

数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

.child {
    --size: 20;
    font-size: calc(var(--size)*1px);
}

（4）.作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

这就是说，变量的作用域就是它所在的选择器的有效范围。

二. 响应式布局

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。
利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

三.兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法。


a {
  color: #7F583F;
  color: var(--primary);
}
也可以使用@support命令进行检测。


@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

四. javascript 操作

JavaScript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 变量的写法如下:

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

五. 补充

（1）. CSS Modules

材料

（2）. 如何在 Javascript 和 Sass 之间共享变量

1. 安装依赖项
   npm install sass-loader node-sass webpack --save-dev
2. 需要配置webpack以便使用，sass-loader以便我们可以从Javascript访问我们的Sass代码

  // webpack.config.js/vue.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\\.css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
     }
    ]
   }
  }

3. 利用:export {}可以导出需要的变量
   CSS模块有一个名为的简洁实用程序:export。该:export指令的工作原理基本上类似于ES6的export关键字。您的Sass代码将导出一个对象，其中包含要在Javascript中使用的变量名称及其关联的值。这些值都导出为字符串。

variables.scss
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;

// sidebar
$menuBg:#304156;

// the :export directive is the magic sauce for webpack
:export {
	theme: $--color-primary;
	menuBg: $menuBg;
}

5. 利用vuex 存放变量

store/modules/settings.js
import variables from '@/assets/css/variables.scss'

const settings= {
	state: {
	  theme: variables.theme
	},
	mutations:{
		CHANGE_THEME: (state, val) => {
			state.theme = val
		}
	},
	actions:{
		changeTheme({ commit }, data) {
			commit('CHANGE_THEME', data)
		}
	}
}

export default settings

7. 组件

<template>
    <el-container>
        <el-header
            :style="{
                backgroundColor: bg,
                color: color,
            }"
            >Header</el-header
        >
        <el-main>
            <P>内容</P>
            <div class="drawer-item">
                <span>主题颜色</span>
                <theme-picker
                    style="float: right; height: 26px; margin: -3px 8px 0 0"
                    @change="themeChange"
                />
            </div>
        </el-main>
        <el-footer
            :style="{
                backgroundColor: bg,
                color: color,
            }"
            >Footer</el-footer
        >
    </el-container>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import variables from "@/assets/styles/variables.scss";

export default {
    name: "Login",
    components: { ThemePicker },
    data() {
        return {
            bg: variables.menuBg,
        };
    },
    computed: {
        ...mapState(["settings"]),
        color() {
            return this.settings.theme;
        },
    },
    methods: {
        themeChange(val) {
            this.$store.dispatch("settings/changeTheme", val);
        },
    },
};
</script>

9.通过选择主题颜色 来改变字体颜色

六. 案例

简易主题皮肤

<template>
    <el-container :class="`theme-${theme}`">
        <a
            class="switch"
            @click="theme = theme === 'dark' ? 'bright' : 'dark'"
            >{{ theme === "dark" ? "暗黑主题" : "默认主题" }}</a
        >
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            theme: "bright",
        };
    },
};
</script>
<style>
.theme-bright {
    --bg-fill: #b3c0d1;
    --text-color: #409eff;
}

.theme-dark {
    --bg-fill: #060130;
    --text-color: #f00;
}

header,
footer {
    background: var(--bg-fill);
    color: var(--text-color);
}
.switch {
    background: var(--text-color);
    padding: 5px 15px 6px 15px;
    position: fixed;
    right: 13px;
    top: 13px;
    color: var(--bg-fill);
    border-radius: 3px;
    cursor: pointer;
}
</style>

我们创建了2个作用域范围，分别是代表默认主题的.theme-bright和暗黑主题的.theme-dark。在这两个局部作用域中使用相同的变量名，各个变量只对主题相应的模块生效。