ใช้ไฟล์ SASS หลายไฟล์

ฉันต้องการแยกไฟล์ css ส่วนกลาง (ยักษ์) ของฉันออกเป็นหลายไฟล์ ฉันใช้เรื่องไร้สาระ มีวิธีง่ายๆ ที่จะดูหลายไฟล์ได้หรือไม่? ฉันคิดว่าฉันสามารถใช้ @import ได้ แต่แค่อยากทราบว่ามีวิธีอื่น (ดีกว่า) หรือไม่

ขอบคุณล่วงหน้า.


ruby-on-rails css sass
person Chris    schedule 06.04.2011    source แหล่งที่มา
comment
ดูไฟล์: sass --watch public/stylesheets/sass:public/stylesheets. ซึ่งจะตรวจสอบไฟล์ .scss ทั้งหมดใน public/stylesheets/sass และเขียนเป็น .css ถึง public/stylesheets/   -  person Zabba    schedule 07.04.2011
comment
ฉันคิดว่านี่เป็นทางออกที่ดีที่สุดจริงๆ เพราะช่วยให้สามารถแยกไฟล์ CSS ได้ ขอบคุณ   -  person Chris    schedule 07.04.2011

คำตอบ (2)


arrow_upward
16
arrow_downward

สิ่งที่ ริช แบรดชอว์ กล่าวถึงนั้นถูกต้อง อย่างไรก็ตาม นี่เป็นอีกแนวทางหนึ่งที่คุณสามารถทำได้

สร้างไฟล์ scss 1 ไฟล์ชื่อ combined.scss (ตัวอย่าง) จากนั้นภายในไฟล์นี้ @import ไฟล์ scss ทั้งหมดของคุณ จากนั้นเรียกใช้ sass --style compressed --watch combined.scss:combined.css จากนั้นมันจะตรวจจับการเปลี่ยนแปลงในไฟล์ scss ที่นำเข้าและคอมไพล์ใหม่ตามต้องการ

Combined.scss ตัวอย่าง:

@import "reset";
@import "layout";
@import "styles";
@import "ie";

ดังนั้นเมื่อคุณทำการเปลี่ยนแปลงไฟล์ layout.scss combined.scss จะถูกคอมไพล์ใหม่และหน้า html จริงทั้งหมดของคุณจะต้องอ้างอิงคือ combined.css

แต่อย่างที่บอกไป วิธีแก้ปัญหาของ Rich Bradshaw ก็ใช้ได้ผลเช่นกัน และอาจจะใช้งานได้ดีกว่าขึ้นอยู่กับโปรเจ็กต์ที่คุณกำลังทำอยู่

person Jannis    schedule 06.04.2011
comment
นั่นคือสิ่งที่ฉันกำลังมองหา ขอบคุณสำหรับความช่วยเหลือ - person Chris; 07.04.2011
comment
เยี่ยมมาก ดีใจที่ฉันสามารถช่วยได้ สิ่งเล็กๆ น้อยๆ อย่างหนึ่งที่ฉันลืมพูดถึงคือ @mixins จะใช้ได้กับไฟล์เท่านั้นหากคุณอ้างอิงถึงโดยตรง ดังนั้น หากคุณต้องการสร้างไฟล์แยกต่างหากสำหรับ mixins ของคุณโดยเฉพาะ ตรวจสอบให้แน่ใจว่าทุกไฟล์ที่ต้องการเข้าถึงไฟล์นั้นมี @import "mixin"; เป็นบรรทัดแรก (เช่น ใน layout.scss และใน styles.scss) - person Jannis; 10.04.2011
comment
หมายเหตุเพิ่มเติมประการหนึ่ง: เมื่อคุณนำหน้าสไตล์ชีทเพิ่มเติมด้วยเครื่องหมายขีดล่าง (เช่น _reset.scss) Sass จะไม่คอมไพล์ให้เป็น css หากคุณรวมพวกมันด้วย @import "reset.scss (สามารถเว้นขีดล่างไว้ที่นี่) ใน integrated.scss ของคุณ ระบบจะรวบรวมเฉพาะ integrated.scss เท่านั้น แม้ว่าไฟล์ scss ที่รวมไว้บางไฟล์จะมีการเปลี่ยนแปลงก็ตาม - person acme; 07.09.2011

arrow_upward
8
arrow_downward

ฉันใช้การนำเข้า จากนั้นไปที่ไดเร็กทอรีสื่อของฉัน ซึ่งรวมถึงไดเร็กทอรีชื่อ css พร้อมด้วย css ทั้งหมดของฉันและเรียกใช้ sass --style compressed --watch css:css ที่สร้างไฟล์ css หนึ่งไฟล์จากไฟล์ scss จำนวนมาก

เพื่อชี้แจงสิ่งนี้ หากคุณตั้งชื่อไฟล์ที่นำเข้าโดยขึ้นต้นด้วยขีดล่าง SASS จะไม่พยายามคอมไพล์ไฟล์เหล่านั้น

ดังนั้น หากคุณมีไฟล์ชื่อ style.scss ที่มีบรรทัดเหล่านี้

@import 'reset';
@import 'blog';

และบางไฟล์ชื่อ _reset.scss และ _blog.scss หมายความว่าเมื่อคุณรันคำสั่งด้านบน มันจะสร้างไฟล์หนึ่งชื่อ style.css ซึ่งมีไฟล์อื่นๆ ทั้งหมด ตัวแปรประกาศการทำงานที่สูงขึ้นเช่นกัน

person Rich Bradshaw    schedule 06.04.2011
comment
ขอบคุณสำหรับคำแนะนำเกี่ยวกับชื่อไฟล์ที่ขึ้นต้นด้วยขีดล่าง ฉันจำไม่ได้และนี่คือสิ่งที่ฉันกำลังมองหา! - person Pierre-Adrien; 14.10.2012
comment
สิ่งหนึ่งที่... ขีดล่างบอก Sass ว่าอย่าสร้างไฟล์ CSS เมื่อทำการคอมไพล์ ไม่ได้หมายความว่า เฮ้ เพิกเฉยต่อเนื้อหาของไฟล์นี้โดยสิ้นเชิง – @cimmanon ใน stackoverflow.com/questions/13323220/ - person luigi7up; 11.11.2013