มูลนิธิ - 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;