Wie CSS-Theme über den Quellcode eine Stildatei generiert, die mehrere Sätze von Skin-Konfigurationen enthält

Der Inhalt dieses Artikels handelt davon, wie CSS-Theme mithilfe des Quellcodes eine Stildatei generiert, die mehrere Sätze von Skin-Konfigurationen enthält. Ich hoffe, dass er für Sie hilfreich ist . hat geholfen.

css-theme

Generieren Sie mehrere Themes aus einer einzigen CSS-Datei und führen Sie sie in einer CSS-Datei zusammen

Funktionen

Nur ​​ein CSS laden, Themes sofort durch Wechseln der RootClass wechseln

Volumenkomprimierung, mehrere CSS-Sätze zusammenführen, redundante Codes entfernen und Dateigrößenerweiterungen vermeiden

Geringer Eingriff, ändert das bestehende Entwicklungsmodell nicht, eine Änderung wird global wirksam

Installieren

$ npm i css-theme --save-dev

Verwenden

CSS-Schreiben

Verwenden Sie Platzhalter in CSS, wenn das Thema geändert werden muss. Der Platzhalter kann eine beliebige Zeichenfolge sein.
Sie können diese Platzhalter auch über Präprozessorvariablen in CSS-Dateien einfügen.

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

gulp-Plug-in-Modus

Rufen Sie das Theme-Plug-in in der gulp-Aufgabe auf. Einzelheiten finden Sie unter demo/gulp

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

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

less-Plug-in-Modus

Fügen Sie Theme-Middleware ein, wenn Sie less über Tools wie gulp/webpack aufrufen. Einzelheiten finden Sie unter demo/less

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'));
});

Konfiguration

Platzhalter: Platzhalter, der den Platzhalter beschreibt, der jeder Variablen in der CSS-Datei entspricht

Liste: Themenliste

list.targetMap: Der Wert, der jeder Variablen im Thema entspricht

list.rootClass: Die bei Verwendung dieses Themas oben hinzugefügte Klasse

list.default: Ob dieses Thema verwendet werden soll als Standardthema, standardmäßig angezeigt, wenn keine Klasse angegeben ist

module.exports = {
  'placeholder': {
    'dark': '#theme1',
    'light': '#theme2'
  },
  'list': [
    {
      'default': false,
      'targetMap': {
        'dark': '#ff6a3a',
        'light': '#ffa284',
      },
      'rootClass': 'skin_orange'
    },
    {
      'default': false,
      'targetMap': {
        'dark': '#fdd000',
        'light': '#ffd71c',
      },
      'rootClass': 'skin_yellow'
    }
  ]
};

Das obige ist der detaillierte Inhalt vonWie CSS-Theme über den Quellcode eine Stildatei generiert, die mehrere Sätze von Skin-Konfigurationen enthält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!