สอนเขียน SASS แบบมือใหม่ ตอนที่ 3 – หัดเขียน SASS กับความสามารถต่าง ๆ

เอาหล่ะครับผ่านไปแล้วกับการเตรียมเครื่องไม้เครื่องมือในการเขียน SASS และการ compile SASS ไปเรียบร้อย ตอนนี้ก็คงต้องถึงเวลาในการเขียน SASS จริง ๆ แล้วนะครับ โดยเราจะมาดูครับว่าความสามารถอะไรที่น่าสนใจ และจะสามารถนำมาปรับใช้กับงานพัฒนาของเราได้อย่าง โดยความสามารถของ SASS ที่ผมจะนำมาเสนอมีดังนี้ครับ

  1. การใช้งานตัวแปร – Variable
  2. การสร้างลดความซับซ้อนด้วยลำดับขั้น – Nesting
  3. การทำงานร่วมกับไฟล์อื่น ๆ – Import
  4. การเขียนลักษณะฟังก์ชั่น – Mixin

ถ้าเพื่อน ๆ ศึกษาทั้ง 4 ข้อนี้แล้วเพื่อน ๆ จะสามารถเขียน CSS ที่ยุ่งยากวุ่นวายได้ง่ายขึ้นครับ อีกทั้งการบริหารจัดการ Source code นั้นจะเป็นระเบียบ ทำให้การพัฒนาเว็บไซต์ของเราเป็นไปได้อย่างรวดเร็วครับ ว่าแล้วเราก็ไปลุยเป็นข้อ ๆ เลยดีกว่าครับ

การใช้งานตัวแปร – Variable

ในการใช้งานตัวแปรนั้นก็เหมือนกับการเขียนโปรแกรมทั่ว ๆ ไปเลยครับ เราสามารถเก็บค่าสี เก็บค่าความกว้าง โดยค่าที่เราเก็บยังสามารถนำมาผ่านกระบวณการทางคณิตศาสต์ได้ด้วย เช่น การ บวก ลบ คูณ หาร เป็นต้นครับ เรื่องของตัวแปรนี้จะมีประโยชน์มาก เช่น ถ้าเรามีการกำหนดค่าสนของเว็บไซต์เป็นสีแดงแล้วเราต้องการเปลี่ยนเป็นสีเหลือง เราก็ทำได้ง่าย ๆ เพียงไปแก้ที่ตัวแปร ไม่จำเป็นต้องไปไล่แก้ CSS ทั้งหมดครับ วิธีการเขียนตัวแปรก็ง่ายมากเลยครับ เราจะเริ่มต้นด้วยเครื่อง $ แล้วตามด้วยชื่อตัวแปรครับ

การเขียนแบบ .sass

$primary-color : #ff7f0d
$sidebar-width: 320px


h1
	color : $primary-color

.sidebar-box
	width : $sidebar-width
	height: auto

การเขียนแบบ .scss

$primary-color : #ff7f0d
$sidebar-width: 320px


h1{
	color : $primary-color
}

.sidebar-box{
	width : $sidebar-width
	height: auto
}

สังเกตุนะครับว่าไม่จำเป็นต้องมีเครื่องหมาย ; หรือถ้าเพื่อน ๆ อยากจะใส่เข้าไปก็ได้ครับ เพราะ SASS ดูจากการขึ้นบรรทัดใหม่นั้นเองครับ ผมว่าเพื่อน ๆ คงเห็นความแตกต่างของ .sass และ .scss แล้วนะครับ ต่อไปผมจะเขียนตัวอย่างแค่ .sass นะครับ

การสร้างลดความซับซ้อนด้วยลำดับขั้น – Nesting

หลังจากที่เราลองเขียนการใช้งานแบบ Variable ไปแล้ว เพื่อน ๆ คงจะสังเกตุได้แล้วว่าในการเขียน .sass นั้นจะมองเรื่องของการ Indent เป็นหลักนะครับ ซึ่งบรรทัดไหนที่มีการ Indent มากกว่าจะเป็นข้อมูลย่อยของตัวที่ Indent น้อยกว่าครับ

$primary-color : #ff7f0d
$sidebar-width: 320px

.container
	padding: 0px
	margin: 0px

	h1
		color : $primary-color

	.sidebar-box
		width : $sidebar-width
		height: auto
		
		.title
			color: #dedede

และสำหรับ .scss นั้นจะใช้การเปิด/ปิด ปีกกาเข้ามาช่วยครับ เหมือนกับการเขียน css ทั่ว ๆ ไปเลยครับ เพียงแต่มันจะมีความพิเศษก็คือ เราสามารถใส่ตัวย่อยเท่าไปเท่าไหร่ก็ได้ครับ

$primary-color : #ff7f0d
$sidebar-width: 320px

