Sass Mixins: เก็บสไตล์ชีตของคุณให้แห้ง

ข้อดีอย่างหนึ่งที่ฉันโปรดปรานจากการใช้ Sass คือทำให้เวิร์กโฟลว์การออกแบบฟรอนต์เอนด์อัตโนมัติเป็นเรื่องง่าย มีเครื่องมือ JavaScript มากมายสำหรับการทำงานกับไฟล์และทำให้งานอื่นๆ เป็นอัตโนมัติ แต่ความสามารถมิกซ์อินในตัวของ Sass ช่วยให้สามารถเขียนโค้ดรูปแบบส่วนหน้าแบบแยกส่วนได้ ในบทความนี้ ฉันได้ระบุรายการมิกซ์อิน Sass ที่ฉันชื่นชอบสิบรายการสำหรับการเขียนสไตล์เว็บโดยอัตโนมัติ

เหล่านี้คือมิกซ์อิน Sass ที่ฉันใช้กับทุกโปรเจ็กต์เว็บที่ฉันทำงาน มีบทความที่น่าสนใจมากมายพร้อมมิกซ์อิน Sass ที่มีประโยชน์มากมายทั่วทั้งเว็บ นอกจากนี้ยังมีไลบรารี่ Sass mixin ที่ดีสองสามตัวที่เหมาะสำหรับงานขนาดเล็ก เช่น Bourbon ไลบรารีมิกซ์อินที่ยอดเยี่ยมอีกอันหนึ่งที่ฉันได้รับจากมิกซ์อินด้านล่างคือ Andy

ส่วนผสมที่ฉันจะพูดถึงในบทความนี้เกี่ยวข้องกับสิ่งต่อไปนี้:

• คำถามสื่อ
• ธีมสี
• องค์ประกอบที่อยู่ตรงกลาง
• Clearfix
• ขนาดตัวอักษรที่สอดคล้องกัน
• การเปลี่ยนภาพเคลื่อนไหว
• ภาพเรตินา
• การไล่ระดับสีอย่างรวดเร็ว
• แบบอักษรภายนอก
• ช่องว่างภายใน/ระยะขอบอย่างรวดเร็ว

แบบสอบถามสื่อ

คิวรี่สื่อช่วยให้คุณเพิ่มเบรกพอยต์ที่กำหนดเองลงในสไตล์ชีตของคุณ และเพิ่มพฤติกรรมตอบสนองแบบกำหนดเองได้อย่างรวดเร็วภายในองค์ประกอบสำหรับเบรกพอยต์ที่แตกต่างกัน อย่างไรก็ตาม ข้อสงสัยเกี่ยวกับสื่อสไตล์ชีตที่ทิ้งขยะอาจเป็นสาเหตุของอาการปวดหัวได้อย่างรวดเร็ว โดยเฉพาะอย่างยิ่งเมื่อต้องดูแลปัญหาดังกล่าว ด้วยส่วนผสมของ Sass ทุกสิ่งที่สามารถเปลี่ยนแปลงได้

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

ด้วยการกำหนดเหล่านี้ มิกซ์อินสามารถใช้ดังนี้:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

มันใช้งานได้ดีแบบสแตนด์อโลน หรือกับกริดเฟรมเวิร์กอื่นๆ เช่น Bootstrap

คำสั่ง if จะปล่อยคิวรี่สื่อที่ปรับให้เข้ากับขนาดหน้าจอเฉพาะ ขึ้นอยู่กับชื่อขนาดที่ให้ไว้กับมิกซ์อิน ซึ่งจะทำให้คุณสามารถปรับเปลี่ยนพฤติกรรมของแอตทริบิวต์ CSS ของคุณได้อย่างง่ายดาย คุณยังปรับแต่งจุดที่คุณต้องการปรับแอตทริบิวต์ CSS ได้อีกด้วย โดยปกติ เลย์เอาต์ที่ตอบสนองได้ดีที่สุดจะใช้ขนาดความกว้างหน้าจอที่กำหนดไว้ 3 หรือ 4 ขนาดเพื่อปรับเนื้อหา ความแปรปรวนของขนาดหน้าจอ อุปกรณ์ และแอปพลิเคชันมีการขยายตัวอยู่เสมอ แต่มีแนวโน้มที่นิยมนักพัฒนาเว็บจำนวนมากจะใช้สำหรับเลย์เอาต์ของตน ขนาดหน้าจอเล็กสำหรับโทรศัพท์ กลางสำหรับแท็บเล็ต ใหญ่สำหรับแล็ปท็อป และใหญ่พิเศษสำหรับคอมพิวเตอร์เดสก์ท็อป

สำหรับการอ้างอิง จุดสื่อที่ใช้ใน Bootstrap v3 คือ:

• ความกว้างสูงสุด: 767px (หน้าจอใดก็ได้ที่มีความกว้างสูงสุด 767px)
• ความกว้างขั้นต่ำ: 768px (หน้าจอใดๆ ที่มีความกว้างมากกว่า 768px)
• ความกว้างขั้นต่ำ: 992px (หน้าจอใดๆ ที่มีความกว้างมากกว่า 992px)
• ความกว้างขั้นต่ำ: 1200px (หน้าจอใดๆ ที่มีความกว้างมากกว่า 1200px)

