사스 변수 오버라이드

해결책: 빌드 도구를 사용해 동적으로 Sass 변수를 오버라이드하고 컴파일하기

1. Sass 파일에서 변수 오버라이드 허용

Sass는 특정 파일을 임포트할 때, 기존 변수를 오버라이드할 수 있습니다. 이를 위해 테마 변수 파일을 별도로 정의하고, 이를 메인 스타일 파일에 임포트하여 각 테마별로 오버라이드할 수 있습니다.

main.scss (메인 스타일 파일)

// 기본 primary 색상
$color-primary: #52BCD3 !default;

// 다른 스타일
body {
  background-color: $color-primary;
}

• 여기서 !default 키워드를 사용하면, 이 변수는 나중에 오버라이드될 수 있다는 의미입니다.

theme-blue.scss (파란 테마)

scss

코드 복사

$color-primary: #52BCD3; // 파란색 테마의 primary 색상 @import 'main';

theme-red.scss (빨간 테마)

scss

코드 복사

$color-primary: #ff4c4c; // 빨간색 테마의 primary 색상 @import 'main';

 

2. Gulp를 사용한 Sass 컴파일 예시

Gulp를 사용해서 동적으로 Sass 파일을 오버라이드하고 컴파일할 수도 있습니다.

Gulp 설정 예시

1. Gulp 설치 및 플러그인 설치:

코드 복사

npm install gulp gulp-sass --save-dev

1. Gulp 파일 설정 (gulpfile.js):

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// Sass 컴파일 함수
gulp.task('sass', function() {
    return gulp.src('src/scss/theme-*.scss')  // 테마별로 Sass 파일 컴파일
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

// Sass 파일을 감시하여 변경 시 자동 컴파일
gulp.task('watch', function() {
    gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

 

 

이렇게 설정하면, 테마별 Sass 파일이 변경될 때마다 자동으로 컴파일됩니다. 사용자가 선택한 테마에 맞게 컴파일된 CSS 파일을 동적으로 적용할 수 있습니다.

4. 결론

• 브라우저에서 Sass 파일을 실시간으로 컴파일하여 기존 변수를 오버라이드하는 것은 불가능합니다.
• 대신, Webpack이나 Gulp 같은 빌드 도구를 사용하여 변수를 오버라이드한 후 Sass 파일을 동적으로 컴파일하고 해당 테마를 적용할 수 있습니다.
• 사용자가 테마를 선택할 때, 미리 준비된 빌드 도구를 사용하여 Sass 파일을 컴파일하거나, 미리 컴파일된 CSS 파일을 로드하는 방법을 사용하는 것이 현실적입니다.