Von Sass zu PostCSS

Von Sass zu PostCSS

Ich verwende Sass seit Jahren, aber vor kurzem wollte ich PostCSS und sein CSSnext-Plugin verwenden, um die Handhabungsstile auszuprobieren Die Verwendung zukünftiger CSS-Funktionen wird einfacher sein als die Verwendung der Tools, die ich zuvor verwendet habe.

Der erste Schritt besteht darin, meine Sass-Nutzungscheckliste aufzulisten Ich verwende und stelle sicher, dass neue Funktionen in postCSS ersetzt werden. Hier sind die Funktionen, die ich in diesem Projekt verwende:

• Teilimport)

• Variablen

• Verschachtelung

• Mixins )

• Erweitern

• Platzhalterklassen

• Farbfunktion (Abdunkeln und RGBA-Farbfunktionen)

• Komprimierung (Komprimierung)

Vorbereitung

Nach der Umstellung auf die neue Syntax sind einige Vorbereitungen erforderlich. Die aktuelle Verzeichnisstruktur des Projekts entspricht der typischen Verwendung von Sass. Ich verwende Unterstriche (_), um Dateien zu benennen , und die Dateierweiterung ist scss. Ich verwende zwei Ordner zum Organisieren von Sass-Dateien, die CSS generieren, z. B. Variablen, Platzhalterklassen und Mixins.

Dies ist die ursprüngliche Dateistruktur:

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

jede Sass-Komponente wird in tylergaw.scss importiert

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

Ich habe die Dateien neu organisiert und umbenannt. Ich habe zuerst das Suffix aller Dateien von scss in css geändert. Diese Arbeit habe ich nicht einzeln geändert. Der Unterstrich vor

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

ist eine Gewohnheit Ich habe es nicht geschafft, Sass zu schreiben, also kann ich es nicht mit dem Bash-Befehl auf einmal erledigen, also kann ich jedes Mal nur manuell wechseln.

Der letzte Schritt besteht darin, alle CSS-Dateien zu verschieben in den Modulordner und lösche den Partials-Ordner. Ich denke, es ist effizienter, alle CSS als Module zu verwalten, als sie in Module/Partials aufzuteilen. Leicht zu verstehen.

Umgebungseinrichtung

Ich habe angefangen mit PostCSS CLI und einen temporären Build-Skriptbefehl in package.json hinzugefügt:

