@import를 사용하여 sass에서 전체 디렉토리를 가져올 수 있습니까?

다음과 같이 스타일 시트를 SASS 부분으로 모듈화하고 있습니다.

@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues

@import compass 또는 무언가와 같은 전체 부분 디렉토리 (SAS-partials로 가득 찬 디렉토리)를 포함시키는 방법이 있습니까?

Rails 프로젝트에서 Sass를 사용하는 경우, sass-rails gem https://github.com/rails/sass-rails 는 glob 가져 오기를 제공합니다.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

"디렉토리를 가져올 경우 가져 오기 순서를 어떻게 결정할 수 있습니까? 새로운 수준의 복잡성을 도입 할 수있는 방법은 없습니다."

일부는 파일을 디렉토리로 구성하면 복잡성을 줄일 수 있다고 주장합니다.

우리 조직의 프로젝트는 다소 복잡한 앱입니다. 17 개의 디렉토리에 119 개의 Sass 파일이 있습니다. 이것은 대략 우리의 견해에 해당하며 주로 조정에 사용되며 무거운 리프트는 맞춤형 프레임 워크로 처리됩니다. 나에게 가져온 디렉토리의 몇 줄은 가져온 파일 이름 119 줄보다 덜 복잡합니다.

로드 순서를 해결하기 위해 먼저로드해야하는 파일 (믹스 인, 변수 등)을 초기로드 디렉토리에 배치합니다. 그렇지 않으면, 우리가 올바르게 일을한다면,로드 순서는 중요하지 않습니다.

이 기능은 Sass에 포함되지 않습니다. 주요한 이유 중 하나는 수입 주문입니다. CSS에서 마지막으로 가져온 파일은 앞에서 언급 한 스타일을 무시할 수 있습니다. 디렉토리를 가져올 경우 가져 오기 순서를 어떻게 확인할 수 있습니까? 새로운 수준의 복잡성을 도입하지 않는 방법은 없습니다. 가져 오기 목록을 유지하면 (예제에서와 같이) 가져 오기 순서가 명시 적입니다. 다른 파일에 정의 된 스타일을 자신있게 재정의하거나 한 파일에 믹스 인을 작성하고 다른 파일에 사용하려는 경우에 필수적입니다.

더 철저한 논의를 원하시면 여기에서 닫힌 기능 요청을 보십시오.

sass-globbing 프로젝트를 확인하십시오 .

__partials__.scss같은 디렉토리에 이름이 지정된 파일을 만듭니다.partials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

에서가 __partials__.scss, 나는이 쓴 :

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

따라서 전체를 가져 오려면을 partials쓰십시오 @import "partials". 그들 중 하나를 가져 오기를 원한다면을 쓸 수도 있습니다 @import "partials/header".

다음과 같이 해당 파일의 모든 파일을 가져오고 가져 오려는 폴더에 sass 파일을 배치하여 약간의 해결 방법을 사용할 수 있습니다.

파일 경로 : main / current / _current.scss

@import "placeholders"; @import "colors";

그리고 다음 디렉토리 수준 파일에서는 그 디렉토리에서 모든 파일을 가져온 파일에 대해 가져 오기를 사용합니다.

파일 경로 : main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

그렇게하면 전체 디렉토리를 가져 오는 것처럼 동일한 수의 파일이 있습니다. 순서에 유의하십시오. 마지막에 오는 파일은 일치하는 스타일을 무시합니다.

소스 순서 를 유지 하고 싶을 수도 있습니다 .

@import
  'foo',
  'bar';

나는 이것을 선호한다.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

그렇게 보이지 않습니다.

이러한 파일 중 하나에 항상 다른 파일이 필요한 경우 다른 파일을 가져 와서 최상위 파일 만 가져 오십시오. 그들이 모두 독립형이라면, 지금처럼 계속해야한다고 생각합니다.

Dennis Best의 답변에 따르면 "그렇지 않으면로드 순서가 적절하고 제대로 수행되지 않으면 관련이 없어야합니다."라고 말합니다. 이것은 단순히 잘못된 것입니다. 올바르게 작업하고 있다면 CSS 순서를 사용하여 특이성을 줄이고 CSS를 간단하고 깨끗하게 유지하십시오.

가져 오기를 구성 _all.scss하는 것은 디렉토리에 파일을 추가하는 것 입니다. 디렉토리에 모든 관련 파일을 올바른 순서로 가져옵니다. 이런 식으로 내 주요 가져 오기 파일은 다음과 같이 간단하고 깨끗합니다.

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

필요한 경우 하위 디렉토리 에서도이 작업을 수행 할 수 있지만 CSS 파일의 구조가 너무 깊다고 생각하지 않습니다.

이 접근 방식을 사용하지만 믹스 인이나 애니메이션과 같은 순서가 중요하지 않은 상황에서는 여전히 glos import가 sass에 있어야한다고 생각합니다.

또한 귀하의 질문에 대한 답변을 검색합니다. 정답에 해당하는 모든 가져 오기 기능이 존재하지 않습니다.

그렇기 때문에 scss 폴더의 루트에 다음과 같이 파이썬 스크립트를 작성해야합니다.

- scss
  |- scss-crawler.py
  |- abstract
  |- base
  |- components
  |- layout
  |- themes
  |- vender

그런 다음 트리를 살펴보고 모든 scss 파일을 찾습니다. 실행되면 main.scss라는 scss 파일이 생성됩니다.

#python3
import os

valid_file_endings = ["scss"]

with open("main.scss", "w") as scssFile:
    for dirpath, dirs, files in os.walk("."):
        # ignore the current path where the script is placed
        if not dirpath == ".":
            # change the dir seperator
            dirpath = dirpath.replace("\\", "/")

            currentDir = dirpath.split("/")[-1]
            # filter out the valid ending scss
            commentPrinted = False
            for file in files:
                # if there is a file with more dots just focus on the last part
                fileEnding = file.split(".")[-1]
                if fileEnding in valid_file_endings:
                    if not commentPrinted:
                        print("/* {0} */".format(currentDir), file = scssFile)
                        commentPrinted = True
                    print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)

출력 파일의 예 :

/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';

이것은 나를 위해 잘 작동

@import 'folder/*';

모든 것을 자동으로 가져 오는 SASS 파일을 생성 할 수 있습니다.이 Gulp 작업을 사용합니다.

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

다음과 같이 폴더를 정렬하여 가져 오기 순서를 제어 할 수도 있습니다.

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]

오래된 질문 일지 모르지만 2020 년에도 여전히 관련이 있으므로 업데이트를 게시 할 수 있습니다. 10 월 19 일 업데이트 이후 우리는 일반적으로 @import 대신 @use 를 사용해야 하지만 이것은 단지 언급입니다. 이 질문에 대한 해결책은 색인 파일을 사용하여 전체 폴더 포함을 단순화하는 것입니다. 아래 예.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files

가져올 파일을 정의하면 모든 폴더의 공통 정의를 사용할 수 있습니다.

따라서 @import "style/*"스타일 폴더의 모든 파일을 컴파일합니다.

Sass의 가져 오기 기능에 대한 자세한 내용은 여기를 참조하십시오 .