เริ่มต้นด้วยการติดตั้ง Sass และพื้นฐาน

ในบทความนี้เราจะพูดถึง CSS Preprocessor ชื่อ Sass หรือ สไตล์ชีตที่น่ากลัว.

หากคุณติดตามโพสต์ก่อนหน้านี้ของเราใน LESS เรามั่นใจว่าคุณคุ้นเคยกับ ตัวประมวลผลล่วงหน้า CSS. ทั้ง Sass และ LESS เป็นตัวประมวลผลล่วงหน้าของ CSS ซึ่งส่วนใหญ่ขยายวิธีที่เราเขียนแบบสแตติก - CSS แบบไดนามิกมากขึ้นโดยใช้ภาษาการเขียนโปรแกรมเช่นตัวแปร, มิกซ์, และฟังก์ชั่น.

การติดตั้ง Sass

ก่อนที่เราจะสามารถเขียน Sass เราจำเป็นต้องติดตั้ง. Sass สร้างจากทับทิม. หากคุณกำลังทำงานกับ Mac มีโอกาสคุณได้ติดตั้ง Ruby แล้ว หากคุณอาจติดตั้ง Ruby ใน Windows ให้ใช้ Ruby Installer นี้.

หลังจากการติดตั้งเสร็จสมบูรณ์คุณสามารถไปที่ Terminal (บน Mac) หรือใน Command Prompt (บน Windows) จากนั้นพิมพ์บรรทัดคำสั่งต่อไปนี้ลงไป:

บน Mac;

 sudo gem ติดตั้ง sass

บน Windows;

 ติดตั้งอัญมณี sass

หากการติดตั้งสำเร็จคุณจะได้รับการแจ้งเตือนต่อไปนี้ใน Terminal / Command Prompt.

ต่อไปเราต้องเลือกไดเรกทอรีที่ Sass จะดูโดยใช้คำสั่งต่อไปนี้

 sass - ดูเส้นทาง / sass-directory

บรรทัดคำสั่งด้านบนจะรับชมทุก ๆ .SCSS/.เขื่อง ไฟล์ใน เส้นทาง / ไดเรกทอรี และเมื่อใดก็ตามที่ไฟล์ใดไฟล์หนึ่งในไดเรกทอรีนั้นมีการเปลี่ยนแปลง Sass จะอัปเดตไฟล์ที่เกี่ยวข้องหรือสร้างไฟล์ถ้าไม่มี.

ถ้าเราต้องการ Sass เพื่อสร้างไฟล์ในไดเรกทอรีเฉพาะเราสามารถทำได้ด้วยวิธีนี้

 sass - ดูเส้นทาง / sass-directory: path / css-directory

นอกจากนี้เรายังสามารถดูไฟล์ที่เฉพาะเจาะจงมากกว่าไดเรกทอรีด้วยบรรทัดคำสั่งนี้

 sass - ดูเส้นทาง / sass-directory / styles.css

หากคำสั่ง watch ประสบความสำเร็จบางอย่างเช่นการแจ้งเตือนด้านล่างนี้จะปรากฏขึ้นใน Terminal Prompt ของคุณ.

อ่านเพิ่มเติม: รวบรวมไฟล์ Sass อัตโนมัติด้วย Sass 3

แอปพลิเคชัน Sass

อย่างไรก็ตามหากคุณเกลียดการทำงานผ่าน Terminal หรือ Command Prompt คุณสามารถใช้แอพพลิเคชั่นบางตัวสำหรับ Sass ตัวเลือกฟรีคือ Scout; มันถูกสร้างขึ้นบน Adobe Air เพื่อให้สามารถทำงานได้บนทุก OS (Windows, OSX และ Linux).

อย่างไรก็ตามมันทำงานช้ามากตามที่บางคนรายงานไปก่อนหน้านี้.

ดังนั้นหากคุณไม่มีความอดทนมันก็มีตัวเลือกการจ่ายเงิน ราคาจะแตกต่างกันไปสำหรับแต่ละแอป Compass.app จะมีราคา $ 10, Fire.app, $ 14 และ Codekit ราคา $ 25.

การเน้นรหัส

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

หากคุณทำงานกับ Sublime Text 2 อย่างที่ฉันทำคุณสามารถใช้แพ็คเกจเหล่านี้ได้ Sublime Text HAML & Sass และ Sublime Text 2 Sass Package และสำหรับวิธีที่ง่ายกว่าคุณสามารถติดตั้งหนึ่งในแพ็คเกจเหล่านี้ผ่านการควบคุมแพ็คเกจ.

สำหรับเครื่องมือแก้ไขรหัสอื่น ๆ ดูด้านล่างหรือลองใช้ Google กับมัน.

อันนี้เป็นแบบฝึกหัด screencast ที่ยอดเยี่ยมเกี่ยวกับการทำงานกับ Sass กับ Dreamweaver
โหมด Sass สำหรับ Coda แต่ดูเหมือนว่าโหมดนี้จะรวมเข้ากับ Coda ตั้งแต่รุ่น 2
TextMate Bundle SCSS อย่างเป็นทางการ
เอสเพรสโซ่น้ำตาลสำหรับ Sass
รวมกลุ่ม InType

ภาษา Sass

Sass และ LESS แบ่งปันภาษาทั่วไปบางภาษาด้านล่างนี้เป็นบางภาษา.

ตัวแปร

 $ color-base: # 000; $ width: 100px;

ข้อแตกต่างจากตัวแปร LESS เพียงอย่างเดียวคือตัวแปรใน Sass ถูกกำหนดด้วย $ สัญญาณ.

กฎการทำรัง

 ส่วนหัว กว้าง: 980px; ความสูง: 80px; nav ul list-style: none; padding: ไม่มี; กำไร: ไม่มี;  li display: inline; a ตกแต่งข้อความ: ไม่มี;

มิกซ์และฟังก์ชั่น

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; รัศมีของเส้นขอบ: $ รัศมี

การดำเนินงาน

 li width: $ width / 5 - 10px;

คำสั่งแบบมีเงื่อนไข

 @ หากความสว่าง ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

ในน้อยคุณอาจทำสิ่งที่คล้ายกันผ่านการแสดงออกของยามซึ่งเราได้กล่าวถึงในการกวดวิชานี้.

ความคิดสุดท้าย

และนั่นคือมัน ในโพสต์ถัดไปเราจะเริ่มสำรวจภาษา Sass และสหายของเข็มทิศ คอยติดตาม.