Comment utiliser PostCSS comme alternative configurable au SASS-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Comment utiliser PostCSS comme alternative configurable au SASS

Lisa Kudrow

Feb 12, 2025 am 08:24 AM

How to Use PostCSS as a Configurable Alternative to Sass

Les développeurs Web aiment les préprocesseurs SASS CSS. Selon le point de vue de Sass de l'enquête sur l'état de CSS, chaque développeur comprend SASS, 89% des développeurs l'utilisent régulièrement et 88% des développeurs en sont très satisfaits.

De nombreux packagers Web incluent le traitement SASS, mais vous pouvez également utiliser POSTCSS sans le savoir. PostCSS est principalement connu pour son plugin AutopRefixer, qui ajoute automatiquement les préfixes du vendeur -webkit, -moz et -ms aux propriétés CSS en cas de besoin. Son système de plugin signifie qu'il peut faire plus ... Par exemple, vous pouvez compiler des fichiers .css sans utiliser le compilateur SASS.

Ce didacticiel explique comment créer un préprocesseur CSS personnalisé qui compile la syntaxe SASS et ajoute plus de fonctionnalités. C'est idéal pour tous ceux qui connaissent des nœuds.js et ont des besoins CSS spécifiques.

points clés

, postcss-scss, postcss-advanced-variables et postcss-nested. autoprefixer

Démarrage rapide

Un projet d'échantillon PostCSS peut être cloné à partir de GitHub. Il nécessite Node.js, alors exécutez NPM Installer pour obtenir toutes les dépendances.

Compiler la démo SRC / SCSS / Main.SCSS Code source pour construire / css / main.css en utilisant la commande suivante:

<code>npm run css:dev</code>

Utilisez la commande suivante pour compiler automatiquement lorsque le fichier change:

<code>npm run css:watch</code>

puis quitter la surveillance en appuyant sur

Ctrl | cmd c dans le terminal.

Ces deux options créent également une carte source dans build / css / main.css.map qui fait référence au fichier source d'origine dans l'outil de développement.

CSS compressé au niveau de la production sans carte source peut être compilé à l'aide de la commande suivante:

<code>npm run css:build</code>

Pour plus d'informations, consultez le fichier readme.md.

devriez-vous remplacer SASS par PostCSS?

Le compilateur SASS n'a aucun problème, mais veuillez considérer les facteurs suivants.

Dépendances des modules

La dernière version de Dart SASS peut être installée à l'aide d'un gestionnaire de package NODE.JS NPM:

<code>npm run css:dev</code>

Compiler le code SASS .SCSS avec la commande suivante:

<code>npm run css:watch</code>

Générer automatiquement les cartes source (--No-Source-Map les fermera) ou ajouter - watch pour les compiler automatiquement lorsque les fichiers source changent.

La dernière version de l'espace d'installation SASS est inférieure à 5 Mo.

PostCSS devrait nécessiter moins de ressources, et un compilateur de style SASS de base avec un préfixe et une compression automatiques nécessite moins de 1 Mo d'espace. En fait, votre dossier Node_Modules s'étendra à plus de 60 Mo et augmentera rapidement à mesure que davantage de plugins seront ajoutés. Il s'agit principalement d'installer d'autres dépendances dans NPM. Même si le postCSS peut ne pas les utiliser, il ne peut pas être considéré comme une alternative légère.

Cependant, si vous utilisez déjà POSTCSS pour AutopRefixer ou à d'autres fins, vous n'avez peut-être pas besoin de SASS.

vitesse de traitement

Le lent compilateur SASS basé sur Ruby a longtemps disparu et la dernière version utilise le runtime DART compilé.

c'est très rapide .

POSTCSS est pur javascript, et bien que les repères varieront, il peut être trois fois plus lent lors de la compilation du même code source.

Cependant, si vous exécutez déjà PostCSS après SASS, cette différence de vitesse sera moins visible. Un processus en deux étapes peut être plus lent que l'utilisation de PostCSS seul, car une grande partie de son travail implique la tokenisation des propriétés CSS.

Custom

Le langage SASS contient un grand nombre de fonctions, y compris les variables, la nidification, les pièces, le mélange, etc. Mais il y a des inconvénients:

Vous ne pouvez pas facilement ajouter de nouvelles fonctionnalités.

