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

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

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

ภาพประจำตัวสมาชิก
M030
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 532
ลงทะเบียนเมื่อ: 07/09/2015 10:06 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย M030 »

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

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

p {
font-size: 10pt;
a {
font-size: 12pt;
}
}
3. การสร้างฟังก์ชั่น (Mixin)
การสร้าง 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; }
4. การดึง property จาก selector อื่นๆ
ถ้ารามี 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/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 33