มูลนิธิ - Sass Mixins

กำลังนำเข้า

นำเข้าเนื้อหาของ mixins SASS ซึ่งจะอยู่ภายใต้การSCSS / util / _mixins.scssไฟล์ คุณสามารถนำเข้ามิกซ์อิน SASS ได้โดยใช้โค้ดบรรทัดต่อไปนี้ -

@import 'util/mixins';

การอ้างอิง Sass

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

มิกซ์

คุณสามารถใช้มิกซ์อินต่อไปนี้เพื่อสร้างโครงสร้างคลาส CSS สำหรับคอมโพเนนต์ของคุณ

CSS-TRIANGLE

ใช้สำหรับสร้างลูกศรแบบเลื่อนลงจุดแบบหล่นลงและอื่น ๆ อีกมากมาย ใช้ตัวเลือก <i> & :: before </i> หรือ <i> & :: after </i> สำหรับการติดสามเหลี่ยมเข้ากับองค์ประกอบที่มีอยู่ ใช้รูปแบบต่อไปนี้ -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

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

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$triangle-size เป็นการกำหนดความกว้างของสามเหลี่ยม	จำนวน	ไม่มี
2	$triangle-color เป็นการกำหนดสีของสามเหลี่ยม	สี	ไม่มี
3	$triangle-direction เป็นการกำหนดทิศทางของรูปสามเหลี่ยมเช่นขึ้นขวาลงหรือซ้าย	คำสำคัญ	ไม่มี

HAMBURGER

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

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

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

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color กำหนดสีสำหรับไอคอน	สี	ไม่มี
2	$color-hover จะกำหนดสีเมื่อคุณวางเมาส์บนไอคอน	สี	ไม่มี
3	$width เป็นการกำหนดความกว้างของไอคอน	จำนวน	ไม่มี
4	$height เป็นการกำหนดความสูงของไอคอน	จำนวน	ไม่มี
5	$weight เป็นการกำหนดน้ำหนักของแต่ละแท่งในไอคอน	จำนวน	ไม่มี
6	$bars จะกำหนดจำนวนแถบในไอคอน	จำนวน	ไม่มี

BACKGROUND-TRIANGLE

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

@include background-triangle($color);

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

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color เป็นการกำหนดสีสำหรับสามเหลี่ยม	สี	$ ดำ

CLEARFIX

มิกซ์อินนี้จะล้างองค์ประกอบลูกโดยอัตโนมัติเพื่อไม่ต้องมีมาร์กอัปเพิ่มเติม ใช้รูปแบบต่อไปนี้ -

@include clearfix;

AUTO-WIDTH

โดยจะปรับขนาดองค์ประกอบโดยอัตโนมัติตามจำนวนองค์ประกอบที่มีอยู่ในคอนเทนเนอร์ ใช้รูปแบบต่อไปนี้ -

@include auto-width($max, $elem);

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

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$max ระบุจำนวนรายการสูงสุดในคอนเทนเนอร์	จำนวน	ไม่มี
2	$elem ใช้แท็กสำหรับตัวเลือกพี่น้อง	คำสำคัญ	ลี้

DISABLE-MOUSE-OUTLINE

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

@include disable-mouse-outline;

ELEMENT-INVISIBLE

ใช้เพื่อซ่อนองค์ประกอบและสามารถใช้ได้กับคีย์บอร์ดและอุปกรณ์อื่น ๆ ใช้รูปแบบต่อไปนี้ -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

ใช้เพื่อลบองค์ประกอบที่มองไม่เห็นและย้อนกลับเอาต์พุต CSS โดยใช้องค์ประกอบที่มองไม่เห็น () mixin ใช้รูปแบบต่อไปนี้ -

@include element-invisible-off;

VERTICAL-CENTER

ใช้เพื่อวางองค์ประกอบในแนวตั้งเป็นศูนย์กลางภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include vertical-center;

HORIZONTAL-CENTER

ใช้เพื่อวางองค์ประกอบในแนวนอนเป็นศูนย์กลางภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include horizontal-center;

ABSOLUTE-CENTER

ใช้เพื่อวางองค์ประกอบที่อยู่กึ่งกลางอย่างแน่นอนภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include absolute-center;