Comment CSS-Theme génère un fichier de style contenant plusieurs ensembles de configurations d'habillage via le code source

Le contenu de cet article explique comment css-theme génère un fichier de style contenant plusieurs ensembles de configurations de skin via le code source. Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. . a aidé.

css-theme

Générer plusieurs thèmes à partir d'un seul fichier CSS et les fusionner en un seul fichier CSS

Fonctionnalités

Chargez un seul CSS, changez de thème instantanément en changeant de rootClass

Compression de volume, fusionnez plusieurs ensembles de CSS, supprimez les codes redondants et évitez l'expansion de la taille des fichiers

Faible intrusion, ne change pas le modèle de développement existant, une modification prend effet globalement

Installer

$ npm i css-theme --save-dev

Utiliser

Écriture CSS

Utilisez des espaces réservés en CSS là où le thème doit changer. L'espace réservé peut être n'importe quelle chaîne.
Vous pouvez également injecter ces espaces réservés dans des fichiers CSS via des variables de préprocesseur.

@dark: #theme1;
@light: #theme2;

.container {
  .text1 {
    font-size: 16px;
    color: #theme1;
    line-height: normal;
  }
  .text2 {
    font-size: 14px;
    color:  @dark;
    line-height: normal;
  }
  .text2 {
    font-size: 14px;
    color: @light;
    line-height: normal;
  }
}

Mode plug-in gulp

Appelez le plug-in de thème dans la tâche gulp. Pour plus de détails, voir demo/gulp

var cssTheme = require('css-theme').gulp; // gulp-plugin
var themeConfig = require('./theme.config'); // configs

less({
  plugins:[new LessPluginTheme(themeConfig)]
})

mode plug-in moins

Insérer un middleware de thème lors de l'appel less via des outils tels que gulp/webpack. Voir demo/less pour plus de détails

var LessPluginTheme = require('css-theme').less; // less-plugin
var themeConfig = require('./theme.config'); // configs

gulp.task('default', function() {
  return gulp.src('./index.less')
    .pipe(less())
    .pipe(cssTheme(themeConfig))
    .pipe(gulp.dest('./dist'));
});

list.targetMap : La valeur correspondant à chaque variable du thème

list.rootClass : La classe ajoutée au niveau supérieur lors de l'utilisation de ce thème

list.default : s'il faut ajouter ceci. Le thème sert de thème par défaut et s'affiche par défaut lorsqu'aucune classe n'est spécifiée

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!