css变量

CSS变量与一些"骚操作"

css样式同一个颜色值在几十处重复出现，改一次要全局替换；响应式布局中各种尺寸换算头大；想动态改样式只能靠JS硬操作？今天分享一些CSS变量+一些"骚操作"，让样式代码从"乱糟糟"变"活起来"。

一、CSS变量

1. 基础用法：定义与使用

/* 定义变量（通常放根元素，全局可用） */
:root {
  --primary-color: #42b983; /* 主色调 */
  --font-size-base: 16px;   /* 基础字体大小 */
  --spacing: 8px;           /* 基础间距 */
}

/* 使用变量 */
.btn {
  background: var(--primary-color);
  padding: var(--spacing) calc(var(--spacing) * 2); 
  font-size: var(--font-size-base);
}

• 变量名必须以--开头，区分大小写（--color和--Color是两个变量）
• 用var(变量名, 默认值)调用，默认值可选（如var(--unknown, #fff)）

2. 变量的"_scope魔法"

变量可以在任意选择器内定义，只在该作用域生效，实现样式隔离：

/* 全局变量 */
:root { --text-color: #333; }

.card {
  --text-color: #666; /* 卡片内的局部变量 */
}

.card p {
  color: var(--text-color); /* 用的是.card内的#666 */
}

footer p {
  color: var(--text-color); /* 用的是全局的#333 */
}

3. 动态修改：从"死样式"到"活交互"

（1）媒体查询中改变量

:root {
  --column-count: 2; /* 默认2列布局 */
}

/* 屏幕变大时自动改列数 */
@media (min-width: 1024px) {
  :root { --column-count: 4; }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
}

（2）JS直接操作变量

//明亮与黑暗的切换
// 获取根元素
const root = document.documentElement;

// 改变量（切换暗黑模式示例）
document.getElementById('darkMode').addEventListener('click', () => {
  root.style.setProperty('--bg-color', '#1a1a1a');
  root.style.setProperty('--text-color', '#fff');
});

二、CSS骚操作：少写代码多做事

1. 用clamp()实现"智能响应式尺寸"

不用媒体查询，让字体/间距自动适应屏幕：

:root {
  --min-font: 16px;
  --max-font: 20px;
  --screen-min: 320px;
  --screen-max: 1200px;
}

.title {
  /* 公式：clamp(最小值, 动态值, 最大值) */
  font-size: clamp(
    var(--min-font),
     calc(
      var(--min-font) + 
      (100vw - var(--screen-min)) * 
      (var(--max-font) - var(--min-font)) / 
      (var(--screen-max) - var(--screen-min))
    ),
    var(--max-font)
  );
}

屏幕越小字体越接近16px，越大越接近20px，自动过渡

2. :where()简化选择器权重

解决多层嵌套选择器权重太高，不好覆盖的问题：

/* 普通写法：权重高，难覆盖 */
.header .nav .link { color: #333; }

/* 骚操作：权重为0，方便后续修改 */
:where(.header, .footer) :where(.nav .link) {
  color: #333;
}

/* 后续只需用低权重就能覆盖 */
.footer .link { color: #666; }

3. 变量+mask-image实现渐变遮罩

给图片加渐变遮罩，实现"渐隐"效果：

:root {
  --mask-start: transparent;
  --mask-end: black;
}

.img-mask {
  /* 遮罩从左到右：透明→黑色（显示） */
  mask-image: linear-gradient(to right, var(--mask-start), var(--mask-end));
  -webkit-mask-image: linear-gradient(to right, var(--mask-start), var(--mask-end));
}

/* hover时反向遮罩 */
.img-mask:hover {
  --mask-start: black;
  --mask-end: transparent;
}

4. @property让变量支持动画

默认CSS变量不能直接动画，用@property声明类型即可：

/* 声明变量类型为颜色 */
@property --color {
  syntax: '<color>';
  initial-value: #fff;
  inherits: false;
}

.box {
  background: var(--color);
  transition: --color 0.3s;
}

.box:hover {
  --color: #42b983; 
}

三、实战技巧：让变量更"能打"

1. 主题管理：把主题色、圆角、阴影等抽成变量，换主题只需改变量值

   /* 浅色主题 */
   [data-theme="light"] {
     --bg: #fff;
     --text: #333;
   }
   
   /* 深色主题 */
   [data-theme="dark"] {
     --bg: #1a1a1a;
     --text: #fff;
   }

2. 组件封装：给组件定义"可配置变量"，使用者无需改源码就能定制

   .alert {
     /* 默认值 */
     --alert-bg: #f0f9eb;
     --alert-color: #1b745e;
     background: var(--alert-bg);
     color: var(--alert-color);
   }
   
   /* 使用者自定义警告样式 */
   .alert.warning {
     --alert-bg: #fffbeb;
     --alert-color: #92400e;
   }