Sass Mixins：保持樣式表乾燥

我最喜歡使用 Sass 的好處之一是它使前端設計工作流程的自動化變得輕而易舉。 有許多 JavaScript 工具可用於處理文件和自動執行其他任務，但 Sass 內置的 mixin 功能允許編寫模塊化前端樣式代碼。 在本文中，我列出了十個我最喜歡的用於自動編寫 Web 樣式的 Sass mixin。

這些是我幾乎用於我從事的每個 Web 項目的 Sass mixin。 網絡上有許多有趣的文章，其中包含一些有用的 Sass mixin。 還有一些優秀的 Sass 混合庫非常適合小型任務，例如 Bourbon。 另一個很棒的 mixin 庫，我從中派生了一些 mixin，它是 Andy。

我將在本文中介紹的 mixin 涉及以下內容：

• 媒體查詢
• 顏色主題
• 居中元素
• 清除修復
• 一致的字體大小
• 動畫過渡
• 視網膜圖像
• 快速漸變
• 外部字體
• 快速填充/邊距

媒體查詢

媒體查詢允許您輕鬆地將自定義斷點添加到樣式表，並在元素內快速添加自定義響應行為以用於不同的斷點。 然而，亂扔樣式表媒體查詢很快就會成為令人頭疼的原因，尤其是在維護它們的路上。 使用 Sass mixins，這一切都可以改變。

 $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; } }

定義這些後，可以按如下方式使用 mixin：

 .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 語句將發出一個媒體查詢，根據提供給 mixin 的尺寸名稱調整到特定的屏幕尺寸。 這將允許您輕鬆地相應地調整 CSS 屬性的行為。 您還可以自定義要調整 CSS 屬性的點。 通常，響應速度最快的佈局會堅持使用 3 或 4 個定義的屏幕寬度尺寸來調整內容。 屏幕尺寸、設備和應用程序的差異一直在擴大，但許多 Web 開發人員會在他們的佈局中使用一種流行趨勢； 手機的小屏幕尺寸，平板電腦的中等尺寸，筆記本電腦的大屏幕尺寸，台式電腦的超大尺寸。

作為參考，Bootstrap v3 中使用的媒體點是：

• 最大寬度：767px（任何屏幕寬度不超過 767px）
• 最小寬度：768px（任何超過 768px 寬的屏幕）
• 最小寬度：992px（任何大於 992px 寬的屏幕）
• 最小寬度：1200 像素（任何屏幕寬度超過 1200 像素）

顏色主題

定義在整個站點中使用的顏色主題有助於節省在相同 HTML 元素上使用相同顏色的 CSS 部分的時間。 如果您希望所有 div 按鈕都有一個 1px 實心虛線邊框，那麼您可以輕鬆地將其添加到您的主題中。 這個 Sass mixin 將允許您設置任意數量的顏色變量，並影響任意數量的類。 這可能是一個有用的工具，可以為某些東西提供顏色選項，或者任何時候你有一個功能可以同時影響許多元素的顏色。 這裡有一篇很棒的文章，其中包含有關在 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; }

這個 mixin 是最通用的內容居中方式之一，但值得注意的是，有許多不同的方式可以讓你的內容居中，這可能並不總是最好的解決方案。 根據您的佈局風格和瀏覽器兼容性的允許，您可能希望以不同的方式居中您的內容。 Flexbox 是另一種流行且非常有用的對齊工具，儘管目前舊瀏覽器並不完全支持它。 使用簡單的 css 屬性，無需此 mixin 即可輕鬆完成簡單的文本和容器對齊。 在創建佈局和使用其他容器內的容器時，這會為您提供更多幫助。

清除修復

快速有效地將 clearfix css 屬性應用於元素。 網絡上有很多 clearfix 解決方案，而這個似乎效果最好。 一旦創建了 Sass mixin，它也很容易使用。

只要您的內容向右或向左浮動，並且想要清除浮動元素下方的空間以在下方插入新內容，此 mixin 就會受益。

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

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

一致的字體大小

在文檔中設置 rem 字體大小，以用於所有文本元素。 這是放大和縮小字體而不是 em 的更好方法。 使用 em 將基於其他 CSS 屬性進行複合，但 rem 只會根據您在 HTML 文檔中定義的大小放大或縮小。 為您的所有排版分離一個 .scss 文件並使用以下 mixin 來定義您的默認字體大小將大大自動化您的排版編碼工作流程。

 @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) }

這個 mixin 還為不支持 rem（IE8 及以下）的瀏覽器創建了一個像素回退。 當瀏覽器不支持 rem 大小時，mixin 將計算您設置的初始 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}; }

mixin 的第一部分將添加瀏覽器兼容性所需的正確供應商前綴。 下一部分將其設置為輸入您的自定義字符串和屬性。 mixin 的最後一部分是您創建 mixin 名稱（在本例中為淡出）並定義您希望在動畫中的每個關鍵幀處發生的情況。 此示例設置非常基本，您可以對動畫持續時間的任意百分比添加更改。

 // 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;）轉換為沒有不透明度並在動畫的 90% 處基本上消失（不透明度：0;） . 因此，如果我將動畫設置為 5 秒時間軸，則元素將在 4.5 秒後消失（5 秒動畫的 90%）。 我在使用 mixin 時定義的最後一個屬性（“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; } }

這個 mixin 將允許您在與定義原始圖像的 CSS 屬性相同的位置添加規則。

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

以前，唯一的 CSS 解決方案是使用媒體查詢，而這個解決方案更加簡潔和容易。 有關此 mixin 的更多想法和想法，請查看本文。

快速漸變

輕鬆添加僅定義開始顏色、結束顏色和漸變類型的漸變。 添加所有漸變屬性，您可以根據需要進行選擇。 漸變類型允許您從垂直漸變、水平漸變或徑向（球形）漸變中進行選擇。

 @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 font-face 屬性，我們可以輕鬆地在目錄中添加字體並包含所有字體類型。 使用字體文件時，不同的瀏覽器對文件類型的兼容性不同。 這個 mixin 通過使用目錄中的任何相關字體文件來幫助解決這個問題。

只需將任何字體文件包含在一個目錄中，然後在您的樣式中添加“@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; } }

這個 mixin 將負責定義備用字體格式 URL，包括向後兼容所需的奇怪解決方法。

快速填充和邊距

我使用它的主要原因是因為我會省略一個特定的填充屬性，例如 padding-left 有時，我不想定義它。 使用 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-* 屬性。 您可以快速將此 mixin 包含在任何元素中，並僅定義要包含的邊距/邊距。 內邊距和邊距是添加到元素中最常用的 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 mixin 是提高工作流程效率的好方法。 這些特定的 mixin 將幫助您在常見的 Web 任務上花費更少的時間，讓您有更多的時間專注於需要更仔細和熟練的洞察力的項目的其他方面。

可以通過多種方式安裝和使用 Sass，並且將涉及使用命令提示符在項目中安裝一些庫。 安裝 Sass 的一種方法是使用 Ruby（如 Sass 主網站上所述），另一種流行的方法是使用 Node.js。

Sass 的好處不僅限於自動化，還有助於輕鬆創建和管理項目樣式表。 即使是一些最基本的 Web 項目也可能有數千行 CSS 代碼。 Sass 是將代碼分解為更易於管理的部分的好方法，每個部分都有自己的重點。