SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS แต่จะมีฟังก์ชันใหม่ๆเพิ่มขึ้นมา ช่วยให้เขียนได้ง่ายขึ้นโดยหลังจากเขียนเสร็จแล้วก็ Compile เป็นไฟล์ CSS ปกติเพื่อเอาไปใช้งานจริงได้
การใช้งาน Sass เบื้อต้น
1. เริ่มจากใส่ตัวแปร อย่าลืมใส่ $ หน้าตัวแปรนะ
โค้ด: เลือกทั้งหมด
$textcolor: #ffffff;
p {
color: $textcolor;
}
เราสามารถเขียน selector ซ้อนด้านใน selector อีกอันได้ แทนที่จะเขียน CSS
โค้ด: เลือกทั้งหมด
p {
font-size: 10pt;
a {
font-size: 12pt;
}
}
การสร้าง Function ใน SASS จะเรียกว่า Mixinเป็นการรวม CSS หลาย ๆ บรรทัดไว้ใน Function เดียว เพื่อให้เรียกใช้ง่ายขึ้น
โค้ด: เลือกทั้งหมด
@mixin title-text {
font-size: 20pt;
font-weight: bold;
font-family: Georgia, serif;
}
.heading { @include title-text; }
.title { @include title-text; }
ถ้ารามี selector ที่มี property ที่เราต้องการอยู่แล้ว อยากดึงมาใช้เลย ก็สามารถเขียนแบบนี้ใน SASS ได้เลย
โค้ด: เลือกทั้งหมด
.button { width: 100px; height: 50px; }
.button-blue {
@extend .button;
background: blue;
}
Sass ดีกว่า Less css ยังไง
1. ดึงขนาดรูปได้อัตโนมัติ
2. ใส่ Reset CSS, Clearfix ในบรรทัดเดียว
3. เขียน CSS3 โดยใส่ Prefix ให้อัตโนมัติ
ดาวน์โหลดได้ที่ http://koala-app.com/