เริ่มต้นด้วยการติดตั้ง 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 และสหายของเข็มทิศ คอยติดตาม.