Sass Mixins：スタイルシートを乾いた状態に保つ

公開: 2022-03-11

Sassを使用する私のお気に入りの利点の1つは、フロントエンドの設計ワークフローを簡単に自動化できることです。 ファイルを操作したり、他のタスクを自動化したりするためのJavaScriptツールはたくさんありますが、Sassの組み込みのミックスイン機能により、モジュラーフロントエンドスタイルのコードを記述できます。 この記事では、Webスタイルの作成を自動化するためのお気に入りのSassミックスインを10個挙げました。

Sass Mixins：スタイルシートを乾いた状態に保つ

これらは、私が取り組んでいるほぼすべてのWebプロジェクトに使用しているSassミックスインです。 Web全体にいくつかの便利なSassミックスインを含む興味深い記事がたくさんあります。 バーボンのような小さなタスクに最適なSassミックスインライブラリもいくつかあります。 以下のミックスインのいくつかを私が導き出したもう1つの素晴らしいミックスインライブラリは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つの定義された画面幅の寸法に固執します。 画面サイズ、デバイス、およびアプリケーションの多様性は常に拡大していますが、多くのWeb開発者がレイアウトに使用する一般的な傾向があります。 電話の場合は小さい画面サイズ、タブレットの場合は中程度、ラップトップの場合は大きい画面サイズ、デスクトップコンピューターの場合は特大の画面サイズ。

参考までに、Bootstrapv3で使用されるメディアポイントは次のとおりです。

  • 最大幅：767px（幅767pxまでの任意の画面）
  • 最小幅：768px（幅768pxを超える画面）
  • 最小幅：992px（992pxを超える幅の画面）
  • 最小幅：1200px（幅1200pxを超える画面）

カラーテーマ

サイト全体で使用するカラーテーマを定義すると、同じHTML要素にCSSの同じ色の部分を配置する時間を節約できます。 すべての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; }

このミックスインは、コンテンツを中央に配置するための最も用途の広い方法の1つですが、コンテンツを中央に配置するにはさまざまな方法があり、これが常に最良の解決策であるとは限らないことに注意してください。 レイアウトスタイルとブラウザの互換性の許容範囲に応じて、コンテンツを別の方法で中央に配置することをお勧めします。 Flexboxは、現在、古いブラウザでは完全にはサポートされていませんが、位置合わせのためのもう1つの人気のある非常に便利なツールです。 単純なcssプロパティを使用して、このミックスインなしで単純なテキストとコンテナの位置合わせを簡単に行うことができます。 これは、レイアウトを作成したり、他のコンテナー内のコンテナーを操作したりするときに役立ちます。

Clearfix

clearfixcssプロパティを要素にすばやく効果的に適用します。 Webには多くの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以下）のピクセルフォールバックも作成します。 ブラウザがレムサイズ設定をサポートしていない場合、ミックスインは設定した初期レムサイズに相当するピクセルを計算し、要素のピクセル値とレム値の両方を出力します。

アニメーション

アニメーションのプロパティをすばやく定義し、要素に追加します。 現在、アニメーションの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;）から不透明度がなく、アニメーションの90％で本質的に消える（不透明度：0;）に遷移します。 。 したがって、アニメーションに5秒のタイムラインを設定すると、要素は4.5秒後に消えます（5秒のアニメーションの90％）。 ミックスインの使用法で定義する最後のプロパティ（「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 font-faceプロパティを使用すると、ディレクトリにフォントを簡単に追加して、すべてのフォントタイプを含めることができます。 フォントファイルを使用する場合、ブラウザが異なればファイルタイプとの互換性も異なります。 このミックスインは、ディレクトリ内の関連するフォントファイルを使用することでそれを解決するのに役立ちます。

ディレクトリにフォントファイルを含め、スタイルに「@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の定義に注意を払います。

クイックパディングとマージン

これを使用する主な理由は、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; }

次に、ミキシングを使用して、スタイルシート全体の一連のパディング-*およびマージン-*プロパティを置き換えることができます。 このミックスインを任意の要素にすばやく含めて、含めるパディング/マージンの側面のみを定義できます。 パディングとマージンは、要素に追加される最もよく使用されるCSSスタイルの1つであり、このような小さな時間の節約はすぐに追加されます。

 // 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ミックスインを使用することは、ワークフローをより効率的にするための優れた方法です。 これらの特定のミックスインは、一般的なWebタスクに費やす時間を減らし、より注意深く熟練した洞察を必要とするプロジェクトの他の側面に集中するためのより多くの時間を提供します。

Sassのインストールと操作はさまざまな方法で実行でき、コマンドプロンプトを使用してプロジェクトにいくつかのライブラリをインストールする必要があります。 Sassをインストールする1つの方法は、Rubyを使用することです（ここのメインのSass Webサイトで概説されています）。もう1つの一般的な方法は、Node.jsを使用することです。

Sassの利点は自動化だけでなく、プロジェクトのスタイルシートを簡単に作成および管理するのに役立ちます。 最も基本的なWebプロジェクトのいくつかでさえ、数千行のCSSコードを持つことができます。 Sassは、このコードをより管理しやすいビットに分割し、それぞれに独自の焦点を当てる優れた方法です。

関連： Sassスタイルガイド：より良いCSSコードを書く方法に関するSassチュートリアル