SASS-여러 파일에서 변수 사용

프로젝트의 모든 SASS 변수 정의를 저장하는 하나의 중앙 .scss 파일을 유지하고 싶습니다.

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc... 

이 프로젝트는 특성상 많은 CSS 파일을 갖습니다. 프로젝트 전체의 모든 스타일 변수를 한 위치에 선언해야합니다.

SCSS에서 이것을 수행하는 방법이 있습니까?

다음과 같이 할 수 있습니다 :

유틸리티라는 폴더가 있고 그 안에는 _variables.scss라는 파일이 있습니다.

해당 파일에서 변수를 다음과 같이 선언합니다.

$black: #000;
$white: #fff;

그런 다음 style.scss 파일을 사용하여 다음과 같이 다른 모든 scss 파일을 가져옵니다.

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

그런 다음 가져온 파일 중 내가 선언 한 변수에 액세스 할 수 있어야합니다.

변수 파일을 사용하려는 변수 파일보다 먼저 가져와야합니다.

이 답변은 내가 어떻게 이것을 사용했는지와 내가 겪은 추가 함정을 보여줍니다.

마스터 SCSS 파일을 만들었습니다. 이 파일을 가져 오려면 처음에 밑줄 이 있어야합니다 .

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

그런 다음 다른 모든 .SCSS 파일의 헤더에서 마스터를 가져옵니다.

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

중대한

변수, 함수 선언 및 기타 SASS 기능 외에는 _master.scss파일에 포함시키지 마십시오 . 실제 CSS를 포함하면 마스터를 가져 오는 모든 파일에이 CSS가 복제됩니다.

이 질문은 오래 전에 요청되었으므로 업데이트 된 답변을 게시 할 것이라고 생각했습니다.

이제는 사용 하지 않아야합니다 @import. 문서에서 가져온 것 :

Sass는 앞으로 몇 년 동안 점차적으로 단계적으로 폐지하고 결국 언어에서 완전히 제거 할 것입니다. 대신 @use 규칙을 선호하십시오.

이유의 전체 목록은 여기에서 찾을 수 있습니다

이제 @use아래와 같이 사용해야 합니다.

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

네임 스페이스에 대한 별칭을 만들 수도 있습니다.

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

index.scss를 작성하면 모든 파일 구조를 가져올 수 있습니다. 엔터프라이즈 프로젝트에서 내 색인을 붙여 넣을 것입니다. 아마 CSS로 파일을 구조화하는 다른 방법이 도움이 될 것입니다.

@import 'base/_reset';

@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'helpers/_helpers';
@import 'helpers/_placeholders';

@import 'base/_typography';

@import 'pages/_versions';
@import 'pages/_recording';
@import 'pages/_lists';
@import 'pages/_global';

@import 'forms/_buttons';
@import 'forms/_inputs';
@import 'forms/_validators';
@import 'forms/_fieldsets';

@import 'sections/_header';
@import 'sections/_navigation';
@import 'sections/_sidebar-a';
@import 'sections/_sidebar-b';
@import 'sections/_footer';

@import 'vendors/_ui-grid';

@import 'components/_modals';
@import 'components/_tooltip';
@import 'components/_tables';
@import 'components/_datepickers';

그리고 다음과 같이 gulp / grunt / webpack 등으로 볼 수 있습니다.

gulpfile.js

// SASS 작업

var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['watch']);

전역 sass 파일에 색상 기반 클래스를 작성하는 방법은 어떻습니까? 따라서 변수의 위치를 ​​신경 쓸 필요가 없습니다. 다음과 같이 :

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

그런 다음 background-color모든 파일 에서 클래스를 사용할 수 있습니다 . 내 요점은 variable.scss파일 을 가져올 필요가 없다는 것입니다.