Vous voudrez peut-être avoir une option pour convertir les couleurs HSLA en RVB. L'écriture de fonctions personnalisées peut être possible, mais d'autres exigences seront impossibles - par exemple en ligne SVG comme image d'arrière-plan.
Vous ne pouvez pas limiter facilement l'ensemble de fonctionnalités.

Vous pouvez préférer que votre équipe n'utilise pas de nidification ou de @Extend. Les règles de peluche aideront, mais elles n'empêcheront pas SASS de compiler des fichiers .css valides.

PostCSS est plus facile à configurer.

postcss lui-même ne fait rien. Les fonctionnalités de traitement nécessitent un ou plusieurs plugins disponibles. La plupart des plugins effectuent une seule tâche, donc si vous n'avez pas besoin de nidification, n'ajoutez pas de plugins imbriqués. Si nécessaire, vous pouvez écrire votre propre plug-in à l'aide du module JavaScript standard qui tire parti des capacités de Node.js.

Installez PostCSS

PostCSS peut être utilisé avec WebPack, Parcel, Gulp.js et autres outils de construction, mais ce tutoriel montre comment l'exécuter à partir de la ligne de commande.

Si nécessaire, utilisez NPM INIT pour initialiser un nouveau projet Node.js. Configurez POSTCSS en installant les modules suivants pour effectuer l'analyse de base .SCSS à l'aide de plugins pour partiel, variable, mixage, nid et auto-préfixe:

<code>npm run css:build</code>

Comme le projet d'échantillon, PostCSS et ses plugins sont installés localement. Il s'agit d'une option pratique si votre projet peut avoir des exigences de compilation différentes.

Remarque: PostCSS ne peut être exécuté que à partir des fichiers JavaScript, mais le module PostCSS-CLI fournit un wrapper qui peut être appelé à partir de la ligne de commande. Le module PostCSSSSS permet à PostCSS de lire les fichiers .SCSS mais ne les convertisse pas.

Configuration de l'autopréfixeur

AutoPrefixer utilise BrowsersList pour déterminer les préfixes des fournisseurs nécessaires en fonction de la liste des navigateurs que vous prenez en charge. Le moyen le plus simple est de le définir comme un tableau de "liste de navigateurs" dans package.json. L'exemple suivant ajoute un préfixe de fournisseur lorsqu'un navigateur a au moins 2% de la part de marché:

<code>npm run css:dev</code>

Votre première construction

Vous aurez généralement un seul fichier root sass .scss qui importe tous les fichiers partiels / composants requis. Par exemple:

<code>npm run css:watch</code>

La compilation

peut être lancée en exécutant NPX PostCSS, suivie de fichiers d'entrée, de fichiers - Output et de toutes les options requises. Par exemple:

<code>npm run css:build</code>

cette commande:

analyse./src/scss/main.scss
Sortie vers ./build/css/main.css
Définir la variable d'environnement Node_env au développement
Sortir le fichier de carte source externe
Définir le message détaillé de sortie et d'erreur
Définissez l'analyseur Sass PostCSSSSSSS, et
Utilisez des plugins PostCSS-Advanced-Variables, PostCSSSed et Autoprefixer pour gérer les pièces, les variables, le mélange, la nidification et l'autopréfixateur

Alternativement, vous pouvez ajouter - watch pour compiler automatiquement lors de la modification du fichier .scss.

Créer un fichier de configuration postcss

Pour les listes de plugin plus longues, la ligne de commande peut rapidement devenir difficile à gérer. Vous pouvez le définir comme un script NPM, mais le fichier de configuration PostCSS est une option plus simple qui offre d'autres possibilités.

Le fichier de configuration PostCSS est un fichier de module JavaScript nommé postcss.config.js, généralement stocké dans le répertoire racine du projet (ou quel que soit le répertoire à partir de laquelle vous exécutez PostCSS). Le module doit exporter une seule fonction:

<code>npm install -g sass</code>

Il passe un objet CFG avec des propriétés définies par la commande PostCSS. Par exemple:

<code>sass [input.scss] [output.css]</code>

Vous pouvez vérifier ces propriétés et réagir en conséquence - par exemple, pour déterminer si vous exécutez en mode développement et si vous traitez le fichier d'entrée .scs:

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

La fonction doit renvoyer un objet dont le nom de la propriété correspond à l'option PostCSS-CLI de commande. Le fichier de configuration suivant copie la commande de démarrage rapide longue utilisée ci-dessus:

