ใช้ Sass

SASS มีประสิทธิภาพและเสถียรกว่าซึ่งให้พลังกับภาษาพื้นฐานโดยใช้ส่วนขยายของ CSS คุณสามารถใช้ SASS ได้สามวิธี -

• เป็นเครื่องมือบรรทัดคำสั่ง
• เป็นโมดูล Ruby
• เป็นปลั๊กอินสำหรับกรอบการเปิดใช้งานแร็ค

หากคุณใช้ SASS บน windows คุณต้องติดตั้ง Rubyอันดับแรก. สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้ง Ruby โปรดดูบทการติดตั้ง SASS

ตารางต่อไปนี้แสดงคำสั่งซึ่งใช้สำหรับการเรียกใช้รหัส SASS -

ส. เลขที่	คำสั่งและคำอธิบาย
1	sass input.scss output.css ใช้เพื่อเรียกใช้รหัส SASS จากบรรทัดคำสั่ง
2	sass --watch input.scss:output.css จะแจ้งให้ SASS ดูไฟล์และอัปเดต CSS ทุกครั้งที่ไฟล์ SASS มีการเปลี่ยนแปลง
3	sass --watch app/sass:public/stylesheets ใช้เพื่อดูไดเร็กทอรีทั้งหมดหาก SASS มีไฟล์จำนวนมากในไดเร็กทอรี

ปลั๊กอิน Rack / Rails / Merb

Rackเป็นอินเทอร์เฟซของเว็บเซิร์ฟเวอร์ซึ่งใช้สำหรับการพัฒนาเว็บแอปพลิเคชันใน Ruby สำหรับข้อมูลเกี่ยวกับแร็คเพียงไปที่ลิงค์นี้

คุณสามารถเปิดใช้งาน SASS ในไฟล์ Rails 3 เวอร์ชันโดยใช้ไฟล์ environment.rb อยู่ภายใต้ไฟล์ configโฟลเดอร์ เปิดใช้งาน SASS สำหรับ Rails 3 โดยใช้รหัสต่อไปนี้ -

config.gem "sass"

คุณสามารถใช้บรรทัดต่อไปนี้กับ Gemfile สำหรับ Rails 3 (และเวอร์ชันที่สูงกว่า) ดังที่ -

gem "sass"

Railsเป็นเว็บเฟรมเวิร์กแบบโอเพนซอร์สที่ใช้มาตรฐานเว็บเช่น JSON, HTML, CSS และ JavaScript เพื่อแสดงส่วนติดต่อผู้ใช้ ในการทำงานกับ Rails คุณต้องมีความรู้พื้นฐานเกี่ยวกับ Ruby และการเขียนโปรแกรมเชิงวัตถุ เรียนรู้เพิ่มเติมเกี่ยวกับกรอบรางที่นี่

หากคุณต้องการเปิดใช้งาน SASS ใน Rack เพิ่มบรรทัดต่อไปนี้ในไฟล์ config.ru ซึ่งมีอยู่ในไดเรกทอรีรากของแอป -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbเป็นเฟรมเวิร์กแอปพลิเคชันบนเว็บซึ่งให้ความเร็วและความเป็นโมดูลแก่ Rails หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Merb เพียงเปิดลิงก์นี้

คุณสามารถเปิดใช้งาน SASS ในรูปแบบ Merb โดยเพิ่มบรรทัดต่อไปนี้ในไฟล์ config/dependencies.rb ไฟล์ -

dependency "merb-haml"

เก็บเอาไว้

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

ตัวเลือก

คุณสามารถตั้งค่าตัวเลือกในไฟล์environment.rbของไฟล์ Rails หรือconfig.ruของแอ็พพลิเคชัน Rack โดยใช้บรรทัดต่อไปนี้ -

Sass::Plugin.options[:style] = :compact

คุณยังสามารถตั้งค่าตัวเลือกในไฟล์init.rbของ Merb ได้โดยใช้บรรทัดต่อไปนี้ -

Merb::Plugin.config[:sass][:style] = :compact

มีตัวเลือกบางอย่างสำหรับSASSและSCSSตามที่อธิบายไว้ในตารางด้านล่าง -

