初识css自定义属性

栏目: CSS · 发布时间: 5年前

内容简介:这算是一篇两篇文章译文的糅合体,旨在帮助理解css自定义属性。今天,CSS预处理器是Web开发的标准。 预处理器的一个主要优点是它们使您能够使用变量, 这有助于您避免复制和粘贴代码,并简化了开发和重构。在本文中,您将了解到如何将CSS变量集成到CSS开发工作流程中,这会使得样式表更易于维护和不重复性。

这算是一篇两篇文章译文的糅合体,旨在帮助理解css自定义属性。

今天,CSS预处理器是Web开发的标准。 预处理器的一个主要优点是它们使您能够使用变量, 这有助于您避免复制和粘贴代码,并简化了开发和重构。

在本文中,您将了解到如何将CSS变量集成到CSS开发工作流程中,这会使得样式表更易于维护和不重复性。

现在,让我开始吧!

1* css变量的语法

<1> 什么是css变量?

  • 如果您使用过任何一种编程语言,那么您应该已经熟悉了变量的概念。 变量允许您存储和更新程序所需的值以便工作。

  • 在CSS中使用变量的好处与在编程语言中使用变量的好处并没有太大的不同。

  • 以下是规范对此的说法:

[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

W3C Specification .

[使用CSS变量]可以更容易地读取大文件,因为看似任意的值现在具有信息性名称,并且使得编辑此类文件更容易且更不容易出错,因为只需要在自定义属性中更改一次值 ,这种更改将自动传播到所有使用该变量的地方。

<2>css自定义变量语法

  • 要声明变量而不是常用的CSS属性(如颜色或填充),只需提供以 - - 开头的自定义命名属性:

    .box{
      --box-color: #4d4e53;
      --box-padding: 0 10px;
    }
    复制代码

    属性的值可以是任何有效的CSS值:颜色,字符串,布局值,甚至是表达式。

    以下是一些有用的自定义属性:

    :root{
      --main-color: #4d4e53;
      --main-bg: rgb(255, 255, 255);
      --logo-border-color: rebeccapurple;
    
      --header-height: 68px;
      --content-padding: 10px 20px;
    
      --base-line-height: 1.428571429;
      --transition-duration: .35s;
      --external-link: "external link";
      --margin-top: calc(2vh + 20px);
    
      /* Valid CSS custom properties can be reused later in, say, JavaScript. */
      --foo: if(x > 5) this.width = 10;
    }
    复制代码

    如果您不确定 :root,在HTML中它与html相同但具有更高的特异性,相当于全局变量。

<3> css变量的使用

var() 函数

  • 您要通过 var() 这个 css 函数来使用 css 变量,将 css 变量名传入这个函数:

    .box{
      --box-color:#4d4e53;
      --box-padding: 0 10px;
    
      padding: var(--box-padding);
    }
    
    .box div{
      color: var(--box-color);
    }
    
    复制代码
  • var() 函数的语法是:

    var( <custom-property-name> [, <declaration-value> ]? )
    

    方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。

    如果您不确定是否已定义自定义属性并且想要提供用作回退的值,则可以执行此操作。

    例如:

    color: var(--foo, red, blue); //将red, blue同时指定为回退值;即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。
    
    padding: var(--box-padding, var(--main-padding));
    复制代码

calc()函数

  • 由于我们习惯使用预处理器和其他语言,我们希望在处理变量时能够使用基本运算符。 为此,CSS提供了一个calc()函数,它使浏览器在对自定义属性的值进行任何更改后重新计算表达式:

    :root{
      --indent-size: 10px;
    
      --indent-xl: calc(2*var(--indent-size));
      --indent-l: calc(var(--indent-size) + 2px);
      --indent-s: calc(var(--indent-size) - 2px);
      --indent-xs: calc(var(--indent-size)/2);
    }
    复制代码
  • 如果您尝试使用无单位值,则使用calc()函数可以带来很大的方便:

    :root{
      --spacer: 10;
    }
    
    .box{
      padding: var(--spacer)px 0; /* DOESN'T work */
      padding: calc(var(--spacer)*1px) 0; /* WORKS */
    }
    复制代码

css自定义属性的scop

  • 自定义属性也遵守CSS层叠规则。

2* 利用js使用css自定义属性

假设您有一个名为 --left-pos 的 CSS 变量,其值为 100px,范围为 CSS 文档中的 .sidebar 类:

.sidebar {
--left-pos: 100px;
}
复制代码

可以通过如下方式获取 --left-pos 的值:

const sidebarElement = document.querySelector('.sidebar');

const cssStyles = getComputedStyle(sidebarElement);

const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();

console.log(cssVal); //100px
复制代码

设置css属性值:

sidebarElement.style.setProperty('--left-pos', '200px');
复制代码

3* css 变量和预处理变量有什么不同?

在样式化网站时,您可能通过使用Sass和Less等预处理器来使得变量的更具有灵活性。

预处理器允许您设置变量,并在函数,循环,数学运算等中使用它们。这是否意味着CSS变量无关紧要?

不完全是,主要是因为CSS变量与预处理器变量不同。

差异源于CSS变量是在浏览器中运行的真正的CSS属性,而预处理器变量需要被编译成常规CSS代码,因此浏览器对它们一无所知。

这意味着您可以更新样式表文档中的CSS变量,内联样式属性和SVG表示属性,或者选择使用JavaScript 动态 操作它们。对于 CSS 自定义属性的修改,会立马传递到使用到他的地方,而预处理器则无法完成这种行为,因为他们是提前已经编译好了的!

这并不是说你需要在一个或另一个之间做出选择:没有什么能阻止你利用CSS和预处理器变量一起工作的超能力。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web程序设计

Web程序设计

塞巴斯塔 / 2010-1 / 69.00元

《Web程序设计(第5版)》全面介绍了建立和维护Web站点必需的工具和技术,包括Internet和万维网的起源与演变、Web客户端和服务器端开发中的基本概念,以及与Web开发相关的主要编程语言和工具等。《Web程序设计(第5版)》对第4版的内容做了大量细致的修改并且新增了许多内容,如介绍了Flash的使用、Ajax工具包和其安全性,以及与ASP.NET AJAX的相关内容。 《Web程序设计......一起来看看 《Web程序设计》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换