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

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

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

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

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

โพสต์โดย M030 » 10/09/2015 6:38 pm

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

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

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


$textcolor
: #ffffff;
{
color: $textcolor;
}
 


2. การใส่ Selector ซ้อน Selector
เราสามารถเขียน selector ซ้อนด้านใน selector อีกอันได้ แทนที่จะเขียน CSS

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


{
font-size: 10pt;
{
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/

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน