当前位置：首页 > news >正文

【CSS】---- CSS 变量，实现样式和动画函数复用

news 来源：原创 2025/5/7 14:40:16

1. 前言

本文介绍 CSS 的自定义属性（变量）来实现样式、动画等 CSS 的复用。都是知道在 CSS 和 JS 复用一个很重要的事情，比如 JS 的函数封装，各个设计模式的使用等等，CSS 中样式的复用，同样重要。MDN 使用 CSS 自定义属性（变量）：自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。

2. 实例：限定文本行数

2.1 效果图

输入图片说明

2.2 原样式

.rui-limit1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /*! autoprefixer: off */
}

.rui-limit2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /*! autoprefixer: off */
}

.rui-limit3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /*! autoprefixer: off */
}

可以看到每一个都将样式写了一遍，限制多少行，改变对应的数量，当然也可以将三个整合一起，然后修改每一个的 -webkit-line-clamp 值，就能简化，然后自定义行数的时候直接修改 -webkit-line-clamp 的值就可以。但是 -webkit-line-clamp 属性相对还是长了一点，对于不经常使用的人来说，不一定能记住，因此在此基础上引入 CSS 变量，来解决这个问题。

2.3 引入变量的样式

.rui-limit{
  --limit-val: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: var(--limit-val);
  -webkit-box-orient: vertical;
  /*! a