Sass から PostCSS へ-CSSチュートリアル-php.cn

Sass から PostCSS へ

私は何年も Sass を使用してきましたが、最近、将来の CSS 機能を以前よりも使用できるようになったので、PostCSS とその cssnext プラグインを使用したいと思いました。私の個人サイトは、新しい機能を試してみるのに最適な場所です

最初のステップは、自分が使用している機能のリストを作成し、それを確認することです。新しい機能は postCSS で置き換えられます。このプロジェクトで使用している機能は次のとおりです。

プレースホルダークラス
カラー関数 (darken および rgba color 関数)
圧縮
準備作業
新しい構文に切り替えた後、いくつかの準備をする必要があります。プロジェクトのディレクトリ構造は一般的なものになりました。 Sass ファイルの名前にはアンダースコア (_) を使用し、ファイルの拡張子は scss とします。 modules フォルダーには、変数、プレースホルダークラスなど、CSS を直接生成しない Sass ファイルが保存されます。パーシャルは CSS をコンパイルする Sass ファイルを保存します。

css/
  scss/
    modules/
      _module.scss
      ...
    partials/
      _partial.scss
      ...
    tylergaw.scss

ログイン後にコピー

各 Sass コンポーネントは tylergaw.scss にインポートされます。 scss から css まですべてのファイルの接尾辞を変更します。代わりに Bash スクリプトを使用して作業を行います。

@import "modules/setup";
@import "modules/reset";
@import "modules/fonts";

ログイン後にコピー

前のアンダースコアは Sass を書くときの癖なので、Bash を使用できないので、これも削除しました。コマンドを使用して一度にすべてを完了するので、それぞれを手動で変更するしかありません。

最後のステップは、すべての CSS を追加することです。ファイルを module フォルダーに移動し、partials フォルダーを削除します。すべてを管理するのが理解しやすいと思います。 CSS をモジュール/部分に分割するのではなく、モジュールとして使用します。

コンソールにはエラーはありませんが、ページに CSS スタイルがありません。

タスクはスタイルを戻すことです。これは、不足している最初の機能が @import 経由で CSS モジュールを取り込むことを意味します。ブラウザはこれを認識し、それぞれの処理を認識します。私のビルドプロセスは別の CSS ファイルをコピーするだけであり、このためブラウザはそれらを見つけることができません

デフォルトの @import が機能するようにビルドプロセスを変更することもできます。それは非効率的です。Sass スタイルのインライン @import を置き換える必要があります。

最初のプラグイン

postcss-import プラグインは、npm 経由でインストールした後、ビルドスクリプトコードを更新しました。 npm run postcss を再度実行すると、1 つの CSS ファイルにすべてのモジュールが含まれます

これは CSS の未来ですか?

Sass で @import 関数をインラインで公開すると、スタイルをより適切に整理できるようになります。この関数が将来ネイティブにサポートされるかどうかはわかりません。ワンステップコンパイルでは、常にこの関数を使用する必要があります。見た目も悪くありません

postcss-import プラグインが私の PostCSS のメイン構成になると思いますが、他のプラグインでも同じになるはずです。以下はプラグイン作成者からの引用です:

このプラグインはおそらくそうすべきです。こうすることで、他のプラグインは処理するファイルが 1 つしかないかのように AST 上で動作し、おそらく期待どおりに動作するでしょう。

`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`

ログイン後にコピー

cssnext

cssnext は PostCSS です。将来の CSS 機能を現在サポートされている機能にコンパイルするプラグイン。特に、これは進行中の CSS 仕様の機能を提供します。その他の機能はまだ初期段階にあります。

失われた Sass 機能によって残されたギャップを埋めるために cssnext を使用します。

ブラウザのプライベートプレフィックス

このサイトを構築する前に、必要なプレフィックスを追加する問題を解決するために Autoprefixer について学びました。 cssnext には Autoprefixer が含まれているので、このハイブリッドマクロモジュール全体を削除できます。

从sass到PostCSS 変数

次に、_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到PostCSS

带参数的混合宏

我用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选择器的嵌套.

我妥协了

在使用这个新工具工作了几天后,我完全投入进去了.从Sass转向新的CSS语法非常简单,并且是在五六年间我每个项目都用Sass编写的情况下.

我喜欢这个思想转变.cssnext对CSS的处理很像Babel对Javascript.它们都允许你去使用未来的特性来编写代码.

私は何年も Sass を使用してきましたが、最近、スタイルの処理を試すために PostCSS とその cssnext プラグインを使用したいと思いました。将来の CSS 機能が今まで使用していたツールよりもはるかに使いやすいので気に入っています。私の個人サイトは、新しい機能をテストするのに最適な場所です

最初のステップは、自分が使用している機能のリストを作成し、新しい機能が postCSS に置き換えられるかどうかを確認することです。このプロジェクトで使用している機能は次のとおりです:

部分インポート
変数
ミックスイン
拡張
プレースホルダークラス
darkenおよび rgba カラー関数
圧縮
準備

css/
  scss/
    modules/
      _module.scss
      ...
    partials/
      _partial.scss
      ...
    tylergaw.scss

ログイン後にコピー

各 Sass コンポーネントは 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 を置き換える必要があります。

从sass到PostCSS 最初のプラグイン

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 ファイルにすべてのモジュールが含まれます。現在のページには、いくつかのスタイルが変更されました。

これは CSS の未来ですか?

postcss-import プラグインが私の PostCSS のメイン構成になると思いますが、他のプラグインでも同じになるはずです。以下はプラグイン作成者からの引用です:
从sass到PostCSS

[postcss-import]

ログイン後にコピー

cssnext

失われた Sass 機能によって残されたギャップを埋めるために cssnext を使用します
ブラウザのプライベートプレフィックス

このサイトを構築する前に、必要なプレフィックスを追加する問題を解決するために Autoprefixer について学びました。 cssnext には Autoprefixer が含まれているので、このハイブリッドマクロモジュール全体を削除できます。

変数

次に、_setup で Sass 変数を次のように書きます。

$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.

颜色函数

: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;
}

ログイン後にコピー

回到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;
}

ログイン後にコピー

现在我的网站看起来和之前一样了.项目页是个例外.它的每个磁贴区域都有不同颜色.接下来我会解释怎么在没有Sass的情况下正确且高效的编写样式.

从sass到PostCSS

带参数的混合宏

我用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的时间要长于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;
}

ログイン後にコピー