Tomorrow’s CSS syntax with cssnext
原文cssnext: http://julian.io/tomorrows-css-syntax-with-cssnext/
正如你可能知道的，没有什么保持一直不变。所有的事情需要进步和改善。用css也一样。现在，css3已经有很多很酷的东西。但它还缺乏一些特性，像有预处理器作用等一些特性，来真正的提现css有用和必要。接下来讲到的postcss虽然没有css 4那么多新特性，但还是会给你带来诸多帮助。下面本文中将告诉你如何使用postcss及其一些插件的使用。
你可能会问css未来语法讲的是什么。我们在过去在css中使用变量，你可能通过sass或者less来实现。css未来语法，现在是不可能跟css3一样得到主流浏览器支持，但是在将来，浏览器支持会得到改善。你可以使用新css的选择器语法，像:matches, :not 或者 :any-link 。你也可嵌套自己的选择器和使用许多新的function像 color(), hwb(), gray()。现在怎么将这些实现，我们可以使用 PostCSS 和 cssnext插件 来实现。
一些新的CSS功能深度
css变量
:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}
h1 {
color: var(--mainColor);
}
从上面代码中可以看到，我们可以在 :root 选择器中中定义一个变量 --mainColor,在后面代码中可以使用var来调用
css选择器嵌套
未来css的一个非常cool的语法，和sass，less非常相似，可以用 &来嵌套选择器。下面例子来说明
a {
& span {
color: #fff;
}
&.black {
color: #000;
}
}
这个和sass类似，其实和下面代码一样
a span {
color: #fff;
}
a.black {
color: #000;
}
自定义媒体查询和媒体查询范围值
我记得一些插件预处理器能够创建简单的混合媒体查询。例如stylus中的rupture插件，提供了一个简单的function ，像 +below(784px) etc.所以你不必写长css媒体查询。
看下面例子
@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport) {
/* css style */
}
在媒体查询中可以用 <= 替换 min- , >= 替换 max- ， 看下面例子
@meida (width >= 500) and (width <= 1200px) {
/* your styles */
}
/* or coupled width custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
/* your styles */
}
一些新选择器
:any-link 官方说明
html5中超链接标签 <a> <area> <link>
nav :any-link {
border-color: yellow;
}
:matchs
p:matches(:first-child, .special) {
color: red;
}
:not
p:not(:first-child, .special) {
color: red;
}
新方法
color()
a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}
gray()
.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}
Tomorrow’s CSS syntax with cssnext
原文cssnext: http://julian.io/tomorrows-css-syntax-with-cssnext/
正如你可能知道的，没有什么保持一直不变。所有的事情需要进步和改善。用css也一样。现在，css3已经有很多很酷的东西。但它还缺乏一些特性，像有预处理器作用等一些特性，来真正的提现css有用和必要。接下来讲到的postcss虽然没有css 4那么多新特性，但还是会给你带来诸多帮助。下面本文中将告诉你如何使用postcss及其一些插件的使用。
你可能会问css未来语法讲的是什么。我们在过去在css中使用变量，你可能通过sass或者less来实现。css未来语法，现在是不可能跟css3一样得到主流浏览器支持，但是在将来，浏览器支持会得到改善。你可以使用新css的选择器语法，像
:matches,:not或者:any-link。你也可嵌套自己的选择器和使用许多新的function像color(),hwb(),gray()。现在怎么将这些实现，我们可以使用 PostCSS 和 cssnext插件 来实现。一些新的CSS功能深度
css变量
从上面代码中可以看到，我们可以在
:root选择器中中定义一个变量--mainColor,在后面代码中可以使用var来调用css选择器嵌套
未来css的一个非常cool的语法，和sass，less非常相似，可以用 &来嵌套选择器。下面例子来说明
这个和sass类似，其实和下面代码一样
自定义媒体查询和媒体查询范围值
我记得一些插件预处理器能够创建简单的混合媒体查询。例如stylus中的rupture插件，提供了一个简单的function ，像
+below(784px)etc.所以你不必写长css媒体查询。看下面例子
在媒体查询中可以用
<=替换min-,>=替换max-， 看下面例子一些新选择器
:any-link官方说明html5中超链接标签
<a> <area> <link>:matchs:not新方法
color()gray()