<code>"browserslist": [
  "> 2%"
],</code>

Vous pouvez désormais exécuter PostCSS avec des commandes plus courtes:

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

Voici quelques choses à noter:

- Verbose est facultatif: il n'est pas défini dans posctcss.config.js.
L'analyse de syntaxe SASS ne sera appliquée que lorsque l'entrée est un fichier .scss. Sinon, il est par défaut vers CSS standard.
La carte source ne sera sortie que lorsque --env est défini sur le développement.
Vous pouvez toujours ajouter - regarder pour la compilation automatique.

Si vous préférez mettre Postcss.config.js dans un autre répertoire, vous pouvez vous y référer avec l'option - Config - par exemple --config / mycfg /. Dans l'exemple du projet, la configuration ci-dessus est dans Config / Postcss.config.js. Il est référencé en exécutant NPM Run CSS: Basic, qui appelle:

<code>npm run css:dev</code>

Ajouter plus de plugins

La section suivante fournit quelques exemples de plugins PostCSS qui peuvent analyser la syntaxe .SCSS supplémentaire ou fournir des fonctionnalités de traitement au-delà de la portée du compilateur SASS.

Utilisation du jeton de conception

Les jetons de conception sont un moyen indépendant de la technologie de stocker des variables telles que les polices à l'échelle de l'entreprise, les couleurs, l'espacement, etc. Vous pouvez stocker la paire de valeurs de nom de jeton dans un fichier JSON:

<code>npm run css:watch</code>

Référez-les ensuite dans n'importe quel Web, Windows, MacOS, iOS, Linux, Android ou d'autres applications.

SASS ne prend pas directement en charge les jetons de conception, mais les objets JavaScript avec des attributs de variables (qui maintiennent des paires de valeurs de nom) peuvent être transmises au plugin postcss PostCSS-Advanced-Variables existant:

<code>npm run css:build</code>

Le plugin convertit toutes les valeurs en variables Global Sass $ qui peuvent être utilisées dans n'importe quelle partie. La valeur de secours peut être définie pour s'assurer que la variable est disponible même si elle manque dans le jeton. Par exemple:

<code>npm install -g sass</code>

La variable de jeton peut ensuite être référencée dans n'importe quel fichier .scss. Par exemple:

<code>sass [input.scss] [output.css]</code>

Dans l'exemple du projet, un fichier token.json est défini, qui est chargé et utilisé lors de l'exécution de NPM Run CSS: Dev.

Ajouter le support de la carte SASS

La carte SASS est un objet de valeur clé. La fonction Map-get peut trouver des valeurs par nom.

L'exemple suivant définit un point d'arrêt de la requête multimédia comme une carte SASS et utilise un mixin de réponse pour obtenir la valeur nommée:

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

Les propriétés par défaut et les modifications de requête multimédia peuvent ensuite être définies dans le même sélecteur. Par exemple:

<code>"browserslist": [
  "> 2%"
],</code>

compilé avec CSS:

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

Le plugin postcss-map-get ajoute le traitement de la carte SASS. L'installez avec la commande suivante:

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer</code>

puis ajoutez-le à postcss.config.js:

<code>// postcss.config.js
module.exports = cfg => {

  // ... 配置 ...

};</code>

Ajouter une optimisation des requêtes multimédias

Puisque nous avons ajouté des requêtes multimédias, il sera utile de les combiner et de les trier en priorités mobiles. Par exemple, le CSS suivant:

<code>{
  cwd: '/home/name/postcss-demo',
  env: 'development',
  options: {
    map: undefined,
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/name/postcss-demo/src/scss',
    basename: 'main.scss',
    extname: '.scss'
  }
}</code>

peut être fusionné dans:

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  // ... 配置 ...

};</code>

Ce n'est pas possible dans SASS, mais peut être implémenté à l'aide du plugin postcss PostCSS-Sort-Media-Queries. L'installez avec la commande suivante:

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')(),
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

puis ajoutez-le à postcss.config.js:

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --verbose</code>

Ajouter le traitement des actifs

La gestion des actifs n'est pas fournie dans SASS, mais les actifs PostCSS facilitent la tâche. Le plugin analyse l'URL de l'image CSS, ajoute la compensation du cache, définit la taille de l'image et incline le fichier à l'aide de la notation Base64. Par exemple:

<code>npx postcss src/scss/main.scss \
    --output build/css/main.css \
    --env development \
    --verbose \
    --config ./config/</code>

