De Sass à PostCSS

De sass à PostCSS

J'utilise Sass depuis des années Mais récemment, j'ai voulu utiliser PostCSS et son plugin cssnext pour essayer des styles de gestion que j'adore en ce moment. Utiliser les futures fonctionnalités CSS sera plus facile que d'utiliser les outils que j'ai utilisés auparavant. Mon site personnel est le meilleur endroit pour tester de nouvelles fonctionnalités

La première étape consiste à lister ma liste de contrôle d'utilisation de Sass dont j'ai besoin de savoir quelles fonctionnalités. J'utilise et je m'assure que les nouvelles fonctionnalités sont remplacées dans postCSS. Voici les fonctionnalités que j'utilise dans ce projet :

• importation partielle)

• variables

• imbrication

• mixins)

• Prolonger

• Classes d'espace réservé

• Fonction de couleur (fonctions de couleur sombre et rgba)

• Compression (compression)

Préparation

Après le passage à la nouvelle syntaxe I Certaines préparations sont nécessaires La structure de répertoires actuelle du projet est l'utilisation typique de Sass (_) pour nommer les fichiers. , et l'extension de fichier est scss. J'utilise deux dossiers pour organiser les fichiers Sass. Le dossier moudules n'est pas simple à enregistrer. Les fichiers Sass qui génèrent du CSS, tels que les variables, les classes d'espace réservé et les mixins, enregistrent les fichiers Sass qui compilent du CSS.

Voici la structure originale des fichiers :

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

chaque composant Sass sera importé dans tylergaw.scss

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

J'ai réorganisé et renommé les fichiers. J'ai d'abord changé le suffixe de tous les fichiers de scss en css. J'ai utilisé un script Bash pour faire ce travail, plutôt que de le modifier un par un. Le trait de soulignement devant

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

est une habitude. d'écrire Sass, je l'ai donc également supprimé. Je ne peux pas utiliser la commande Bash pour tout terminer en même temps, je ne peux donc faire que manuellement chaque Go et le modifier.

La dernière étape consiste à déplacer tous les CSS. fichiers dans le dossier modules et supprimez le dossier partials. Je pense qu'il est plus efficace de gérer tous les CSS en tant que modules que de les diviser en modules/partials. Facile à comprendre.

Configuration de l'environnement

I. a commencé avec PostCSS CLI et ajouté une commande de script de build temporaire dans package.json :

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

En non, j'ai compilé le CSS sans changer de style :

`npm run postcss`

fonctionne normalement. aucune erreur dans la console, mais il n'y a pas de styles CSS sur la page

Le processus de construction est disponible, la tâche est maintenant de récupérer les styles

.

Dans la console Chrome, je vois beaucoup de messages 404. Cela signifie que la première fonctionnalité qui nous manque est l'inline @import .tylergaw.css qui introduit les modules CSS via @import. à faire. Le navigateur charge chaque module via une requête HTTP. Mon processus de construction copie uniquement un fichier CSS séparé, et pas tous les modules. Pour cette raison, le navigateur ne peut pas les trouver

. processus de construction pour faire fonctionner le @import par défaut, mais ce serait inefficace. J'ai besoin d'un remplacement @import en ligne de style Sass.

Le premier plugin

le plugin postcss-import peut remplacer @import. dans Sass, après l'avoir installé via npm, j'ai mis à jour le code du script de build :

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

Exécutez à nouveau npm, run postcss, un seul fichier CSS contient tous les modules. La page actuelle affiche certains styles.

Est-ce l'avenir du CSS ?

Exposer la fonction @import en ligne dans Sass est très puissant. Cela nous permet de mieux organiser les styles. Je ne suis pas sûr que cette fonction soit supportée nativement à l'avenir. Nous utilisons cette fonction. Elle nécessite toujours une étape. de compilation, et ça n'a pas l'air mal non plus.

Je pense que le plugin postcss-import deviendra une configuration de base pour mon PostCSS, et il devrait en être de même pour les autres. L'avis de l'auteur du plugin est cité ci-dessous. :

Ce plugin devrait probablement être utilisé comme premier plugin de votre liste. De cette façon, les autres plugins fonctionneront sur l'AST comme s'il n'y avait qu'un seul fichier à traiter, et fonctionneront probablement comme tel. vous pouvez vous attendre.

[postcss-import]

cssnext

cssnext est un plug-in dans PostCSS qui compile les futures fonctionnalités CSS en fonctionnalités actuellement prises en charge. En particulier, il est compatible avec Sass Or. Less n'est pas un langage différent. Il fournit des fonctionnalités de la spécification CSS en cours. Certaines fonctionnalités sont déjà prises en charge par les navigateurs. D'autres en sont encore aux premières étapes de la spécification

J'utilise cssnext pour remplir le Sass manquant. fonctionnalités L'écart restant.

Préfixes privés du navigateur

J'ai découvert Autoprefixer avant de créer ce site Web. J'ai utilisé un mixin Sass personnalisé pour résoudre le problème de l'ajout des préfixes requis. cssnext contient Autoprefixer, afin que je puisse supprimer tout ce module de macro hybride.

Variables

Ensuite, je change les variables Sass en propriétés personnalisées CSS. Par exemple, dans _setup.scss, je l'écris comme ceci :

Ce ne sont pas toutes les variables Sass que j'utilise, mais c'est essentiellement tout le reste sont dans des modules séparés

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

.

注意: 自定义属性和变量的区别.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.它们都允许你去使用未来的特性来编写代码.

J'utilise Sass depuis des années. Mais récemment, j'ai voulu utiliser PostCSS et son plugin cssnext pour essayer le style. J'adore pouvoir utiliser les futures fonctionnalités CSS maintenant, et elles sont bien meilleures. que les outils que j'utilisais auparavant. Soyez facile. Mon site personnel est le meilleur endroit pour essayer de nouvelles fonctionnalités

La première étape consiste à dresser une liste de mon utilisation de Sass. fonctionnalités que j'utilise et soyez sûr que les nouvelles fonctionnalités fonctionneront. Il existe des alternatives dans postCSS Voici les fonctionnalités que j'utilise dans ce projet :

• importation partielle

• variables )

• imbrication

• mixins

• étendre )

• classes d'espace réservé

• fonctions de couleur (fonctions de couleur sombre et rgba)

• Compression

Préparation

Je dois faire quelques préparatifs après être passé à la nouvelle syntaxe. La structure des répertoires du projet est maintenant typique pour l'utilisation de Sass. fichiers, et l'extension de fichier est scss. J'utilise deux dossiers pour organiser les fichiers Sass. Le dossier modules contient les fichiers Sass qui ne génèrent pas directement du CSS, tels que les variables, les classes d'espace réservé et les mixins. .

Voici la structure originale des fichiers :

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

Chaque composant Sass sera introduit dans tylergaw.scss.

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

J'ai réorganisé et renommé les fichiers. J'ai d'abord changé le suffixe de tous les fichiers de scss en css. J'ai utilisé un script Bash pour faire le travail au lieu de les modifier un par un

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

Le trait de soulignement devant est une habitude d'écrire en Sass. , donc je l'ai également supprimé. Je ne peux pas utiliser les commandes Bash pour tout terminer en même temps, je ne peux donc modifier chacun d'eux que manuellement

La dernière étape consiste à ajouter tous les CSS Déplacez les fichiers vers les modules. et supprimez le dossier partials. Je pense qu'il est plus facile de comprendre de gérer tous les CSS en tant que modules que de les diviser en modules/partiels.

Configuration de l'environnement

J'ai commencé avec la CLI PostCSS et ajout d'une commande de script de build temporaire à package.json :

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

J'ai compilé le CSS sans changer aucun style :

`npm run postcss`

Fonctionne normalement dans la console, mais. il n'y a pas de style CSS sur la page.

Le processus de construction est disponible et la tâche actuelle est de récupérer le style.

J'ai vu un beaucoup de 404 messages dans la console Chrome. Cela signifie que la première fonctionnalité que nous avons perdue est en ligne @import.tylergaw.css pour introduire des modules CSS via @import. Le navigateur les voit, sachez ce qu'il essaie de faire. via une requête HTTP. Mon processus de construction copie uniquement un fichier CSS distinct, pas chaque module. Pour cette raison, le navigateur ne peut pas les trouver

Je pourrais modifier le processus de construction pour que l'@import par défaut fonctionne. , mais ce serait inefficace. J'ai besoin d'un remplacement pour @import en ligne de style Sass

Premier plugin

Le plug-in postcss-import peut remplacer @import dans Sass. via npm, j'ai mis à jour le code du script de construction :

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

Exécutez à nouveau npm run postcss, et le fichier CSS unique contient tous les modules. La page actuelle affiche certains styles. 🎜>

Est-ce l'avenir du CSS ?
Exposer la fonction @import en ligne dans Sass est très puissant. Cela nous permet de mieux organiser les styles. Je ne suis pas sûr que cette fonction soit supportée nativement à l'avenir. Nous utilisons cette fonction. Elle nécessite toujours une étape. de compilation, et ça n'a pas l'air mal non plus.

Je pense que le plugin postcss-import deviendra une configuration de base pour mon PostCSS, et il devrait en être de même pour les autres. L'avis de l'auteur du plugin est cité ci-dessous. :

Ce plugin devrait probablement être utilisé comme premier plugin de votre liste. De cette façon, les autres plugins fonctionneront sur l'AST comme s'il n'y avait qu'un seul fichier à traiter, et fonctionneront probablement comme tel. vous pouvez vous attendre.

cssnext

[postcss-import]

cssnext est un plug-in dans PostCSS qui compile les futures fonctionnalités CSS en fonctionnalités actuellement prises en charge. En particulier, il est compatible avec Sass Or. Less n'est pas un langage différent. Il fournit des fonctionnalités de la spécification CSS en cours. Certaines fonctionnalités sont déjà prises en charge par les navigateurs. D'autres en sont encore aux premières étapes de la spécification

J'utilise cssnext pour remplir le Sass manquant. fonctionnalités L'écart restant.

Préfixes privés du navigateur

J'ai découvert Autoprefixer avant de créer ce site Web. J'ai utilisé un mixin Sass personnalisé pour résoudre le problème de l'ajout des préfixes requis. cssnext contient Autoprefixer, afin que je puisse supprimer tout ce module de macro hybride.

Variables

Ensuite, je change les variables Sass en propriétés personnalisées CSS. Par exemple, dans _setup.scss, je l'écris comme ceci :

Ce ne sont pas toutes les variables Sass que j'utilise, mais c'est essentiellement tout. Le reste est dans des modules séparés

Remarque : la différence entre les propriétés personnalisées et les variables .CSS est uniquement la propriété personnalisée. valide dans les valeurs de propriété et ne peut pas être utilisé dans les sélecteurs, les noms de propriétés ou les requêtes multimédias.

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

Nouveau 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中文网！