ธีมสี

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

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

เมื่อคุณตั้งค่าธีมสีในเชิงลึก คุณจะกำจัดสไตล์ที่เกี่ยวข้องกับสีออก 70% หากทำถูกต้อง ฉันยังแนะนำให้แยกไฟล์ .scss นี้ออกจากไฟล์ .scss อื่นๆ ของคุณและรวมตัวแปรสีแบรนด์ทั้งหมดไว้ในไฟล์เดียวกัน

บรรทัดง่าย ๆ เช่น:

 @include theme(theme-banana, yellow);

จะปล่อย:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

ศูนย์องค์ประกอบ

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

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

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

Clearfix

ใช้คุณสมบัติ clearfix css กับองค์ประกอบอย่างรวดเร็วและมีประสิทธิภาพ มีโซลูชัน clearfix มากมายในเว็บ และดูเหมือนว่าวิธีนี้จะได้ผลดีที่สุด นอกจากนี้ยังใช้งานง่ายเมื่อสร้างมิกซ์อิน Sass แล้ว

มิกซ์อินนี้จะเป็นประโยชน์เมื่อใดก็ตามที่คุณมีเนื้อหาลอยไปทางขวาหรือซ้าย และต้องการล้างพื้นที่ด้านล่างองค์ประกอบแบบลอยเพื่อแทรกเนื้อหาใหม่ด้านล่าง

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

ขนาดตัวอักษรที่สอดคล้องกัน

กำหนดขนาดฟอนต์ rem ในเอกสารของคุณเพื่อใช้กับองค์ประกอบข้อความทั้งหมดของคุณ นี่เป็นวิธีที่ดีกว่าในการขยายขนาดฟอนต์ขึ้นและลงแทน em การใช้ em จะรวมตามแอตทริบิวต์ CSS อื่นๆ แต่ rem จะขยายขนาดขึ้นหรือลงตามขนาดที่คุณกำหนดในเอกสาร HTML เท่านั้น การแยกไฟล์ .scss สำหรับการพิมพ์ทั้งหมดของคุณ และการใช้มิกซ์อินด้านล่างเพื่อกำหนดขนาดฟอนต์เริ่มต้นของคุณจะทำให้เวิร์กโฟลว์การเขียนโค้ดการพิมพ์ของคุณเป็นไปโดยอัตโนมัติอย่างมาก

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

มิกซ์อินนี้ยังสร้างพิกเซลสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ rem (IE8 และต่ำกว่า) เมื่อเบราว์เซอร์ไม่รองรับการปรับขนาด rem มิกซ์อินจะคำนวณพิกเซลที่เทียบเท่ากับขนาด rem เริ่มต้นที่คุณตั้งค่าและส่งออกทั้งค่าพิกเซลและค่า rem สำหรับองค์ประกอบ

แอนิเมชั่น

กำหนดคุณสมบัติของแอนิเมชั่นอย่างรวดเร็วและเพิ่มลงในองค์ประกอบของคุณ ในปัจจุบัน คุณสมบัติ CSS ของแอนิเมชันยังคงต้องการคำนำหน้าผู้ขาย ดังนั้นจึงจะเพิ่มคุณสมบัตินั้นลงในมิกซ์ด้วย

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

ส่วนแรกของมิกซ์อินจะเพิ่มคำนำหน้าผู้จำหน่ายที่เหมาะสมซึ่งจำเป็นสำหรับความเข้ากันได้ของเบราว์เซอร์ ส่วนถัดไปตั้งค่าให้ป้อนสตริงและคุณสมบัติที่กำหนดเองของคุณ ส่วนสุดท้ายของมิกซ์อินคือที่ที่คุณจะสร้างชื่อมิกซ์อินของคุณ (ในกรณีนี้: เฟดเอาต์) และกำหนดสิ่งที่คุณต้องการให้เกิดขึ้นในแต่ละคีย์เฟรมในแอนิเมชั่น ตัวอย่างการตั้งค่านี้เป็นพื้นฐานอย่างมาก และคุณสามารถเพิ่มการเปลี่ยนแปลงในเปอร์เซ็นต์ของระยะเวลาของภาพเคลื่อนไหวได้

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

ตัวอย่างที่นี่จะใช้องค์ประกอบเป้าหมายที่ 0% ของภาพเคลื่อนไหว (เริ่มต้น) และเปลี่ยนคุณสมบัติจากความทึบเต็ม (ความทึบ: 1;) เป็นไม่มีความทึบและหายไปโดยพื้นฐานแล้ว (ความทึบ: 0;) ที่ 90% ของภาพเคลื่อนไหว . ดังนั้น หากฉันตั้งค่าแอนิเมชั่นให้มีไทม์ไลน์ 5 วินาที องค์ประกอบจะหายไปหลังจาก 4.5 วินาที (90% ของแอนิเมชั่น 5 วินาที) คุณสมบัติสุดท้ายที่ฉันกำหนดในการใช้มิกซ์อิน (“3”) คือจำนวนครั้งที่แอนิเมชั่นจะทำซ้ำ