ส. เลขที่	ตัวเลือกและคำอธิบาย
1	:style จะแสดงรูปแบบของผลลัพธ์
2	:syntax คุณสามารถใช้ไวยากรณ์เยื้องสำหรับเขื่องและ CSS ไวยากรณ์ส่วนขยายสำหรับSCSS
3	:property_syntax ใช้ไวยากรณ์เยื้องเพื่อใช้ประโยชน์จากคุณสมบัติ หากไม่ถูกต้องก็จะเกิดข้อผิดพลาด ตัวอย่างเช่นพิจารณา "background: # F5F5F5" ซึ่งพื้นหลังเป็นชื่อคุณสมบัติและ# F5F5F5คือค่าคุณสมบัติ คุณต้องใช้เครื่องหมายทวิภาคหลังชื่อคุณสมบัติ
4	:cache เพิ่มความเร็วในการรวบรวมไฟล์ SASS มันถูกตั้งค่าเป็นจริงตามค่าเริ่มต้น
5	:read_cache มันอ่านเฉพาะไฟล์ SASS หากไม่ได้ตั้งค่าแคชและread_cacheถูกตั้งค่าไว้
6	:cache_store มันสามารถนำมาใช้ในการจัดเก็บและเข้าถึงผลที่เก็บไว้โดยการตั้งค่าอินสแตนซ์ของSass :: CacheStores :: ฐาน
7	:never_update ไม่ควรอัปเดตไฟล์ CSS หากไฟล์เทมเพลตมีการเปลี่ยนแปลง โดยค่าเริ่มต้นจะถูกตั้งค่าเป็นเท็จ
8	:always_update ควรอัปเดตไฟล์ CSS ทุกครั้งที่ไฟล์เทมเพลตเปลี่ยนแปลง
9	:always_check ควรตรวจสอบการอัปเดตทุกครั้งที่เซิร์ฟเวอร์เริ่มทำงาน มันจะคอมไพล์ใหม่และเขียนทับไฟล์ CSS หากมีการอัปเดตในไฟล์เทมเพลต SASS
10	:poll ใช้แบ็กเอนด์การสำรวจสำหรับSass :: Plugin :: Compiler # watch (ซึ่งดูเทมเพลตและการอัปเดตไฟล์ CSS)โดยตั้งค่าเป็น true
11	:full_exception จะแสดงคำอธิบายข้อผิดพลาดทุกครั้งที่มีข้อยกเว้นเกิดขึ้นในรหัส SASS ภายในไฟล์ CSS ที่สร้างขึ้น จะแสดงหมายเลขบรรทัดที่เกิดข้อผิดพลาดพร้อมกับแหล่งที่มาในไฟล์ CSS
12	:template_location จัดเตรียมเส้นทางสำหรับไดเร็กทอรีเทมเพลตในแอ็พพลิเคชัน
13	:css_location จัดเตรียมเส้นทางสำหรับสไตล์ชีต CSS ในแอปพลิเคชัน
14	:unix_newlines มันมีบรรทัดใหม่สไตล์ Unix เมื่อเขียนไฟล์โดยตั้งค่าเป็น true
15	:filename เป็นชื่อของชื่อไฟล์ที่แสดงและใช้สำหรับรายงานข้อผิดพลาด
16	:line ระบุบรรทัดแรกของเทมเพลต SASS และแสดงหมายเลขบรรทัดสำหรับข้อผิดพลาด
17	:load_paths ใช้เพื่อโหลดพา ธ สำหรับเทมเพลต SASS ซึ่งรวมอยู่ใน@import directive
18	:filesystem_importer ใช้เพื่ออิมพอร์ตไฟล์จากระบบไฟล์ที่ใช้คลาสย่อยSass :: Importers :: Baseเพื่อจัดการพา ธ การโหลดสตริง
19	:sourcemap สร้างแผนที่แหล่งที่มาซึ่งสั่งให้เบราว์เซอร์ค้นหารูปแบบ SASS ใช้สามค่า - :auto- มี URI สัมพัทธ์ หากไม่มี URI สัมพัทธ์ให้ใช้ "file:" URI :file - ใช้ "ไฟล์:" URI ซึ่งทำงานในเครื่องไม่ใช่บนเซิร์ฟเวอร์ระยะไกล :inline - มีข้อความต้นฉบับในแผนที่ต้นทางซึ่งใช้ในการสร้างไฟล์แผนที่ต้นฉบับขนาดใหญ่
20	:line_numbers จะแสดงหมายเลขบรรทัดสำหรับข้อผิดพลาดที่รายงานในไฟล์ CSS โดยตั้งค่าเป็น true
21	:trace_selectors ช่วยในการติดตามตัวเลือกของการนำเข้าและมิกซ์อินเมื่อตั้งค่าเป็นจริง
22	:debug_info ให้ข้อมูลการดีบักของไฟล์ SASS โดยใช้หมายเลขบรรทัดและไฟล์เมื่อตั้งค่าเป็น true
23	:custom ทำให้ข้อมูลพร้อมใช้งานสำหรับฟังก์ชัน SASS ในแอปพลิเคชันแยกต่างหาก
24	:quiet ปิดใช้งานคำเตือนโดยตั้งค่าเป็นจริง

การเลือกไวยากรณ์

คุณสามารถกำหนดไวยากรณ์ที่คุณใช้ในเทมเพลต SASS ได้โดยใช้เครื่องมือบรรทัดคำสั่ง SASS โดยค่าเริ่มต้น SASS จะใช้ไวยากรณ์ที่เยื้องซึ่งเป็นทางเลือกสำหรับไวยากรณ์ SCSS ที่ใช้ CSS คุณสามารถใช้โปรแกรมบรรทัดคำสั่ง SCSS ซึ่งคล้ายกับโปรแกรม SASS แต่โดยค่าเริ่มต้นจะถือว่าไวยากรณ์เป็น SCSS

การเข้ารหัส

SASS ใช้การเข้ารหัสอักขระของสไตล์ชีตโดยระบุข้อกำหนด CSS ต่อไปนี้ -

• ขั้นแรกจะตรวจสอบ Unicode byte การประกาศ@charsetถัดไปและการเข้ารหัสสตริง Ruby

• ถัดไปถ้าไม่มีอะไรตั้งแล้วจะมีการพิจารณาการเข้ารหัส charset เป็นUTF-8

• กำหนดการเข้ารหัสอักขระอย่างชัดเจนโดยใช้การประกาศ@charset เพียงใช้ "@charset encoding name" ที่ส่วนเริ่มต้นของสไตล์ชีตและ SASS จะถือว่าเป็นการเข้ารหัสอักขระที่กำหนด

• หากไฟล์เอาต์พุตของ SASS มีอักขระที่ไม่ใช่ ASCII ไฟล์จะใช้การประกาศ@charset