compilé comme:

<code>{

  "font-size": "16px",

  "font-main": "Roboto, Oxygen-Sans, Ubuntu, sans-serif",
  "lineheight": 1.5,

  "font-code": "Menlo, Consolas, Monaco, monospace",
  "lineheight-code": 1.2,

  "color-back": "#f5f5f5",
  "color-fore": "#444"

}</code>

Utilisez la commande suivante pour installer le plug-in:

<code>// PostCSS配置
module.exports = cfg => {

  // 将令牌导入为Sass变量
  const variables = require('./tokens.json'); // 新的

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')({ variables }), // 已更新
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

puis ajoutez-le à postcss.config.js. Dans ce cas, le plugin est invité à rechercher des images dans le SRC / Images / répertoire:

<code>// 如果tokens.json中未设置“color-back”值，则将默认背景颜色设置为#FFF
$color-back: #fff !default;</code>

Ajouter une compression

CSSNANO établit la norme pour la compression CSS. La compression peut nécessiter plus de temps de traitement que les autres plugins et ne peut donc être appliquée que dans la production.

Installez CSSNANO en utilisant la commande suivante:

<code>body {
  font-family: $font-main;
  font-size: $font-size;
  line-height: $lineheight;
  color: $color-fore;
  background-color: $color-back;
}</code>

puis ajoutez-le à postcss.config.js. Dans ce cas, la compression ne sera effectuée que si Node_env est défini sur autre chose que le développement:

<code>npm run css:dev</code>

Paramètres --env à la production déclenche la compression (et supprime la carte source):

<code>npm run css:watch</code>

Dans l'exemple du projet, la production CSS peut être compilée en exécutant NPM Run CSS: Build.

migrer vers PostCSS?

POSTCSS est un outil puissant et configurable qui peut compiler les fichiers .SCSS et améliorer (ou limiter) le langage SASS standard. Si vous utilisez déjà POSTCSS pour AutopRefixer, vous pouvez complètement supprimer le compilateur SASS tout en conservant votre syntaxe préférée.

Plus de liens:

Référence du langage sass
page d'accueil postcss
Liste du plugin postcss
Répertoire consultable pour le plug-in postcss
plugin postcss sur npmjs.com
Écriture du plugin postcss
postcss cli

Des questions fréquemment posées sur PostCSS

Qu'est-ce que PostCSS? PostCSS est un outil de conversion de styles à l'aide du plugin JavaScript. Il est couramment utilisé dans le développement Web et utilise divers plugins pour gérer les CSS pour améliorer et étendre les fonctionnalités de CSS standard.

En quoi PostCSS est-il différent des préprocesseurs CSS traditionnels comme Sass ou moins? Contrairement aux préprocesseurs traditionnels, le PostCSS lui-même n'est pas un préprocesseur, mais un outil qui utilise des plug-ins pour convertir CSS. Il permet aux développeurs d'utiliser des méthodes modulaires et personnalisables en sélectionnant uniquement les plugins nécessaires à un projet spécifique.

Quels sont les cas d'utilisation courants pour PostCSS? PostCSS est généralement utilisé pour des tâches telles que le préfixe automatique, la vérification du code, la compression, le remplacement des variables et la compatibilité de la syntaxe CSS future. Il fournit un système flexible et modulaire pour améliorer la fonctionnalité du CSS standard.

Comment installer et configurer PostCSS pour mon projet? Vous pouvez utiliser NPM (Node Package Manager) pour installer PostCSS et ses plugins. Après l'installation, vous devez créer un fichier de configuration (généralement appelé postcss.config.js) pour définir le plugin pour le projet et ses paramètres.

Qu'est-ce qu'un préfixe automatique et pourquoi est-il utile dans POSTCSS? Le préfixe automatique est un processus où PostCSS ajoute automatiquement les préfixes des fournisseurs aux propriétés CSS pour assurer la compatibilité avec différents navigateurs. Cela aide les développeurs à écrire du code plus propre, en évitant les préfixes manuels spécifiques aux fournisseurs.

Puis-je utiliser POSTCSS avec des préprocesseurs comme Sass ou moins? Oui, PostCSS peut être utilisé avec des préprocesseurs comme Sass ou moins. Vous pouvez profiter des deux en traitant davantage la sortie du préprocesseur en utilisant le plugin PostCSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn