CSS3 颜色值HSL表示方式&amp;简单

CSS3 颜色值HSL表示方式&简单实例全教程

谓HSL

HSL色彩模式：就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

因为人们看到颜色第一时间会产生“这是什么颜色？深浅如何？明暗如何？”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色，所以HSL色彩模式是人类对颜色最直接的感知。
HSL(H,S,L)

取值：

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%

兼容性：

HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持。IE8支持该方式。

实例1:在css中直接使用hsl值

<style>.test{background-color:hsl(360,50%,50%);}</style>

实例2：使用Js修改dom时指定hsl值，以亮度为例
html:

    <style>        body {            padding: 100px;        }         #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">亮度：</label>            <input id="ex1" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="15" />        </div>    </div>

//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});

完整代码：

<!doctype html><html lang="zh-CN"><head><title>动态hsl调整背景色</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><style>body {    padding: 100px;}#ex1Slider .slider-selection {background: #BABABA;}</style><h1>动态hsl调整背景色</h1><div class="form">    <div class="form-group">        <label for="">亮度：</label>        <input id="ex1" data-slider-id="ex1Slider" type="text"               data-slider-min="0" data-slider-max="100" data-slider-step="1"               data-slider-value="15" />    </div></div><script>//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});</script>  </body></html>

效果如下：

实例3：修改多个值：
html:

<style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?调：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">饱和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div>

js:

//色调$('#Hue').slider().on('change', function (e) {    showColor();});//饱和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//统一显示颜色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();

完整代码：

<!doctype html><html lang="zh-CN"><head><title>新建HTML</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><h1>动态hsl调整背景色@多值</h1> <style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?调：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">饱和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div> <script>//色调$('#Hue').slider().on('change', function (e) {    showColor();});//饱和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//统一显示颜色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();</script></body></html>

泼辣修图」拥有上百项调整工具

是图像调色的利器

同是泼辣团队出品的视频应用「泼辣24」

怎能不继承着良好基因呢？

现在！

「泼辣24」的调色功能

来了！真的来了！

「泼辣24」的调色

到底有多强大呢？

我们一睹为快！

视频调色！泼辣24重磅更新即将来临

点击链接观看视频

「泼辣24」加入了最为常用的曝光工具

包括曝光、对比度、高光、阴影、白色与黑色

同时加入了十分强大的调色工具

包括饱和度、鲜艳度、色温、色调等等

最为震撼的是

「泼辣24」还加入了HSL工具

利用这个工具

你可以轻松的制作局部色彩效果

进行色彩转换

改变色彩明度

控制色彩纯度

「泼辣24」是极少数

支持该工具的移动应用

从此以后

在手机上

你也可以轻松完成视频调色

制作精美影片

这！

就是「泼辣24」

你的移动视频调色专家

点击扩展链接立即体验吧

热点问题解答

一、什么时候会推出「泼辣24」的安卓版本和桌面版本？

答：「泼辣24」目前除iOS版在苹果应用商店上架外，安卓版「泼辣24」已经列入开发计划，且相关开发工程师已经就位，具体发布时间要视工程进度，但肯定会比iOS版开发周期要快，届时官方会第一时间告之，在此之前还请耐心等待。至于其它版本「泼辣24」，比如桌面版，目前还处于论证阶段。

二、为什么泼辣团队的产品都是先开发苹果版本？

答：除了iOS平台苹果手机相对来说设备类型少、标准统一，易于进行兼容性适配，相比安卓相关工程要复杂数倍，会导致测试周期延长，产品开发严重滞后。当然，工程团队人力不足也是另一个重要原因。好消息是泼辣团队自去年启动全球招募计划以来已经有大量优秀工程师加入，目前「泼辣24」安卓版开发工程师已经就位并准备着手开发。

三、「泼辣24」哪些功能是免费的？哪些是收费的？

答：「泼辣24」是一款免费的视频编辑分享工具，除付费滤镜外（付费滤镜也享有七天免费试用）的其它所有编辑功能，及默认滤镜均为永久免费使用。

目前「泼辣24」的订阅会员可额外获得电影LUT（辣特）滤镜，该系列滤镜由专业电影调色师制作完成，目前已经拥有几十部影片上百部LUT滤镜，且保持每月更新（5部影片共计20款LUT）。

四、我购买了「泼辣24」会员，但为何无法使用付费滤镜？