รูปภาพเรตินา

เพิ่มรูปภาพที่มีความละเอียดสูงลงในไซต์ของคุณ โดยมีทางเลือกสำรองสำหรับอุปกรณ์ที่ไม่แสดงรูปภาพที่มีความละเอียดสูง เมื่อใช้ภาพเรตินา ผมขอแนะนำให้บีบอัดให้มากที่สุดโดยไม่ทำลายภาพ เครื่องมือที่ดีสำหรับสิ่งนี้คือ TinyPNG (รองรับ PNG และ JPG)

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

มิกซ์อินนี้จะช่วยให้คุณเพิ่มกฎในตำแหน่งเดียวกับคุณสมบัติ CSS ที่กำหนดรูปภาพต้นฉบับ

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

ก่อนหน้านี้ โซลูชัน CSS เดียวสำหรับสิ่งนี้คือใช้การสืบค้นสื่อ และโซลูชันนี้สะอาดกว่าและง่ายกว่ามาก สำหรับความคิดและแนวคิดเพิ่มเติมเกี่ยวกับมิกซ์อินนี้ โปรดดูบทความนี้

การไล่ระดับสีอย่างรวดเร็ว

เพิ่มการไล่ระดับสีที่กำหนดเฉพาะสีเริ่มต้น สีสิ้นสุด และประเภทการไล่ระดับสีได้อย่างง่ายดาย เพิ่มคุณสมบัติการไล่ระดับสีทั้งหมด และคุณสามารถเลือกได้ตามต้องการ ประเภทการไล่ระดับสีช่วยให้คุณเลือกจากการไล่ระดับสีในแนวตั้ง การไล่ระดับสีในแนวนอน หรือการไล่ระดับสีแบบรัศมี (รูปทรงกลม)

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

คุณจะไม่ต้องจำคำนำหน้าผู้ขายและคำสั่งพารามิเตอร์ต่างๆ สำหรับการใช้การไล่ระดับสีอีกต่อไป

 .foo { @include background-gradient(red, black, 'vertical'); }

แบบอักษรภายนอก

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

เพียงใส่ไฟล์ฟอนต์ในไดเร็กทอรี และเพิ่มแท็ก “@include” ในรูปแบบของคุณ ซึ่งจะดึงไฟล์ทั้งหมดจากโฟลเดอร์ที่คุณเลือก

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

มิกซ์อินนี้จะดูแลการกำหนด URL รูปแบบฟอนต์อื่น รวมถึงวิธีแก้ไขปัญหาเฉพาะหน้าซึ่งจำเป็นสำหรับความเข้ากันได้แบบย้อนหลัง

Quick Padding & Margins

เหตุผลหลักที่ฉันใช้สิ่งนี้เพราะฉันจะละเว้นคุณสมบัติช่องว่างภายใน เช่น บางครั้งการเว้นช่องว่าง และฉันไม่ต้องการกำหนดมัน เมื่อใช้คุณสมบัติ Sass null คุณสามารถละเว้นคุณสมบัติการเติมได้ กฎเดียวกันนี้ใช้กับระยะขอบ

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

การผสมสามารถใช้เพื่อแทนที่คุณสมบัติ padding-* และ margin-* จำนวนมากทั่วทั้งสไตล์ชีตของคุณ คุณสามารถรวมมิกซ์อินนี้ในองค์ประกอบใดๆ ได้อย่างรวดเร็ว และกำหนดเฉพาะด้านข้างของช่องว่างภายใน/ระยะขอบที่คุณต้องการรวมไว้ ช่องว่างภายในและระยะขอบเป็นหนึ่งในรูปแบบ CSS ที่ใช้บ่อยที่สุดที่เพิ่มไปยังองค์ประกอบ และประหยัดเวลาเพียงเล็กน้อยในลักษณะนี้

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

สรุป

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

การติดตั้งและการทำงานกับ Sass สามารถทำได้หลายวิธี และจะต้องใช้พรอมต์คำสั่งเพื่อติดตั้งไลบรารีบางตัวในโปรเจ็กต์ของคุณ วิธีหนึ่งในการติดตั้ง Sass คือการใช้ Ruby - ตามที่อธิบายไว้ในเว็บไซต์ Sass หลักที่นี่ และอีกวิธียอดนิยมคือการใช้ Node.js

ประโยชน์ของ Sass มีมากกว่าระบบอัตโนมัติ และสามารถช่วยสร้างและจัดการสไตล์ชีตของโครงการได้อย่างง่ายดาย แม้แต่โครงการเว็บพื้นฐานที่สุดบางโครงการก็สามารถมีโค้ด CSS ได้หลายพันบรรทัด Sass เป็นวิธีที่ยอดเยี่ยมในการแบ่งโค้ดนี้ออกเป็นบิตที่จัดการได้มากขึ้น โดยแต่ละส่วนมีจุดเน้นของตัวเอง