โฮมเพจ » การเข้ารหัส » เริ่มต้นด้วยการติดตั้ง Sass และพื้นฐาน

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