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

Posted 2022-12-14 面条请不要欺负汉堡

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; 
    .boxcolor: 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。在这两个局部作用域中使用相同的变量名，各个变量只对主题相应的模块生效。