Sass多年来一直是我的首选。最近我有一段时间,想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。
第一步先了解我使用Sass写的东西,需要知道我用了些什么功能,以确保找到一个替代的工具(PostCSS插件)。下面这个列表是我项目中用到的一些功能:
- 引入部分(partial imports)
- 变量(variables)
- 嵌套(nesting)
- 混合宏(mixins)
- 扩展(extend)
- 占位符(placeholder classes)
- 颜色函数(darken and rgba color functions)
- 压缩(compression)
准备工作
在了解CSS新特性语法和其他有趣的东西之前,需要做一些必要的准备工具。Sass项目的文件结构是有几个典型用法。使用下划线(_
)来命名文件名,这些文件都是以.scss
作为文件扩展名。其中两个文件夹modules
和partials
放置对应的Sass文件,在modules
文件夹中的不会产生对应的CSS,其中放置是有关于变量、占位符和混合宏之类的文件,在partials
放置会编译出CSS(CSS-producing)的Sass文件。
开始的文件结构如下:
css/
|--scss/
|----modules/
|------_module.scss
|------...
|----partials/
|------_partial.scss
|------...
|----tylergaw.scss
通过@import
把带有下划线(partial)Sass文件引入到tylergaw.scss
中:
@import "modules/setup";
@import "modules/reset";
@import "modules/fonts";
重新命名文件。首先把.scss
的文件换成.css
。我不想一个一个文件修改,使用一个Bash脚本来帮我一次性修改好:
for f in *.scss; do git mv -- "$f""${f%.scss}.css"; done;
因为Sass文件前面有下划线(_
),这些都是Sass环境下的,所以我也删除了。我没办法使用Bash命令一次性完成,所以只能手动每个去修改。
最后一步是将modules
和partials
目录下的CSS文件移出来。我决定把所有CSS作为模块来管理。
创建配置
开始使用PostCSS CLI。先添加一个临时的package.json
构建脚本文件:
"scripts": {
"postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}
在不改变任何东西情况下可以编译CSS样式:
npm run postcss
它能正常工作。在控制台上也没有任何的错误提示,但是页面没有任何的样式。
接下来要做的事情,就是让页面的样式回来。
通过Chrome浏览器,查看控制台可以看到一大堆的404信息。丢失了第一个特性,那就是内联的@import
特性。通过@import
把每个CSS模块引入到tylergaw.css
文件中。浏览器中看到这些,它知道要做什么。它试图加载每个模块,而且每个模块都会产生一个HTTP请求。我们的构建脚本中只有一个CSS文件,而不是每个模块。因此,浏览器找不到他们(自然而然,就有一大堆的404信息出现)。
我能改变构建脚本,让其默认支持@import
,但这样的工作方式是低效的。言外之意,需要一个能替代Sass的@import
的工具来帮助我们。
第一个插件
可以使用postcss-import
插件来替代Sass样式中的@import
功能。通过npm
安装好这个插件之后,就可以更新我们的构建脚本:
"scripts": {
"postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}
在命令终端再次运行npm run postcss
。单独的CSS文件中包含所有模块和该网站现在部分样式。
Sass中的@import
引入样式方式是巨大的,它也改变了我们能够更好的组织样式。我不确定这个功能在本地项目中能生效。也就是说,我们总是需要为这种类型的功能在构建脚本上处理这方面的特性。这样看起来并不坏。
我想postcss-import
插件将是PostCSS一个主要的设置。而且其它人也应该会这样做。对于这个插件,作者是这样描述的:
This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you can expect. —— postcss-import
cssnext
cssnext是PostCSS一个插件,把CSS未来特性编译成现在CSS语法特性。特别需要注意的是,这个插件和Sass和LESS都不一样。它提供的特性是CSS正在进行的规范(或者未来CSS将会具备的语法特性)。而且有一些特性已经得到了浏览器的支持。
我使用cssnext来处理Sass不具备的一些特性。
浏览器私有前缀
我在创建这个网站之前我就知道Autoprefixer。我使用了自定义的Sass混合宏来处理浏览器所需的私有前缀。cssnext包括了Autoprefixer插件,所以我可以删除整个混合宏模块。
变量(variables)
接下来我需要使用CSS自定义属性(CSS原生变量)来替代Sass中的变量。比如在_setup.scss
中设置的变量:
$grey: #1e1e1d;
$yellow: #ffad15;
$offwhite: #f8f8f8;
$darkerwhite: darken($offwhite, 15);
这不是所有Sass的变量,但它是最主要的。其余的都是在单独的模块里。
注意:自定义属性和变量的区别。CSS自定义属性仅适用于属性值,他们不能被用于选择器,属性名称或媒体查询。
更新setup.css
:
:root {
--white: #fff;
--grey: #1e1e1d;
--yellow: #ffad15;
--offwhite: #f8f8f8;
...
}
使用的示例如下:
a {
color: var(--yellow);
}
除了语法,CSS自定认属性和Sass变量工作是一样的。因为目前支持的浏览器还有限,所以属性仍然是需要编译的。在上面的示例中,编译后的值是color:#ffad15;
。
颜色函数
在前面的示例中,我遗漏了一个变量:$darkerwhite: darken($offwhite, 15);
。我需要另一个工具来替代这个Sass特性。在CSS规范草案中有CSS颜色函数,可以用来替代Sass这个特性。cssnext包括了这个函数功能,它非常的强大。在setup.css
中的darkerwhite
自定义属性可以通过color()
函数和shade
调节器来实现。
:root {
...
--offwhite: #f8f8f8;
--darkerwhite: color(var(--offwhite) shade(20%));
...
}
color()
函数功能提供了一系列的颜色调节器。你可以在一个函数中使用多个调节器:
background-color: color(#d32c3f shade(40%) alpha(40%));
编译出来的CSS如下:
background-color: rgba(127, 26, 38, 0.4);
再次重申。现在cssnext编译出来的颜色结果是十六进制或rgba()
值。当颜色函数在浏览器中运行时,编译将不会是必要的。颜色操作在运行时就可能发生。
嵌套(nesting)
在引入CSS预处理器时,嵌套是不可或缺的。一个比较舒适的样式设置。对于在处理器中的嵌套规范,今天在cssnext中同样可以使用。
CSS的嵌套通过&
来实现一个前置和后置的嵌套。例如下面的Sass片段:
.projects-list {
...
li {
& > div {...}
}
a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
使用CSS的嵌套来改变上面的示例:
.projects-list {
...
& li {
& > div {...}
}
& a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}
基本的嵌套需要一个前置的&
。伪类和选择器在Sass和CSS中使用是相同的。对于媒体查询嵌套,不需要前置的&
。
同样值得一提的是@nest
。在文档中提到,复杂的嵌套需要@nest
替代&
。我没有在这个项目的任何地方使用到@nest
,或许在以后会用到。
扩展和类占位符
在Sass中使用@extend
和%placeholder
是非常常见的。这里有一个简单的示例:
%futura {
font-family: 'futura-pt', helvetica, sans-serif;
}
%futura-heading {
@extend %futura;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
}
另一个使用示例:
.my-heading {
@extend %futura-heading;
}
我看了早期使用CSS自定义属性的规范,在规范中正在提一个@apply
规则。@apply
允许你在选择器中引用一组已存储样式。我将使用@apply
规则来替代Sass中的@extend
规则。
回到setup.css
,使用新特性更新标题样式:
:root {
...
--franklin: {
font-family: 'futura-pt', helvetica, sans-serif;
};
--franklin-heading: {
@apply --franklin;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
};
}
另一个使用示例:
.my-heading {
@apply --franklin-heading;
}
@apply
不是@extend
。在cssnext中,@apply
可以复制每个属性的规则和值。这是一个小项目,所以用不用都没关系。在大型项目中要是有一些额外的属性,就可能导致样式的冗余,文件过度膨胀。最好的方多使用一个通用的类名来设置相似的样式。
在这一点上,我的网站跟之前相比有所改变。项目页面是一个例外,它为每个区域使用一个不同的颜色。接下来将描述在没有Sass的情况之下如何正确使用样式,同时减少更多的工作,产出更高。
带参数的混合宏
在项目中使用Sass的混合宏,可以简写样式代码。这个混合宏带一个参数,用来控制不同区域的颜色。这里把这个混合宏命名为project-block
:
@mixin project-block ($c) {
background-color: $c;
a {
color: $c;
&:hover {
background-color: $c;
color: $offwhite);
}
}
}
可以像下面这样调用已声明好的混合宏:
.p-jribbble {
@include project-block(#ff0066);
}
到写这篇文章之时,我在CSS中无法找到一个方法来模拟这个功能。CSS自定义属性和@apply
没有类似的功能,所以你不能为其传递参数。在未来,有可能可以使用自定义选择器,并且可以给它传参数。在规范草案中有一个复杂的示例,看起来非常有前途。到目前为止,我还没有完全理解它是如何工作的。
这并不意味着我运气不好。我写CSS的时间比写Sass的长,但也长不了多久。我还在用另一个CSS特性,那就是:matches
选择器。
下面的示例是使用CSS的方法来替代project-block
混合宏:
.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
background-color: var(--color-jrb);
& a {
color: var(--color-jrb);
}
}
颜色变量在前面的CSS文件中:root
设置,cssnext来编译上面的CSS:
.p-jribbble,
.p-jribbble a:hover,
.p-jribbble a:focus {
background-color: #ff0066
}
.p-jribbble a,
.p-jribbble a:hover a,
.p-jribbble a:focus a {
color: #ff0066;
}
最后两个选择器... a a:hover
和... a a:focus
没有任何元素可匹配。他们是不必要的,但除了多了几个字节,并不会对样式造成任何伤害。其实我更喜欢选择器的嵌套,因为其更具可读性。
PostCSS更多特性
为了样式能有顺序的回来,我决定使用更多的PostCSS插件。我使用 css mqpacker使用CSS媒体查询,也使用cssnano来优化代码。
这就是我期待的PostCSS设置。Sass只是锁定在当前版本的一些特性,而PostCSS是一些插件集合,它可以扩展。如果我需要一个特定的需求,我可以通过JavaScript来为这个需求编写一个插件。这个潜力是令人兴奋的。
小结
使用了这个设置几天后,我一直在使用。也从Sass语法转换CSS的新语法。这也是我使用Sass五六年之后,使用另一个CSS处理器(PostCSS)做过的第一个项目。
我更喜欢这个带来的思想转变。cssnext也有类似于JavaScript的Babel。他们都让你写的语言,具备更多未来的特性。
本文根据@tylergaw的《From Sass to PostCSS》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://tylergaw.com/articles/sass-to-postcss。
如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/sass-to-postcss.html