Sass から PostCSS へ
私は何年も Sass を使用してきましたが、最近、将来の CSS 機能を以前よりも使用できるようになったので、PostCSS とその cssnext プラグインを使用したいと思いました。私の個人サイトは、新しい機能を試してみるのに最適な場所です
最初のステップは、自分が使用している機能のリストを作成し、それを確認することです。新しい機能は postCSS で置き換えられます。このプロジェクトで使用している機能は次のとおりです。
css/ scss/ modules/ _module.scss ... partials/ _partial.scss ... tylergaw.scss
@import "modules/setup"; @import "modules/reset"; @import "modules/fonts";
コンソールにはエラーはありませんが、ページに CSS スタイルがありません。
タスクはスタイルを戻すことです。これは、不足している最初の機能が @import 経由で CSS モジュールを取り込むことを意味します。ブラウザはこれを認識し、それぞれの処理を認識します。私のビルド プロセスは別の CSS ファイルをコピーするだけであり、このためブラウザはそれらを見つけることができません
最初のプラグイン
このプラグインはおそらくそうすべきです。こうすることで、他のプラグインは処理するファイルが 1 つしかないかのように AST 上で動作し、おそらく期待どおりに動作するでしょう。
`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`
変数
次に、_setup で Sass 変数を次のように書きます。
"scripts": {
"postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}これはそうではありません。私が使用するすべての 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颜色函数.cssnex现在包含这些函数,这非常酷.下面是setup.css,其中darkerwhite自定义属性是通过颜色函数和阴影调节器来实现的.
:root {
...
--offwhite: #f8f8f8;
--darkerwhite: color(var(--offwhite) shade(20%));
...
}颜色函数提供了许多调节器.你可以在一个函数中使用多个调节器:
`background-color: color(#d32c3f shade(40%) alpha(40%));`
编译结果为:
`background-color: rgba(127, 26, 38, 0.4);`
再次重申,现在cssnext会将color()编译为16进制或rgba的色值.当颜色函数得到浏览器支持后,编译过程就没有必要了.颜色操作在运行时就可以发生.
嵌套是CSS预处理器不可或缺的特性.任何让人舒服的样式工具的必需品.Tab Atkins对CSS嵌套有一个正在进行中的规范,并且cssnext让它成为现实.
CSS的嵌套语法包含一个前置于内层的&,以下为sass片段:
.projects-list {
...
li {
& > p {...}
}
a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}对于CSS嵌套,我将它修改为以下形式:
.projects-list {
...
& li {
& > p {...}
}
& a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}基本的嵌套需要前置的&.伪类和选择器在Sass和CSS中是相同的.媒体查询不需要前置&.
另外值得注意的是@nest.正如文档中提到的,复杂的嵌套可能需要引入@nest来代替&.这个项目我还没有用到,或许将来用得到.
Sass中的@extend和占位类是我经常使用的两个特性。下面是Futura头部的样式示例：
%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来,我更新了Futura头部的属性:
: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不是继承.在目前的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找到能模拟这个功能的特性.自定义属性配合@apply不是函数,所以我们不能为它传递参数.在将来,自定义选择器可能会允许使用参数.在草案规范中有一个看起来很有前途的复杂示例.但我承认现在我还没完全明白它是怎么工作的.
这不意味着我运气不好.我写CSS的时间要长于Sass,但也没多久.我还用了另一个正进行中的规范特性,matches选择器.
下面是一个代替project-block混合宏的CSS示例:
.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
background-color: var(--color-jrb);
& a {
color: var(--color-jrb);
}
}颜色变量是早些在文件中: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匹配不到任何元素.他们是不必要的.但是除了占用几比特的空间他们也没有任何影响.为了代码的可读性,我更倾向于a选择器的嵌套.
为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.
这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.
在使用这个新工具工作了几天后,我完全投入进去了.从Sass转向新的CSS语法非常简单,并且是在五六年间我每个项目都用Sass编写的情况下.
我喜欢这个思想转变.cssnext对CSS的处理很像Babel对Javascript.它们都允许你去使用未来的特性来编写代码.
私は何年も Sass を使用してきましたが、最近、スタイルの処理を試すために PostCSS とその cssnext プラグインを使用したいと思いました。将来の CSS 機能が今まで使用していたツールよりもはるかに使いやすいので気に入っています。私の個人サイトは、新しい機能をテストするのに最適な場所です
最初のステップは、自分が使用している機能のリストを作成し、新しい機能が postCSS に置き換えられるかどうかを確認することです。このプロジェクトで使用している機能は次のとおりです:
部分インポート
変数
ミックスイン
拡張
プレースホルダークラス
darkenおよび rgba カラー関数
圧縮
準備
css/ scss/ modules/ _module.scss ... partials/ _partial.scss ... tylergaw.scss
@import "modules/setup"; @import "modules/reset"; @import "modules/fonts";
最初にすべてのファイルのサフィックスを scss から css に変更しました。
`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`前 下線は Sass を書くときの癖なので、Bash コマンドを使用して一度に完了することができなかったので、手動で削除する必要がありました。それぞれを変更します
最後のステップは、すべての CSS ファイルをモジュール フォルダーに移動し、パーシャル フォルダーを削除することです。モジュール/パーシャルごとに分割するよりも、すべての CSS をモジュールとして管理する方が理解しやすいと思います。環境設定
PostCSS CLI から開始して package.json に追加しました 一時的なビルド スクリプト コマンド:
"scripts": {
"postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}スタイルを変更せずに CSS をコンパイルしました:
`npm run postcss`
コンソールにはエラーは報告されませんが、正常に動作します。ページに CSS スタイルがありません
ビルドプロセスは利用可能です、今のタスクはスタイルを取り戻すことです Chrome コンソールにたくさんの 404 メッセージが表示されました。私たちが持っている機能は、@import を介したインライン @import.tylergaw.css です。ブラウザーはこれらを見て、何を行うかを認識します。ビルド プロセスは、個別の CSS ファイルをコピーするだけです。このため、ブラウザはそれらを見つけることができません デフォルトの @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 を再度実行すると、1 つの CSS ファイルにすべてのモジュールが含まれます。現在のページには、いくつかのスタイルが変更されました。
Sass で @import 関数をインラインで公開すると、スタイルをより適切に整理できるようになります。この関数が将来ネイティブにサポートされるかどうかはわかりません。ワンステップ コンパイルでは、常にこの関数を使用する必要があります。見た目も悪くありません
postcss-import プラグインが私の PostCSS のメイン構成になると思いますが、他のプラグインでも同じになるはずです。 以下はプラグイン作成者からの引用です: 
[postcss-import]
cssnext
cssnext は PostCSS です。将来の CSS 機能を現在サポートされている機能にコンパイルするプラグイン。特に、これは進行中の CSS 仕様の機能を提供します。その他の機能はまだ初期段階にあります。
失われた Sass 機能によって残されたギャップを埋めるために cssnext を使用します ブラウザのプライベート プレフィックス
変数
次に、_setup で Sass 変数を次のように書きます。
$grey: #1e1e1d; $yellow: #ffad15; $offwhite: #f8f8f8; $darkerwhite: darken($offwhite, 15);
注: CSS カスタム プロパティの違いは属性値でのみ有効であり、セレクターでは使用できません。属性名またはメディアクエリ
:root {
--white: #fff;
--grey: #1e1e1d;
--yellow: #ffad15;
--offwhite: #f8f8f8;
...
}以下为使用示例:
a {
color: var(--yellow);
}除了语法,CSS自定义属性和Sass变量工作方式是相同的.由于浏览器支持的限制,自定义属性值仍然需要编译.在上面的示例中,编译后的值为color: #ffad15.
在之前的例子中,我遗漏了一个变量:$darkerwhite: darken($offwhite, 15);.这是另一个我需要寻找替代的Sass特性.这里有一个规范草案提供CSS颜色函数.cssnex现在包含这些函数,这非常酷.下面是setup.css,其中darkerwhite自定义属性是通过颜色函数和阴影调节器来实现的.
:root {
...
--offwhite: #f8f8f8;
--darkerwhite: color(var(--offwhite) shade(20%));
...
}颜色函数提供了许多调节器.你可以在一个函数中使用多个调节器:
`background-color: color(#d32c3f shade(40%) alpha(40%));`
编译结果为:
`background-color: rgba(127, 26, 38, 0.4);`
再次重申,现在cssnext会将color()编译为16进制或rgba的色值.当颜色函数得到浏览器支持后,编译过程就没有必要了.颜色操作在运行时就可以发生.
嵌套是CSS预处理器不可或缺的特性.任何让人舒服的样式工具的必需品.Tab Atkins对CSS嵌套有一个正在进行中的规范,并且cssnext让它成为现实.
CSS的嵌套语法包含一个前置于内层的&,以下为sass片段:
.projects-list {
...
li {
& > p {...}
}
a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}对于CSS嵌套,我将它修改为以下形式:
.projects-list {
...
& li {
& > p {...}
}
& a {
...
&:hover,
&:focus {...}
&::after {...}
}
@media (min-width: 640px) {...}
}基本的嵌套需要前置的&.伪类和选择器在Sass和CSS中是相同的.媒体查询不需要前置&.
另外值得注意的是@nest.正如文档中提到的,复杂的嵌套可能需要引入@nest来代替&.这个项目我还没有用到,或许将来用得到.
Sass中的@extend和占位类是我经常使用的两个特性。下面是Futura头部的样式示例：
%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来,我更新了Futura头部的属性:
: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不是继承.在目前的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找到能模拟这个功能的特性.自定义属性配合@apply不是函数,所以我们不能为它传递参数.在将来,自定义选择器可能会允许使用参数.在草案规范中有一个看起来很有前途的复杂示例.但我承认现在我还没完全明白它是怎么工作的.
这不意味着我运气不好.我写CSS的时间要长于Sass,但也没多久.我还用了另一个正进行中的规范特性,matches选择器.
下面是一个代替project-block混合宏的CSS示例:
.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
background-color: var(--color-jrb);
& a {
color: var(--color-jrb);
}
}颜色变量是早些在文件中: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匹配不到任何元素.他们是不必要的.但是除了占用几比特的空间他们也没有任何影响.为了代码的可读性,我更倾向于a选择器的嵌套.
为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.
这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.
在使用这个新工具工作了几天后,我完全投入进去了.从Sass转向新的CSS语法非常简单,并且是在五六年间我每个项目都用Sass编写的情况下.
我喜欢这个思想转变.cssnext对CSS的处理很像Babel对Javascript.它们都允许你去使用未来的特性来编写代码.
更多从sass到PostCSS 相关文章请关注PHP中文网！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
