深入解析CSS中的自定义属性
|
像普通的CSS属性，自定义属性是动态的，他们可以在运行时修改，也可以在媒体查询时通过更改DOM添加一个新类，同时也可以指派内联元素和一个常规CSS里申明选择器。还可以通过正常的cascade规则或者使用JavaScript覆盖。最主要的是，他们的可以继承的，所以当他们应用到DOM元素的时候，他们的子元素也会继承属性。 为了更简洁，预处理器变量是语法作用域和编译后静态。自定义属性作用域是DOM，他们都很灵活。 实际案例 不论真假，有大量非常好的例子我都很想展示，但为了不让这篇文章太丑，我选了两个。 我选择这些例子不仅仅因为它们的理论，它们也是我们过去实际面临的挑战，我依然记得试图用预处理器，但这是不可能的。现在好了，直接自定义属性走起。 媒体查询的响应式特性 正如我上面提到的，在媒体查询里面Sass 不能正常运行，所以你必须每个单独处理。 下面的例子定义了变量$gutterSm, $gutterMd和$gutterLg，然后给每个变量申明一个单独的规则：
CSS Code复制内容到剪贴板
/* Declares three gutter values, one for each breakpoint */
$gutterSm: 1em; $gutterMd: 2em; $gutterLg: 3em;
/* Base styles for small screens, using $gutterSm. */
.Container { margin: 0 auto; max-width: 60em; padding: $gutterSm; } .Grid { display: flex; margin: -$gutterSm 0 0 -$gutterSm; } .Grid-cell { flex: 1; padding: $gutterSm 0 0 $gutterSm; }
/* Override styles for medium screens, using $gutterMd. */
@media (min-width: 30em) { .Container { padding: $gutterMd; } .Grid { margin: -$gutterMd 0 0 -$gutterMd; } .Grid-cell { padding: $gutterMd 0 0 $gutterMd; } }
/* Override styles for large screens, using $gutterLg. */
@media (min-width: 48em) { .Container { padding: $gutterLg; } .Grid { margin: -$gutterLg 0 0 -$gutterLg; } .Grid-cell { padding: $gutterLg 0 0 $gutterLg; } } 使用自定义属性来完成相同的东西，你只需要定义样式即可。你可以使用一个 gutter 属性，然后随着媒体查询的变化，更新gutter 的值，它就会做出相应的变化。
CSS Code复制内容到剪贴板
:root { --gutter: 1.5em; }
@media (min-width: 30em) { :root { --gutter: 2em; } } @media (min-width: 48em) { :root { --gutter: 3em; } }
/* * Styles only need to be defined once because * the custom property values automatically update. */
.Container { margin: 0 auto; max-width: 60em; padding: var(--gutter); } .Grid { --gutterNegative: calc(-1 * var(--gutter)); display: flex; margin-left: var(--gutterNegative); margin-top: var(--gutterNegative); } .Grid-cell { flex: 1; margin-left: var(--gutter); margin-top: var(--gutter); } 虽然有额外增加的自定义属性语法，但是相比冗长的代码完成同样的事明显好很多。这里只考虑了三个变量，如果变量越多，这将节省更多的代码。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |