CSS即将具备的6种处理器特性

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

内容简介:CSS即将具备的6种处理器特性

今天看到 @Dennis Gaebel 分享的一篇 博文 。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整CSS,但从新特性的发掘和敏锐性就差十万八千里。

不吐槽了,还是回到正题来吧。

众所周知,CSS是不具备类似其他程序语言一样的特性,没有逻辑性而言。他就是一门描述性语言(暂时把她称作语言吧)。因此才会有各式各样的CSS处理器出来,比如较为流行的Sass,LESS和Stylus。当然还有近年最强大的PostCSS,在项目中使用PostCSS能将你带入到一个全新的CSS世界,至于原因是什么,暂且不在这里阐述。

使用过CSS处理器的同学应该知道,在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。经过多年的沉淀,这些特性开始尝试在CSS中使用。比如下面我们将要说的几个特性,就是CSS自身已具备或将要具备的类似于CSS处理器的特性。

变量

变量是CSS处理器最基本的特性之一,它能类似于其他的程序语言一样。通过变量让我们的代码变得更好维护和管理。比如说给项目定制多道主题之时,变量特性就显得很强。

对于CSS自身而言,他承接CSS处理器众多特性之一 变量 。只是使用的方式略有差别,咱们先来看Sass中的变量声明方式和调用方式:

$spacing-unit: 20px;

main {
    margin: $spacing-unit;
    padding: $spacing-unit;
}

在Sass中通过 $ 声明一个变量。在CSS中是这样来声明变量的:

:root {
    --primary-color: skyblue;
}

nav.primary {
    background: var(--primary-color);
}

从上面的代码中可以看出。在CSS中是通过前缀 -- 来声明一个变量,如果将变量放置在 :root 中,代表其声明的是一个全局变量,如果将其放置在某个CSS代码块中,表示声明的局部变量。使用的时候,借助 var() 函数来调用已声明的变量。在 var() 函数中可以接受两个参数:

div {
    color: var(--my-var, red);
}

第一个参数代表变量名,第二个参数指变量的默认值。也就是说,如果未显式的声明 --my-var 这个变量,那么通过 var() 临时声明了这个变量,而且这个变量的值是 red

到整理这篇文章之时,CSS变量得到了众多主流浏览器的支持,而且使用的场景也特别的多,比如在动画中。这里只是简单的介绍了一下CSS变量的简单使用,有关于这方面的详细介绍, 可以阅读早前整理的相关文章

混合宏

在CSS处理器中另一个特性就是混合宏。混合宏最强的特性就是可以方便你引用一个代码块。同样的我们先来看Sass中的混合宏。

在Sass中通过 @mixin 关键词来声明一个混合宏,然后通过 @include 来调用已声明的混合宏:

@mixin font-size($size, $base) {
    font-size: $size;
    font-size: ($size / $base) * 1rem;
}

body {
    @include font-size(14, 16);
}

这段代码编译出来的CSS:

body {
    font-size: 14px;
    font-size: .875rem;
}

上面创建了一个 font-size 的混合宏,并且给这个混合宏传递了两个参数 $size$base 。而这个混合宏的功能就是计算 font-size 的值。让不支持 rem 的浏览器采用 px 作为单位值,对于支持 rem 的浏览器采用 rem 的单位值。

而CSS中同样可以有 混合宏的特性 ,只不过现在支持的浏览器很少,仅在Chrome浏览器中。而且还需要开启Chrome浏览器相关配置:

CSS即将具备的6种处理器特性

咱们假设你的Chrome浏览器已根据上图的显示一样配置好了相关设置(把 chrome://flags/#enable-experimental-web-platform-features 复制到浏览器URL地址栏),接下来咱们看怎么声明和调用声明好的混合宏:

:root {
    --pink-theme: {
        background: #f64778;
    }
}

body {
    @apply --pink-theme;
}

编译出来的CSS:

body {
    background: #f64778;
}

CSS的混合宏声明有点类似于变量的声明,只不过在里他是一个代码块,然后使用 @apply 规则(类似于Sass中的 @include 关键词)调用已声明好的混合宏。

运算

在CSS处理器中可以进行简单的一些数学运算,比如说加减乘除之类。那么在CSS中其实也有类似的计算功能。此时,我想大家应该马上想到了 calc() 函数 。如此说来,这个也算是CSS带有的CSS处理器特性之一的话,那它比CSS变量特性还要更早。我想大家应该也在项目中或多或少的使用过:

nav {
    margin: calc(1rem - 2px) calc(1rem - 1px);
}

这里咱们看不出计算出来的值是多少,其实浏览器会自动根据表达式计算出其值。特别是CSS具有变量的特性之后, calc() 使用的越来越频繁。

.colorful {
    --translation: 10;
    transform: 
        translateX(calc(var(--translation) * 1vw))
        translateY(calc(var(--translation) * 1vh));
    filter: hue-rotate(calc(var(--translation) * 4.5deg));

    will-change: transform, filter;
    transition: transform 5000ms ease-in-out, filter 5000ms linear;
}

嵌套

我想大家使用CSS处理器嵌套的时候,应该感觉到了非常的爽。当然嵌套要是没用好,反而得到不佳的效果。我看到过有同学无限层次的嵌套,结果编译出来的CSS简值无法让人接受。

同样的,先来看Sass的嵌套:

ul {
    margin: 20px auto;

    li {
        font-size: 12px;
    }

    a {
        text-decoration: none;
    }
}

我想,大家也希望能在CSS中具备类似的嵌套特性吧。 @Tab Atkins 提出过CSS原生的嵌套。CSS的嵌套其实将有可能类似于Sass这样的嵌套。只不过Sass需要编译,而CSS的嵌套不需要编译就能直接被浏览器识别渲染。

不过大家要注意,不管是CSS的处理器,还是CSS自身即将具备的嵌套功能,在使用的时候都需要注意。因为使用嵌套是有风险的,建议任何嵌套不要超过三级。当然,在Sass中可以通过 @at-root 跳出嵌套,或者通过自定义的函数也能实现跳出嵌套。在此也希望在CSS的嵌套中也能具备类似的特性,如果一来,为了维护更好的代码块,就算是嵌套层级深,也能跳出层级关系。只不过话说回来,CSS嵌套不需要编译,提供如此特性似乎又有点多余了。(我自己在YY而以)。

扩展

在Sass中可以使用 @extend 扩展已声明的任何类代码块或者通过 % 声明的占位符:

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

上面的代码编译出来是什么我想大家都知道了。不同状态继承了 .message 的基本样式,只不过在不同的状态重置了 border-color

同样的,到目前为止还没有任何浏览器支持类似Sass这样的扩展规则特性。但 @Tab Atkins 已提出相关的建议。或许有一天,CSS的扩展规则也类似于Sass中的扩展规则。

颜色函数

CSS处理器提供了很多个颜色函数。可能通过这些函数计算出颜色新值。在CSS中,也将具备这方面的特性。 @Erik Jung 写了 一篇文章来介绍CSS Color Module Level 4特性 。介绍 color-mod() 函数来计算颜色。另外 @Ahmad Shadeed 分享了 如何使用 rgba() 模拟出 color-mod() 函数特性

更为强大的是, @Tyler Gaw 使用React写的 ColorMe ,演示了 color-mod() 函数如何基于一个颜色,在不同条件下的变化。

CSS即将具备的6种处理器特性

下面代码简单演示了 color-mod() 函数的使用方式:

nav {
    background: color-mod(#79d3e2 hue(360) saturation(100%));
}

代码具体代表什么意思,如果你感兴趣的话,可以阅读《 使用 color-mod() 函数修改颜色 》一文。

总结

从使用多年CSS处理器经验来说,CSS处理器的确帮助我解决了很多问题,也让自己编码效率得到提高。如果能将CSS处理这些优秀的特性移植到CSS规范中来,而不需要 工具 来编译的话,我们会更喜欢。当然这些CSS处理器的发展给CSS规范提供新思想和方法。

最后我希望向大家呈现这些新特性,能激发你在自己的工作中使用它们,并且在使用过程中发现其中不足之处,并把相关建议提供给CSS的规范小组,让CSS变得越来越强大,越来越好使。

CSS即将具备的6种处理器特性

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

Spring框架高级编程

Spring框架高级编程

约翰逊 / 蒋培 / 机械工业出版社 / 2006-4 / 59.00元

Spring框架是主要的开源应用程序开发框架,它使得Java/J2EE开发更容易、效率更高。本书不仅向读者展示了Spring能做什么?而且揭示了Spring完成这些功能的原理,解释其功能和动机,以帮助读者使用该框架的所有部分来开发成功的应用程序。本书涵盖Spring的所有特性,并且演示了如何将其构成一个连贯的整体,帮助读者理解Spring方法的基本原理、何时使用Sping以及如何效仿最佳实践。所有......一起来看看 《Spring框架高级编程》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

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

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具