.container{
	padding: 0px
	margin: 0px

	h1{
		color : $primary-color
	}

	.sidebar-box{
		width : $sidebar-width
		height: auto
		
		.title{
			color: #dedede
		}
	}
}

เพื่อน ๆ ก็ลองเลือกกันดูนะครับว่าจะเขียน .sass หรือ .scss ครับ แต่ว่าถ้าเลือกแบบไหนแล้วก็ต้องเขียนแบบนั้นทั้ง project นะครับ ผมจำได้ว่าเหมือนจะเขียน .sass สลับกับ .scss ไม่ได้ครับ

การทำงานร่วมกับไฟล์อื่น ๆ – Import

ในการทำงานที่มีขนาดใหญ่ ๆ การแยกไฟล์เป็นวิธีหนึ่งในการจัดการโครงสร้างของโครงการ ซึ่ง SASS เองได้มีการอำนวยความสะดวกในส่วนนี้เช่นกัน โดยเราสามารถแยกไฟล์ไว้ตาม Folder ต่าง ๆ แล้วค่อย Import มาใช้ได้ เช่น

unit/_all.sass
unit/_font.sass
unit/_variable.sass
style.sass

จากตัวอย่างผมจะให้ไฟล์ style.sass เป็นไฟล์หลัก เราก็สามารถ import ไฟล์ _all.sass เข้ามา แล้วให้ไฟล์ _all.sass import ตัว _font.sass และ _variable.sass อีกทีก็ได้ครับ สังเกตุนะครับว่าไฟล์ไหนที่เราจะให้ถูก import จะขึ้นต้นด้วย _ เพราะ SASS จะเข้าใจได้ทันทีว่าเป็นไฟล์ที่ใช้ในการ Import ครับ

@import 'css/all'

ตัวอย่างการ import เข้ามาที่ style.sass เพียงแค่บรรทัดเดียวเองครับ และเราไม่จำเป็นต้องใส่เครื่อง _ นำหน้าชื่อไฟล์นะครับ เพราะ SASS เค้ารู้ได้เองครับ และหลังจากเรา import แล้วเราก็สามารถเขียนส่วนอื่น ๆ ต่อไปได้เลยครับ เห็นไหมครับว่าการจัดการไฟล์ผ่าน SASS นั้นง่ายมาก ทำให้โครงสร้างงานของเราดูเป็นระบบระเบียบขึ้นมาก ทีนี้ก็อยู่ที่การเรียกใช้ของเพื่อน ๆ แล้วหล่ะครับว่าจะทำได้ดีแค่ไหน

การเขียนลักษณะฟังก์ชั่น – Mixin

การเขียนในแบบของฟังก์ชั่น หรือ Mixin นั้นอาจจะยากสักหน่อยสำหรับสายออกแบบ เพราะการเขียนจะคล้าย ๆ กับการเขียน function ในโปรแกรมต่าง ๆ เลยครับ โดยเหมาะกับการนำมาใช้กับส่วนที่มีการเขียนบ่อย ๆ เช่น การเขียน Media queries ที่ต้องระบุของของหน้าจอขนาดน้อยกว่า 768px เราจะเขียนว่า @media (min-width: 768px) เห็นไหมครับว่าเขียนยาวมาก ๆ และเราต้องเขียนบ่อย ๆ มากครับ ดังนั้นการทำอะไรที่เรียกบ่อย ๆ เราจะใช้ Mixin ครับ

//ตัวอย่างการเขียน mixin
$tablet-min-width : 768px

@mixin tablet
	@media (min-width: #{$tablet-min-width})
		@content



//ตัวอย่างการเรียกใช้ mixin

body
	background-color: #000

	@include tablet
		background-color: #dedede

ตรงนี้เพื่อน ๆ ต้องทำความเข้าใจสักหน่อยนะครับชื่อ mixin เรากำหนดได้โดยการพิมพ์ชื่อหลังจาก @mixin เวลาเรานำไปใช้เราก็พิมพ์ชื่อ tablet ได้เลยครับ ในส่วนของ @content คือการนำเอาข้อมูลย่อยบริเวณที่เรียกใช้ Mixin มาแสดงครับ อาจจะยากซักหน่อยครับแต่ถ้าใช้เป็นจะช่วยเราได้มากครับ ยิ่งถ้าเราทำเว็บไซต์แบบ Responsive รับรองได้ใช้งานแน่ ๆ ครับ

บทความนี้เป็นบทความสุดท้ายในเรื่องการพัฒนา CSS ด้วยการใช้ SASS นะครับ อย่างไรหากมีข้อสงสัยสามารถแสดงความคิดเห็นทิ้งไว้ได้เลยครับ สำหรับใครที่เห็นว่าผมใส่เนื้อหาผิดตรงไหนก็แจ้งผมได้เช่นกันนะครับ สวัสดีชาวนักพัฒนาเว็บไซต์