唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > 前端黑科技:root之CSS变量var,从此Sass/Less是弟弟(下篇)

该篇幅不是主要硬核知识,更多的是让大家了解下CSS近年来一些发展以及对未来的一些展望,如果想了解关于CSS变量硬核技术篇可阅读前端黑科技:root之CSS变量var,从此Sass/Less是弟弟(上篇)。众所周知,平时在使用sass和less主要使用的功能有哪些?那莫过于变量(variables),代码混合( mixins),嵌套(nested rules)以及 代码模块化(Modules)。其实原生css近些年也在尝试不断突破自己,CSS这些年做了啥?

Mixins in CSS

CSS 的有一个提案:CSS @apply Rule,按照该草案描述,用户可直接使用 CSS 变量存放声明块,然后通过 @apply rule 使用。

1
2
3
4
5
6
7
8
9
10
:root {
    --pink-schema: {
        color: #6A8759;
        background-color: #F64778;
    }
}

body{
  @apply --pink-schema;
}

可惜这个提案已被废弃,具体废弃原因感兴趣的可以看看这篇文章:Why I Abandoned @apply。尽管 Mixins 现在 CSS 还没有好的实现标准,但我们坚信迟早会有更优秀的规范涌现出来弥补 CSS 的这一块空白。

Nesting in CSS

CSS 里已经有 Nesting 的规范出现,尽管现在只处于 Editor’s Draft 阶段:CSS Nesting Module Level 3,可以看到按照 CSS Nesting Module ,Nesting 规范基本和预处理器(sass/less)一模一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Dropdown menu on hover */
ul {
  /* direct nesting (& MUST be the first part of selector)*/
  & > li {
    color: #000;

    & > ul { display: none; }

    &:hover {
      color: #f00;

      & > ul { display: block; }
    }
  }
}

Module in CSS

其实 CSS 很早就有了模块化方案,那就是 @import,使用 CSS 的 @import 规则,可以引用其他的文件样式。这个特性从 IE 5.5 开始就被所有的浏览器支持,那为什么一直以来使用者寥寥无几呢,原因很多:

  • 在一些老的浏览器有加载顺序的 bug
  • 无法并行加载
  • 导致过多的请求数量
  • ……

不过现在大家的前端项目基本都会使用构建工具(Gulp、Webpack 等)打包后再上线,因此以上哪些缺点也就不存在了,而在 Webpack 的 css-loader 中,是可以配置是否开启 @import 的。

Selector Helpers

如果你还觉得也不过如此,无非是做着预解析早已做过的前人之事,那你继续往后看,除了上面介绍的一些主要特性,CSS 还提供了一些全新的特性来帮助你更优雅的书写样式。

:matches()

1
2
/* 语法 */
:matches( selector[, selector]* )
1
2
3
4
5
6
7
8
9
10
11
.nav:matches(.side,.top) .links:matches(:hover, :focus) {
  color: #BADA55;
}

/* 相当于以下代码 */
.nav.side .links:hover,
.nav.top  .links:hover,
.nav.side .links:focus,
.nav.top  .links:focus {
  color: #BADA55;
}

:matches() CSS 伪类 函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素,这对于以更紧凑的形式编写大型选择器非常有用,而且浏览器支持程度也已经接近 93%。想要了解更多详情可以查看规范:Selectors Level 4

@custom-selector

同时,你还可以您可以使用自定义选择器来定义可以匹配复杂选择器的别名。

1
2
/* 语法 */
@custom-selector: <custom-selector> <selector-list>;

定义的方式和 CSS 变量类似,使用起来稍微有点区别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@custom-selector :--text-inputs input[type="text"],
input[type="password"];

:--text-inputs.disabled,
:--text-inputs[disabled] {
    opacity: 0.5
}

/* 相当于以下代码 */
input[type="text"].disabled,
input[type="password"].disabled,
input[type="text"][disabled],
input[type="password"][disabled] {
    opacity: 0.5
}

尽管上述的 CSS 特性还处于不同阶段,浏览器的支持程度也不尽相同,但是使用postcss-preset-env,你就可以抢先尝试 CSS 的最新特性。当然,postcss-preset-env 的配置也十分简单,以 Webpack 为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
rules:[ {
    test:/\.css$/,use:[
          'style-loader' {
    loader:'css-loader',options: {
    importLoaders:1
}
} {
    loader:'postcss-loader',options: {
    ident:'postcss',plugins:() => [
              postcssPresetEnv(/* pluginOptions */)
        ]
}
}]

参考

小结

经过一番梳理,会发现尽管 CSS 在社区的刺激下加快了更新迭代的速度,但是到目前为止,依然达不到 CSS 预处理器 VS CSS 的地步,只能说在使用 CSS 预处理器的同时,也可以在项目中尝试一些优秀的 CSS 新特性,即:CSS 预处理器 + CSS。

但是我依然坚信,在W3C的推动下,随着CSS自身不断完善,CSS预处理器终究会像当年的CoffeScript 、Jade一样,变成时代的过渡产物。到那时候,大家也就不用纠结各种CSS预处理器的环境配置和技术选型等,直接打开编辑器,就能愉快的书写样式。

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"前端黑科技:root之CSS变量var,从此Sass/Less是弟弟(下篇)"

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 295 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 7 个
  • 评论总数: 986 条
  • 链接总数: 13 个
  • 标签总数: 489 个
  • 注册用户: 2 人
  • 访问总量: 8,973,004 次
  • 最近更新: 2021年4月14日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线