ความรู้เบื้องต้นเกี่ยวกับภาษา SASS

ในบทเรียนนี้ เราจะศึกษาเกี่ยวกับ CSS preprocessor ที่ชื่อว่า SASS SASS เป็นทางเลือกของ preprocessor LESS ซึ่ง อนุญาตให้เขียนโปรแกรมบน CSS ได้เช่นกัน

ในความเป็นจริงแล้ว SASS มีรูปแบบไวยากรณ์สองแบบ แบบแรกเรียกว่า SASS เช่นกัน และแบบที่สองเรียกว่า SCSS ทั้งสองแบบรองรับฟังก์ชันการทำงานชุดเดียวกันและ แตกต่างกันเพียงเล็กน้อยในเรื่องไวยากรณ์ อย่างไรก็ตาม เนื่องจาก SCSS เป็นรูปแบบที่ใหม่กว่าและใช้กันอย่างกว้างขวางกว่า ในบทเรียนนี้ เราจะศึกษาเกี่ยวกับมัน

ดังนั้น ไวยากรณ์ของ SCSS จึงคล้ายกับไวยากรณ์ของ CSS นั่นคือ เราจะเห็นวงเล็บปีกกา และเครื่องหมายอัญประกาศพร้อมเครื่องหมายจุลภาคเหมือนใน CSS ลองดูตัวอย่างไวยากรณ์ SCSS ซึ่งเรากำหนดตัวแปรให้กับฟอนต์ และสี จากนั้นกำหนดตัวแปรเหล่านี้ให้กับ คุณสมบัติในตัวเลือก body:

$font: Helvetica, sans-serif;
$color: #333;

body {
	font: $font;
	color: $color;
}