การใช้งาน Sass เบื้องต้น

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
M030
PHP Super Hero Member
PHP Super Hero Member
Posts: 532
Joined: 07/09/2015 10:06 am

การใช้งาน Sass เบื้องต้น

Post by M030 » 10/09/2015 6:38 pm

Sass คืออะไร ?
SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS แต่จะมีฟังก์ชันใหม่ๆเพิ่มขึ้นมา ช่วยให้เขียนได้ง่ายขึ้นโดยหลังจากเขียนเสร็จแล้วก็ Compile เป็นไฟล์ CSS ปกติเพื่อเอาไปใช้งานจริงได้

การใช้งาน Sass เบื้อต้น
1. เริ่มจากใส่ตัวแปร อย่าลืมใส่ $ หน้าตัวแปรนะ

Code: Select all

$textcolor: #ffffff;
p {
color: $textcolor;
}
 
2. การใส่ Selector ซ้อน Selector
เราสามารถเขียน selector ซ้อนด้านใน selector อีกอันได้ แทนที่จะเขียน CSS

Code: Select all

p {
font-size: 10pt;
a {
font-size: 12pt;
}
}
3. การสร้างฟังก์ชั่น (Mixin)
การสร้าง Function ใน SASS จะเรียกว่า Mixinเป็นการรวม CSS หลาย ๆ บรรทัดไว้ใน Function เดียว เพื่อให้เรียกใช้ง่ายขึ้น

Code: Select all

@mixin title-text {
font-size: 20pt;
font-weight: bold;
font-family: Georgia, serif;
}
.heading { @include title-text; }
.title { @include title-text; }
4. การดึง property จาก selector อื่นๆ
ถ้ารามี selector ที่มี property ที่เราต้องการอยู่แล้ว อยากดึงมาใช้เลย ก็สามารถเขียนแบบนี้ใน SASS ได้เลย

Code: Select all

.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/

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests