มูลนิธิ - ฟังก์ชั่น Sass

Foundation มีชุดฟังก์ชันยูทิลิตี้ SASS ซึ่งสามารถใช้ได้กับutil , color , selector , unit , valueและอื่น ๆ อีกมากมาย

คุณสามารถนำเข้าไฟล์ยูทิลิตี้ทั้งหมดได้พร้อมกันโดยใช้โค้ดบรรทัดต่อไปนี้ -

@import 'util/util';

คุณยังสามารถนำเข้าไฟล์ยูทิลิตี้แต่ละไฟล์ได้ตามที่แสดงด้านล่าง -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

การอ้างอิง Sass

คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ฟังก์ชัน SASS ต่อไปนี้

เบื้องหน้า

ให้สีพื้นหน้าให้กับองค์ประกอบตามสีพื้นหลัง ใช้รูปแบบต่อไปนี้ในการกำหนดพารามิเตอร์ประเภทต่างๆ -

foreground($color, $yes, $no, $threshold)

พารามิเตอร์ข้างต้นระบุไว้ในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color ตรวจสอบความสว่างของสี	สี	ไม่มี
2	$yes หากสีอ่อนแสดงว่าจะส่งคืนเป็นสี$ yes	สี	$ ดำ
3	$no หากสีเข้มแสดงว่าไม่มีสี	สี	สีขาว
4	$threshold แสดงถึงขีด จำกัด ของความสว่าง	เปอร์เซ็นต์	60%

สมาร์ทสเกล

ให้สีที่เหมาะสมสำหรับองค์ประกอบตามความสว่าง ใช้รูปแบบต่อไปนี้เพื่อระบุสีที่เหมาะสม -

smart-scale($color, $scale, $threshold)

พารามิเตอร์ที่กำหนดข้างต้นระบุไว้ในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color ใช้เพื่อปรับขนาดสี	สี	ไม่มี
2	$scale ระบุเปอร์เซ็นต์ที่จะปรับขนาดขึ้นหรือลง	เปอร์เซ็นต์	5%
3	$threshold แสดงถึงขีด จำกัด ของความสว่าง	เปอร์เซ็นต์	40%

อินพุตข้อความ

สร้างตัวเลือกในขณะที่ใช้ประเภทการป้อนข้อความ ใช้รูปแบบต่อไปนี้เพื่อระบุประเภทอินพุต -

text-inputs($types)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$types มีประเภทการป้อนข้อความจำนวนมากสำหรับการสร้างตัวเลือก	สี	-

แถบ - หน่วย

มันลบหน่วยออกจากค่าและส่งกลับเฉพาะตัวเลข ใช้รูปแบบต่อไปนี้สำหรับการลบหน่วยออกจากค่า -

strip-unit($num)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$num ระบุหมายเลขเมื่อคุณลบหน่วยออกจากค่า	สี	ไม่มี

rem-calc

มันเปลี่ยนค่าพิกเซลให้ตรงกับค่า rem ใช้รูปแบบต่อไปนี้สำหรับการแปลงค่าพิกเซลเป็นค่า rem -

rem-calc($values, $base)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$values จะแปลงค่าพิกเซลเป็นค่า rem และแยกโดยใช้ช่องว่าง หากคุณกำลังแปลงรายการที่คั่นด้วยจุลภาคให้ตัดรายการในวงเล็บ	หมายเลขหรือรายการ	ไม่มี
2	$base ให้ค่าพื้นฐานในขณะที่แปลงพิกเซลเป็นค่า rem หากมีค่า null สำหรับฐานฟังก์ชันจะใช้ตัวแปร$ base-font-sizeเป็นฐาน	จำนวน	โมฆะ

มีค่า

ระบุค่าหากไม่เป็นเท็จ ค่าเท็จประกอบด้วยค่าว่างไม่มี 0 หรือรายการว่าง ใช้รูปแบบต่อไปนี้เพื่อระบุค่า -

has-value($val)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val ตรวจสอบค่าที่ระบุ	ผสม	ไม่มี

รับด้าน

ระบุด้านข้างของค่าและกำหนดค่าบน / ขวา / ล่าง / ซ้ายบนช่องว่างระยะขอบ ฯลฯ โดยใช้รูปแบบต่อไปนี้เพื่อระบุด้านของค่า -

has-value($val)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val ระบุด้านข้างของค่า	รายการหรือหมายเลข	ไม่มี
2	$side กำหนดว่าด้านใดที่ค่า (บน / ขวา / ล่าง / ซ้าย) ควรกลับมา	คำสำคัญ	ไม่มี

รับชายแดนมูลค่า

กำหนดค่าเส้นขอบขององค์ประกอบ ใช้รูปแบบต่อไปนี้สำหรับการระบุค่าเส้นขอบ -

get-border-value($val, $elem)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val พบค่าเฉพาะของเส้นขอบ	รายการ	ไม่มี
2	$elem ใช้เพื่อแยกองค์ประกอบเส้นขอบ	คำสำคัญ	ไม่มี