答：如果您购买了「泼辣24」的会员但是依旧无法使用付费滤镜，请进入「泼辣24」的设置，然后一直往下滑动找到「恢复购买」并点击即可，如果依旧无法使用，请发送邮件至 support@polarr.co 获取帮助。

五、我已经是「泼辣修图」会员，能免费使用「泼辣24」的付费滤镜吗？

答：对不起，目前「泼辣修图」和「泼辣24」是完全独立的两款产品，其各自会员也完全独立，因此您无法利用泼辣修图的会员去解锁「泼辣24」的高级功能。

六、「泼辣24」是否存在永久会员？

答：「泼辣24」目前仅支持订阅会员，订阅制对新用户来说更友好，用户每月仅需支持很少的费用（20元）就可以进行初次体验。同时产品做不好用户可以选择不再续订，对创作团队也是监督和激励。

另外关注泼辣修图微信公众号文章，我们会经常性做各做福利活动赠送会员，至于传说中的「永久会员」，我们去年至今曾推出三次幸运购买抽奖活动，并送出了近100名永久会员会籍，之于泼辣24，如果大家呼声很高的话，我们不排除会在优惠活动中推出。

七、「泼辣24」会员到期后之前购买的滤镜是否仍然可以使用？

答：「泼辣24」电影LUT滤镜为订阅会员专享，会员到期后，所有付费滤镜将无法使用，直到你再次开通会员。

八、「泼辣24」会员为什么会自动扣款？如何退订和退款？

答：「泼辣24」订阅制遵循苹果应用商店的规则设计，选择订阅产品，默认到期后自动扣费续费。如果你不希望这样，可以进入你的苹果ID帐号设置进行修改。如果你误操作导致消费购买，也可以通过苹果应用商店进行直接退款，详细步骤可参考百度经验相关教程：

https://jingyan.baidu.com/article/456c463b33186d0a583144cc.html

九、我希望制作某部电影的辣特滤镜，请问如何告之你们？

答：「泼辣24」每月更新选题主要来自经典影片及最新上映的热门影片，如果会员有特别想要制作的电影LUT（辣特）可以发邮件至support@polarr.co告诉我们，如果会根据用户的呼声决定是否帮你达成心愿。

LUT滤镜及使用问题

一、我可以在「泼辣24」中导入「泼辣修图」的滤镜吗？

答：当然可以，您只需要进入「泼辣24」的滤镜界面，然后点击右上角的「+」号，这时候会出现很多选项，您可以通过扫描「泼辣修图」二维码的方式，或者从相册导入「泼辣修图」二维码的方式来安装「泼辣修图」滤镜。

二、为什么导入「泼辣修图」滤镜之后，我在「泼辣24」里面看到的效果和我在「泼辣修图」里面看到的效果不一样？

答：如果您的「泼辣修图」滤镜包含了局部调整（例如渐变调整、圆形调整等）、特效调整（例如眩光、色差、暗角）、图层调整等参数，那么这些参数是会被「泼辣24」自动忽略的，因此效果可能和您在「泼辣修图」中看到的不一样。

三、为什么我无法运行「泼辣24」？

答：首先，请确认您的系统是iOS 12.0或更高版本，其次请确认您授权了使用「泼辣24」所必需的权限，如果依旧无法使用，请发送邮件至 support@polarr.co 获取帮助。

四、什么是LUT？

答：LUT是Look Up Table（颜色查找表）的缩写，为了方便大家记忆泼辣团队给LUT起了一个中文译名叫「辣特」，您可以将LUT（辣特）简单的认为是一个滤镜，但这个滤镜具有超强的兼容性，可以在几乎所有的专业图像/视频编辑软件中运行，最为常见的LUT格式为cube格式，「泼辣24」支持的LUT格式也是cube格式。

五、LUT有什么优势？

答：LUT（辣特）因为是点到点的色彩调整，所以可以做出十分精细和细腻的色彩效果，同时LUT（辣特）具有极高的运算效率和极强的兼容性，最为重要的是，您通过其他软件导出的LUT（辣特）也可以在「泼辣24」中加载和使用！

六、如何通过「泼辣24」导入LUT？

答：您只需要进入「泼辣24」的滤镜界面，然后点击右上角的「+」号，这时候会出现很多选项，然后选择「导入LUT文件」，接着选择对应的LUT文件（后缀为.cube的文件）即可。

七、如何将泼辣修图的调整导出为LUT？

答：目前仅有「泼辣修图」桌面版（网页版、Windows 10版本、Mac OS版本）支持该功能，您只需要调整万效果之后进入LUT菜单，然后选择「导出LUT」即可：

注意！如果您的调整里面包含局部调整、特效、质感等参数，LUT是无法包含的，因此这些调整会被忽略，您可以在导出面板中看到哪些参数被忽略了：

八、「泼辣24」中的LUT如何导出？

答：对不起，「泼辣24」目前并不支持参数微调和LUT导出功能。

九、「泼辣24」是否会推出转场功能？

答：目前，「泼辣24」仅仅是1.0版发布，未来团队将根据用户的反馈添加和优化各类功能，请对我们保持关注。

十、我在使用「泼辣24」过程中发现一些Bug，请问如何反馈？

答：泼辣24在公测期间就收到了广大用户的许多有益建议，如果您在使用「泼辣24」的过程中遇到使用问题，请把详细问题描述及硬件型号、软件版本等信息发送邮件至 support@polarr.co ，如果能录制视频将更有助于帮助我们快速解决问题，感谢大家的支持。

十一、我向你们反馈的问题，为什么一直没有修复？

答：首先感谢您积极反馈建议。泼辣团队目前还是一个很小的创业团队，限于人力，我们无法对所有邮件一一回复。而且Bug的检测、验证、修复、封装、测试、发布，需要专业的流程和时间。泼辣团队尽量保证每一款产品（版本）的最佳可用性，不会向用户发布半成品和残次品，所以请尽量多给我们一些时间，你们的反馈邮件我们都已仔细阅读，向你们的热情和信任致敬。

泼辣24功能简介

「泼辣24」，帮助你轻松获得真实电影质感和影视级拍摄体验，内置「智能滤镜引擎」，能够不断学习你的色彩偏好，毫秒之间为你匹配最佳色彩方案。

? 内置海量专业影视级LUT（辣特），基于热门影视定期更新

? 不断成长的「智能滤镜引擎」，用得越多就越懂你

? 影视级防抖体验，轻松获得稳定画面

? 强劲「惯性缩放」，轻松拥有专业级别的镜头拉伸

? 高品质的美颜和面部优化，自然不失真

? 便利「瞬时保存」模式，即录即存无需等待

? 音轨编辑、变速控制等多项基础调整

? 支持导入本地视频进行编辑

? 支持导入「泼辣修图」滤镜和外部LUT（.cube）文件

SS变量（又名自定义属性）已在Web浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解它们。

简介

CSS变量是在CSS文档中定义的值，其目的是可重用性并减少CSS值中的冗余。下面是一个基本示例。

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #235ad1;
}

在此代码段中，#235ad1使用了3次。想象一下，对于一个大型项目，不同的CSS文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。

使用CSS变量，可以更快解决这个问题。定义变量名需要用--开头。首先，我们现在将在:root或<html>元素中定义变量。

:root {
  --color-primary: #235ad1;
}

.section {
  border: 2px solid var(--color-primary);
}

.section-title {
  color: var(--color-primary);
}

.section-title::before {
  /* Other styles */
  background-color: var(--color-primary);
}

是不是比前面的干净得多？--color-primary变量是全局变量，因为我们在:root元素中定义了它。但是，我们还可以将变量范围限定到整个文档中的某些元素。

命名变量

与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。

/* 合法命名 */
:root {
 --primary-color: #222;
 --_primary-color: #222;
 --12-primary-color: #222;
 --primay-color-12: #222;
}

/* 非法命名 */
:root {
 --primary color: #222; /* Spacings are not allowed */
 --primary$%#%$#
}

作用域

CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例:

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

变量element是全局的，因此可以在cool()函数内部访问。但是，只能在cool()函数中访问变量otherElement。

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

变量--primary-color是全局变量，可以从文档中的任何地方访问。变量--primary-color由于是在.section-title定义的，所以只能在.section-title中访问。

下面是一个比较直观的示例图片，可以加强我们的理解：

变量--primary-color用于标题颜色。我们想为作者名和最新文章标题自定义颜色，因此我们需要将--primary-color覆盖。这同样适用于--unit变量。

/* 全局变量 */
:root {
  --primary-color: #235ad1;
  --unit: 1rem;
}

/* section-title 默认的颜色和间距 */
.section-title {
  color: var(--primary-color);
  margin-bottom: var(--unit);
}

