ใช้ 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