CSS 테마가 소스 코드를 통해 여러 스킨 구성 세트를 포함하는 스타일 파일을 생성하는 방법

이 글의 내용은 CSS 테마가 소스 코드를 통해 여러 세트의 스킨 구성을 포함하는 스타일 파일을 생성하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

css-theme

단일 CSS 파일에서 여러 테마를 생성하여 하나의 CSS 파일로 병합

Features

단 하나의 CSS만 로드하고, rootClass를 전환하여 테마를 즉시 전환

볼륨 압축, 여러 CSS 세트 병합, 중복 코드 제거, 파일 크기 확장 방지

낮은 침입, 기존 개발 모델 변경 금지, 한 곳에서 수정, 전역 적용

설치

$ npm i css-theme --save-dev

사용

css를 사용하여 작성

테마를 변경해야 하는 경우 CSS에서 자리 표시자를 사용하세요. 자리 표시자는 어떤 문자열이든 될 수 있습니다.
전처리기 변수를 통해 이러한 자리 표시자를 CSS 파일에 삽입할 수도 있습니다.

@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 플러그인 모드

gulp 작업에서 테마 플러그인을 호출하세요. 자세한 내용은 데모/gulp

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

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

less 플러그인 모드

를 참조하세요. gulp/webpack과 같은 도구를 통해 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'));
});

Configuration

placeholder: CSS 파일의 각 변수에 해당하는 자리 표시자를 설명하는 자리 표시자

list: 테마 목록

list.targetMap: 테마 Value

list의 각 변수에 해당 .rootClass: 테마 사용 시 최상위에 추가되는 클래스

list.default: 이 테마를 기본 테마로 사용할지, 클래스가 지정되지 않은 경우 기본으로 테마를 표시할지 여부

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

위 내용은 CSS 테마가 소스 코드를 통해 여러 스킨 구성 세트를 포함하는 스타일 파일을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!