เป็นไปได้หรือไม่ที่จะนำเข้าไดเรกทอรีทั้งหมดใน sass โดยใช้ @import

ฉันกำลังทำให้สไตล์ชีทของฉันเป็นแบบแยกส่วนด้วย SASS partials ดังนี้:

@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

มีวิธีรวมไดเรกทอรี partials ทั้งหมด (เป็นไดเรกทอรีที่เต็มไปด้วย SASS-partials) เช่น @import compass หรืออะไร?

หากคุณกำลังใช้ Sass ในโครงการ Rails อัญมณี sass-rails, https://github.com/rails/sass-rails จะมีคุณสมบัติการนำเข้าแบบกลม

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

หากต้องการตอบข้อกังวลในคำตอบอื่น "ถ้าคุณนำเข้าไดเรกทอรีคุณจะกำหนดลำดับการนำเข้าได้อย่างไรไม่มีวิธีที่จะไม่นำความซับซ้อนมาสู่ระดับใหม่"

บางคนอาจโต้แย้งว่าการจัดระเบียบไฟล์ของคุณลงในไดเรกทอรีสามารถลดความซับซ้อน

โครงการขององค์กรของฉันเป็นแอพที่ค่อนข้างซับซ้อน มีไฟล์ 119 Sass ใน 17 ไดเรกทอรี สิ่งเหล่านี้สอดคล้องกับมุมมองของเราและส่วนใหญ่จะใช้สำหรับการปรับด้วยการยกของหนักที่ถูกจัดการโดยกรอบงานที่กำหนดเองของเรา สำหรับฉันแล้วไดเรกทอรีที่นำเข้าไม่กี่บรรทัดนั้นมีความซับซ้อนน้อยกว่า 119 ชื่อไฟล์ที่นำเข้า

ในการจัดการกับลำดับการโหลดเราวางไฟล์ที่จำเป็นต้องโหลดก่อน - มิกซ์อิน, ตัวแปร ฯลฯ - ในไดเรกทอรีโหลดตอนต้น มิฉะนั้นคำสั่งโหลดคือและควรไม่เกี่ยวข้อง ... หากเราทำสิ่งต่าง ๆ อย่างถูกต้อง

คุณลักษณะนี้จะไม่เป็นส่วนหนึ่งของ Sass เหตุผลสำคัญหนึ่งคือการนำเข้าสินค้า ใน CSS ไฟล์ที่นำเข้ามาล่าสุดสามารถแทนที่สไตล์ที่ระบุไว้ก่อนหน้า หากคุณนำเข้าไดเรกทอรีคุณจะกำหนดลำดับการนำเข้าได้อย่างไร ไม่มีทางที่จะไม่แนะนำระดับใหม่ของความซับซ้อน โดยการเก็บรายการนำเข้า (ตามที่คุณทำในตัวอย่าง) คุณจะชัดเจนกับคำสั่งนำเข้า นี่เป็นสิ่งสำคัญหากคุณต้องการที่จะสามารถแทนที่สไตล์ที่กำหนดไว้อย่างมั่นใจในไฟล์อื่นหรือเขียนมิกซ์อินในไฟล์เดียวและใช้ในอีกรูปแบบหนึ่ง

สำหรับการสนทนาที่ละเอียดยิ่งขึ้นให้ดูคำขอคุณลักษณะที่ปิดนี้ที่นี่:

ตรวจสอบโครงการเขื่อง-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";

และในไฟล์ระดับ dir ถัดไปคุณเพียงแค่ใช้การนำเข้าสำหรับไฟล์สิ่งที่นำเข้าไฟล์ทั้งหมดจาก dir นั้น:

พา ธ ไฟล์: main / main.scss

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

ด้วยวิธีนี้คุณมีไฟล์จำนวนเท่ากันเช่นคุณนำเข้า dir ทั้งหมด ระวังของการสั่งซื้อไฟล์ที่มาล่าสุดจะแทนที่กั้นการจับคู่

คุณอาจต้องการเก็บคำสั่งซื้อจากแหล่งที่มาจากนั้นคุณสามารถใช้สิ่งนี้

@import
  'foo',
  'bar';

ฉันชอบสิ่งนี้

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

ดูไม่เหมือนมัน

หากไฟล์ใดไฟล์หนึ่งเหล่านี้ต้องการไฟล์อื่น ๆ อยู่เสมอให้ทำการอิมพอร์ตไฟล์อื่นและนำเข้าไฟล์ระดับบนสุดเท่านั้น หากพวกเขาเป็นแบบสแตนด์อโลนทั้งหมดฉันคิดว่าคุณจะต้องทำมันต่อไปเหมือนตอนนี้

คำตอบที่ได้รับการยอมรับโดยเดนนิสเบสท์ระบุว่า "ไม่เช่นนั้นคำสั่งโหลดนั้นควรจะไม่เกี่ยวข้อง ... หากเรากำลังทำสิ่งต่าง ๆ อย่างถูกต้อง" สิ่งนี้ไม่ถูกต้อง หากคุณกำลังทำสิ่งต่าง ๆ อย่างถูกต้องคุณใช้ประโยชน์จากคำสั่ง 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 ของคุณควรลึกเกินไป

แม้ว่าฉันจะใช้วิธีการนี้ แต่ฉันก็ยังคิดว่าการนำเข้าแบบกลมควรอยู่ใน Sass สำหรับสถานการณ์ที่คำสั่งซื้อไม่สำคัญเช่นไดเรกทอรีของมิกซ์อินหรือภาพเคลื่อนไหว

ฉันยังค้นหาคำตอบสำหรับคำถามของคุณ สอดคล้องกับคำตอบการนำเข้าที่ถูกต้องทั้งหมดไม่มีฟังก์ชั่น

นั่นเป็นเหตุผลที่ฉันได้เขียนสคริปต์ไพ ธ อนซึ่งคุณต้องใส่ลงในรูทของโฟลเดอร์ scss ของคุณดังนี้:

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

จากนั้นจะเดินผ่านต้นไม้และค้นหาไฟล์ scss ทั้งหมด เมื่อดำเนินการแล้วมันจะสร้างไฟล์ scss ชื่อ main.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 ดังนั้นฉันอาจโพสต์การอัปเดต ตั้งแต่การอัปเดตของ Octobers'19 โดยทั่วไปเราควรใช้@useแทน@importแต่เป็นเพียงคำพูดเท่านั้น ทางออกสำหรับคำถามนี้คือการใช้ไฟล์ดัชนีเพื่อลดความซับซ้อนรวมทั้งโฟลเดอร์ทั้งหมด ตัวอย่างด้านล่าง

// 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 คุณสามารถหาได้ที่นี่