/* 覆盖 section-title 样式 */
.featured-authors .section-title {
  --primary-color: #d16823;
}

.latest-articles .section-title {
  --primary-color: #d12374;
  --unit: 2rem;
}

回退方案

这里的回退不是不支持 CSS 变量的回退，而是 CSS 变量可以支持回退方案。考虑以下示例：

.section-title {
  color: var(--primary-color, #222);
}

注意，var()有多个值。第二个#221只在变量--primary-color由于某种原因没有定义的情况下有效。不仅如此，我们还可以将var()嵌套到另一个var()中。

.section-title {
  color: var(--primary-color, var(--black, #222));
}

在变量值依赖于某个动作的情况下，该特性非常有用。当变量没有值时，为它提供一个回退很重要。

用例一：控制组件的大小

在设计系统中，按钮通常有多种尺寸。通常，按钮可以具有三种尺寸（Small, normal, large）。使用 CSS 变量来实现它并不容易：

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

通过在按钮组件作用域内更改变量--unit，我们创建了按钮的不同变体。

用例二：CSS 变量和 HSL 颜色

HSL代表色调，饱和度，亮度。色相的值决定了颜色，饱和度和亮度值可以控制颜色的深浅。

:root {
  --primary-h: 221;
  --primary-s: 71%;
  --primary-b: 48%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
  transition: background-color 0.3s ease-out;
}

/* 使背景更暗 */
.button:hover {
  --primary-b: 33%;
}

这里何通过减小变量--primary-b使按钮变暗。

用例三：比例调整

如果您使用过Photoshop，Sketch，Figma或Adobe XD之类的设计程序，那么我们会想在调整元素大小的同时按住Shift键以避免扭曲它。

在CSS中，没有直接的方法来做到这一点，但是我们有一个简单的解决方法，使用CSS变量。

假设有一个图标，并且其宽度和高度应该相等。我定义了变量--size，用于宽度和高度。

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

现在，您只需更改--size变量的值即可模拟Shift调整大小的效果。

用例四：CSS Grid

CSS 变量对于网格非常有用。假设希望网格容器根据定义的首选宽度显示其子项。与为每个变体创建类并复制CSS相比，使用变量更容易做到这一点。

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;

这样，我们可以创建一个完整的网格系统，该系统灵活，易于维护，并且可以在其他项目中使用。可以将相同的概念应用于grid-gap属性。

wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

用例五：全值声明，CSS 渐变

以全值表示，例如，类似渐变的东西。如果整个系统中使用渐变或背景，将其存储到CSS变量中可能是一件好事。

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

或者我们可以存储一个值。以角度为例:

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

用例六：Background Position

我们可以在 CSS 变量中包含多个值，这在需要根据特定上下文将元素放置在不同位置的情况下很有用。

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

用例七：在明暗模式之间切换

现在，网站比以往任何时候都更需要深色和浅色模式。使用CSS变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* 添加到`<html>`元素的类*/
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

用例八：设置默认值

在某些情况下，您将需要使用JavaScript设置CSS变量。假设我们需要获取可扩展组件的高度。

变量--details-height-open为空，它将被添加到特定的HTML元素中。当JavaScript由于某种原因失败时，提供适当的默认值或后备值很重要。

.section.is-active {
  max-height: var(--details-height-open, auto);
}

auto值是 JS 失败时的回退值，并且没有定义CSS变量——details-height-open。

用例九：控制 wrapper 宽度

网站wrapper 可以有多种变化。有时候是需要一个小包装一个页面，一个大包装另一个页面。在这种情况下，合并CSS变量可能是有用的。

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

用例十一：动态网格项目

我们可以在style属性中添加--item-width变量，仅此而已。例如，这种方法可以帮助建立网格原型。

HTML

<div class="wrapper" style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用户头像

另一个有用的用例是大小调整元素。假设我们需要四种不同大小的用户头像，并且只能使用一个变量来控制其大小。

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

用例十三：媒体查询

组合CSS变量和媒体查询对于调整整个网站中使用的变量非常有用。我能想到的最简单的示例是更改间距值。

:root {
  --gutter: 8px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 16px;
  }
}

使用--gutter变量的任何元素都将根据视口大小更改其间距，这是不是很棒吗？

用例十四：继承

是的，CSS变量确实继承。如果父元素中定义了CSS变量，那么子元素将继承相同的CSS变量。我们看下面的例子：

HTML

<div class="parent">
  <p class="child"></p>
</div>

css

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

.child元素可以访问变量--size，因为它从父元素继承了它。很有趣,那它在实际的项目中有啥用呢？

我们有一组以下需求的操作项

改变一个变量就可以改变所有项的大小
间距应该是动态的

HTML

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

CSS

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

请注意，这里是如何将变量--size用于flexbox gap属性的。这意味着间距可以是动态的，并且取决于--size变量。

另一个有用的例子是使用CSS变量继承来定制CSS动画：

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

这样，我们就不需要定义@keyframes两次，它将继承.walk和.run元素的定制CSS 变量。

CSS 变量的工作方式

当var()函数中的CSS变量无效时，浏览器将根据所使用的属性用初始值或继承值替换。

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

我使用16px是color属性的值。这是完全错误的。由于color属性是继承的，因此浏览器将执行以下操作：

该属性是否可继承？

如果是，父节点是否拥有该属性?
是的，继承该值
否:设置为初始值
否:设置为初始值

下面解释浏览器工作的流程图。

网址值

我们可能无法控制网页中的所有资源，其中一些必须在线托管。在这种情况下，您可以将链接的URL值存储在CSS变量中。

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

但是，能想知道是否可以使用url()插入 CSS 变量。考虑以下

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

由于var(--main-bg)被视为url本身，因此无效。当浏览器计算出该值时，该值将不再有效，并且将无法按预期运行。

存储多个值

CSS 变量也可以表示多个值，看下面的例子：

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

在示例中，我们有一个rgba()函数，并且RGB值存储在CSS变量中，以逗号分隔。如果我们想根据元素调整alpha值，这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。

另一个例子是将它与background属性一起使用。

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

@keyframes规则中的动画变量

如果你阅读过CSS变量规范，则可能会读到“动画污染”一词。这个想法是，在@keyframes规则中使用CSS变量时，无法对其进行动画处理。

html

<div class="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

动画无法顺利进行。它将仅对值 (0, 50px, 100px)进行动画处理。根据CSS规范：

@keyframes规则中使用的任何自定义属性都会受到动画污染，这将影响通过动画属性中的var()函数引用它时如何处理它。

如果我们希望上述动画能够正常工作，则应采用老式的方法。这意味着，我们需要用要设置动画的实际CSS属性替换变量。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

计算

你可能不知道可以使用 CSS 变量进行计算。考虑下面示例：

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

.c-avatar 大小会有不同的变化。我将默认值设置为1，所以默认大小为(30px * 30px)。注意不同的类变化以及更改--size值如何导致化身的大小变化。

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

Devtools和CSS变量

我们可以在浏览器DevTools中使用一些有用的技巧，这样就能更轻松地使用CSS变量。

看到颜色

使用CSS变量时，看到颜色或背景值的视觉指示器是否有用？Chrome和Edge证明了这一点。

计算值

要查看CSS变量的计算值，只要将鼠标悬停或单击即可。

禁用CSS变量

当我们需要从使用CSS变量的所有元素中禁用CSS变量时，可以通过从定义它的元素中取消选中它来实现。参见下图：

本文介绍了 CSS 变量的很多内容，希望能对你有些帮助，二创不易，还望点个赞+转发。

作者：Ahmad Shadeed 译者：前端小智来源：ishadeed

原文：https://ishadeed.com/article/css-vars-101/

在线咨询

上一篇：mac硬盘、U盘、SD卡等数据恢复软件
下一篇：CSS技巧：常用的几个CSS前端效果更轻松的写页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS3 颜色值HSL表示方式&amp;amp;简单

谓HSL

取值：

兼容性：

热点问题解答

LUT滤镜及使用问题

泼辣24功能简介

简介

命名变量

作用域

回退方案

用例一：控制组件的大小

用例二：CSS 变量和 HSL 颜色

用例三：比例调整

用例四：CSS Grid

用例五：全值声明，CSS 渐变

用例六：Background Position

用例七：在明暗模式之间切换

用例八：设置默认值

用例九：控制 wrapper 宽度

用例十一：动态网格项目

用例十二：用户头像

用例十三：媒体查询

用例十四：继承

CSS 变量的工作方式

网址值

存储多个值

@keyframes规则中的动画变量

计算

Devtools和CSS变量

看到颜色

计算值

禁用CSS变量

您的项目需求

CSS3 颜色值HSL表示方式&简单