SASS - 여러 파일에 걸쳐 변수 사용

SASS - 여러 파일에 걸쳐 변수 사용

프로젝트에 대한 모든 SASS 변수 정의를 저장하는 central .scss 파일 하나를 보관하고 싶습니다.

// _master.scss 

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

프로젝트의 특성상 CSS 파일 수가 많을 것입니다.모든 프로젝트 전체 스타일 변수를 한 위치에 선언하는 것이 중요합니다.

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

이렇게 할 수 있습니다.

utilities라는 폴더가 있고 그 안에 _variables.scss라는 파일이 있습니다.

그 파일에서 나는 다음과 같은 변수를 선언합니다.

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

다음과 같은 다른 모든 scss 파일을 가져오는 style.scss 파일이 있습니다.

// Utilities
@import "utilities/variables";

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

그러면 내가 가져온 파일 중 어떤 파일에서도 내가 선언한 변수에 접근할 수 있어야 합니다.

변수 파일을 사용할 다른 파일보다 먼저 가져오는지 확인하십시오.

이 질문은 오래전에 받은 질문이라 업데이트된 답변을 올리려고 생각했습니다.

이제 사용을 피해야 합니다.@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;
}

에디트 작성 당시 @und3rdg에서 지적한 대로 (2020년 11월)@use현재 Dart Sass에서만 사용할 수 있으며 LibSass(현재는 사용되지 않음) 또는 Ruby Sass에서는 사용할 수 없습니다.최신 호환성은 https://sass-lang.com/documentation/at-rules/use 참조

이 답변은 제가 어떻게 이것을 사용하게 되었는지 그리고 제가 추가로 부딪힌 함정들을 보여줍니다.

마스터 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를 복제합니다.

각진 v10에서 나는 이런 것을 했고, 처음에는 a를 만들었습니다.master.scss파일에 다음 변수가 포함되어 있습니다.

master.scss파일:

$theme: blue;

$button_color: red;

$label_color: gray;

그 다음에 수입을 했습니다.master.scsse에 을 박아놓기style.scss상단:

style.scss 파일:

@use './master' as m;

합니다를 합니다.master.scss

m입니다.

사용하다@use@import아래의 공식 문서에 의거하여:

https://sass-lang.com/documentation/at-rules/import

의 에styles.scss다에 변수를 할 수 .master.scss아래와 같이:

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

도움이 되길...

해피코딩 :)

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

그리고 다음과 같이 꿀꺽꿀꺽/그룬트/웹팩 등으로 시청할 수 있습니다.

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

본와 같이 의 ,@import최신 버전의 SASS에서는 사용할 수 없습니다.@use "path to SASS partial file"파일 상단에 저장됩니다.*

) 합니다를 사용하여 .@use) 부분 SASS 파일은 기본 파일뿐만 아니라 이 파일을 사용하는 각 SAS 파일에 포함됩니다.

SASS 파일이 해 보겠습니다._variables.scss*partialsheader.scss.header.scss다음과 같이 적습니다.

@use "partials/variables" as *

에 할 수 ._variables.scss*와 함께$variable(접두사 없음).또는 이미 언급된 Christian과 같은 네임스페이스를 사용할 수 있습니다.

@use "partials/variables" as v

의 변수를 합니다._variables.scss*와 함께v.$variable.

* SASS 컴파일러는 각 부분 SASS 파일에 대해 별도의 CSS 파일이 생성되지 않도록 밑줄을 무시합니다.인 SASS다를 을 기본 수 .@use.

변수가 어디에 있는지 신경 쓸 필요가 없도록 색상 기반 클래스를 글로벌 sass 파일로 작성하는 것은 어떨까요?다음과 같습니다.

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

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

그리고 나서, 우리는 그 다음에 사용할 수 있습니다.background-color모든 파일의 클래스입니다.입니다를 가 없다는 입니다.variable.scss어떤 파일이든 그냥 사용하세요.

vite를 이용하여 vue3의 솔루션을 찾았습니다. 새스를 다를 할 수 있습니다.@forward그리고.@use.

_master.scss

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

_global.scss

@forward '_master.scss';
// etc...

그런 다음 vite.config.js에서 CSS 옵션을 다음과 같이 구성합니다.

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "./<path-to-file>/_globals.scss" as *;
        `,
      },
    },
  },
// etc...
});

네임스페이스 없이 모듈을 가져올 때 sass 문서에서 언급한 바와 같이

사용자가 작성한 스타일시트에 대해서만 이 작업을 수행하는 것이 좋습니다. 그렇지 않으면 이름 충돌을 유발하는 새 구성원을 소개할 수 있습니다!

그런 다음 다른 스타일시트 또는 구성요소에서 다른 @use 모듈을 다음과 같이 사용할 수 있습니다.

// component file needing a function module

@use 'functions.scss';

언급URL : https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files