"scripts": {
  "postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}

In nein, ich habe das CSS kompiliert, ohne irgendwelche Stile zu ändern:

`npm run postcss`

funktioniert normal. Es gibt nein Fehler in der Konsole, aber es sind keine CSS-Stile auf der Seite vorhanden

Der Build-Prozess funktioniert, jetzt besteht die Aufgabe darin, die Stile wiederherzustellen

In der Chrome-Konsole sehe ich viele 404-Meldungen. Das bedeutet, dass die erste Funktion, die uns fehlt, darin besteht, dass inline @import.tylergaw.css CSS-Module über @import einbindet Der Browser lädt jedes Modul über eine HTTP-Anfrage und nicht jedes Modul kann den Build ändern Prozess, damit der Standard-@import funktioniert, aber das wäre ineffizient. Ich benötige einen Inline-@import-Ersatz im Sass-Stil Sass, nach der Installation über npm habe ich den Build-Skriptcode aktualisiert:

Führen Sie npm run postcss erneut aus, eine einzelne CSS-Datei enthält alle Module. Die aktuelle Seite zeigt einige Stile.

Ist das die Zukunft von CSS?

"scripts": {
  "postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}

Das Inline-Offenlegen der @import-Funktion in Sass ist sehr leistungsfähig. Es ermöglicht uns, Stile besser zu organisieren. Ich bin mir nicht sicher, ob diese Funktion in Zukunft nativ unterstützt wird. Es ist immer ein Schritt erforderlich der Kompilierung, und es sieht nicht schlecht aus.
Ich denke, das PostCSS-Import-Plugin wird zu einer Grundkonfiguration meines PostCSS, und das sollte auch für andere der Fall sein:

Dieses Plugin sollte wahrscheinlich als erstes Plugin Ihrer Liste verwendet werden. Auf diese Weise funktionieren andere Plugins auf dem AST, als ob nur eine einzige Datei verarbeitet werden müsste, und werden wahrscheinlich genauso funktionieren kann erwarten.

cssnext

cssnext ist ein Plug-in in PostCSS, das zukünftige CSS-Funktionen in derzeit unterstützte Funktionen kompiliert. Es ist insbesondere mit Sass Or Less kompatibel ist keine andere Sprache. Einige Funktionen werden bereits von Browsern unterstützt.

[postcss-import]

Ich verwende cssnext, um die fehlenden Sass-Funktionen zu ergänzen Die Lücke ist geblieben.

Browser-private Präfixe

Ich habe vor dem Erstellen dieser Website ein benutzerdefiniertes Sass-Mixin verwendet, um das Problem des Hinzufügens der erforderlichen Präfixe zu lösen Ich kann dieses gesamte Hybrid-Makromodul entfernen

Variablen

Als nächstes ändere ich die Sass-Variablen in benutzerdefinierte CSS-Eigenschaften. Beispielsweise schreibe ich es so:

Das sind nicht alle Sass-Variablen, die ich verwende, aber das ist im Grunde alles. Der Rest ist in separaten Modulen

注意: 自定义属性和变量的区别.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特性

为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.

这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.

我妥协了

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

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

Ich verwende Sass seit Jahren, aber vor kurzem wollte ich PostCSS und sein CSSnext-Plugin verwenden, um das Styling auszuprobieren. Ich finde es toll, dass ich jetzt zukünftige CSS-Funktionen nutzen kann, und sie sind so viel besser Als die Tools, die ich bisher verwendet habe, ist meine persönliche Website der beste Ort, um neue Funktionen auszuprobieren Funktionen, die ich verwende, und ich bin zuversichtlich, dass die neuen Funktionen funktionieren. Es gibt Alternativen in postCSS. Hier sind die Funktionen, die ich in diesem Projekt verwende:

Teilimport
Variablen )
Verschachtelung
Mixins
erweitern )
Platzhalterklassen
Farbfunktionen (Abdunkeln und RGBA-Farbfunktionen)
Komprimierung
Vorbereitung

Nach der Umstellung auf die neue Syntax muss ich einige Vorbereitungen treffen. Die Verzeichnisstruktur des Projekts ist jetzt typisch für die Verwendung von Sass. Zur Benennung verwende ich Unterstriche (_). Dateien, und die Dateierweiterung ist scss. Der Modulordner enthält Sass-Dateien, die kein CSS direkt generieren, wie z. B. Variablen, Platzhalterklassen und Mixins .

Dies ist die ursprüngliche Dateistruktur:

Jede Sass-Komponente wird in tylergaw.scss eingeführt.

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

Ich habe die Dateien neu organisiert und umbenannt. Ich habe zuerst das Suffix aller Dateien von scss in css geändert, anstatt sie einzeln zu ändern.

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

Der Unterstrich davor ist eine Gewohnheit beim Schreiben von Sass , also kann ich es auch nicht mit dem Bash-Befehl auf einmal erledigen, also kann ich nur jedes einzelne manuell ändern.

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

Der letzte Schritt besteht darin, alle CSS-Dateien in das zu verschieben Modules-Ordner und löschen Sie den Partials-Ordner. Ich denke, es ist einfacher zu verstehen, alle CSS als Module zu verwalten, als sie in Module/Partials aufzuteilen.

Umgebungseinrichtung

Ich habe mit der PostCSS-CLI begonnen und einen temporären Build-Skriptbefehl zu package.json hinzugefügt:

Ich habe das CSS kompiliert, ohne irgendwelche Stile zu ändern:

"scripts": {
  "postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}

Funktioniert normal. Es gibt keinen Fehler in der Konsole. aber es gibt keinen CSS-Stil auf der Seite.

`npm run postcss`

Der Build-Prozess ist verfügbar, und jetzt besteht die Aufgabe darin, den Stil zurückzubekommen.

Ich habe gesehen Viele 404-Meldungen in der Chrome-Konsole. Dies bedeutet, dass die erste Funktion, die wir verloren haben, darin besteht, CSS-Module über @import einzuführen. Der Browser weiß, was er zu tun versucht Modul über eine HTTP-Anfrage. Mein Build-Prozess kopiert nur eine separate CSS-Datei, nicht jedes Modul. Aus diesem Grund kann der Browser sie nicht finden, um den Standard-@Import vorzunehmen Arbeit, aber das wäre ineffizient.

Erstes Plugin

Das Postcss-Import-Plugin kann @import in Sass ersetzen Ich habe den Build-Skriptcode über npm aktualisiert:

Führen Sie npm run postcss erneut aus und die einzelne CSS-Datei enthält alle Module.

"scripts": {
  "postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}

Ist das die Zukunft von CSS?
Das Inline-Offenlegen der @import-Funktion in Sass ist sehr leistungsfähig. Es ermöglicht uns, Stile besser zu organisieren. Ich bin mir nicht sicher, ob diese Funktion in Zukunft nativ unterstützt wird. Es ist immer ein Schritt erforderlich der Kompilierung, und es sieht auch nicht schlecht aus.

Ich denke, das PostCSS-Import-Plugin wird zu einer Grundkonfiguration für mein PostCSS, und das sollte auch für andere der Fall sein :

Dieses Plugin sollte wahrscheinlich als erstes Plugin Ihrer Liste verwendet werden. Auf diese Weise funktionieren andere Plugins auf dem AST, als ob nur eine einzige Datei verarbeitet werden müsste, und werden wahrscheinlich auch so funktionieren Das können Sie erwarten.

cssnext

[postcss-import]

cssnext ist ein Plug-in in PostCSS, das zukünftige CSS-Funktionen in aktuell unterstützte Funktionen kompiliert. Es ist insbesondere mit Sass Or kompatibel Less ist keine andere Sprache. Einige Funktionen werden bereits von Browsern unterstützt.

Ich verwende cssnext, um das fehlende Sass zu ergänzen Funktionen Die Lücke bleibt.

Browser-private Präfixe

Bevor ich diese Website erstellt habe, habe ich ein benutzerdefiniertes Sass-Mixin verwendet, um das Problem des Hinzufügens der erforderlichen Präfixe zu lösen. damit ich dieses gesamte Hybrid-Makromodul entfernen kann.

Variablen

Als nächstes ändere ich die Sass-Variablen in benutzerdefinierte CSS-Eigenschaften. Beispielsweise schreibe ich es so:

Das sind nicht alle Sass-Variablen, die ich verwende, aber das ist es im Grunde. Der Rest befindet sich in separaten Modulen

Hinweis: Der Unterschied zwischen benutzerdefinierten Eigenschaften und benutzerdefinierten CSS-Eigenschaften besteht nur gültig in Eigenschaftswerten und kann nicht in Selektoren, Eigenschaftsnamen oder Medienabfragen verwendet werden.

$grey: #1e1e1d;
$yellow: #ffad15;
$offwhite: #f8f8f8;
$darkerwhite: darken($offwhite, 15);

Neue 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特性

为了样式按顺序回归,我决定利用更多的PostCSS插件.我用css mqpacker来合并使用相同查询条件的媒体查询.我也用cssnano来优化代码.

这也是为什么我期待去使用PostCSS.使用Sass的时候我感觉困在当前的特性中.但因为PostCSS本质是一个插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己来写一个插件.它的潜力令人兴奋.

我妥协了

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

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

更多从sass到PostCSS 相关文章请关注PHP中文网！