いくつかの実用的な Sass mixins_html/css_WEB-ITnose

Mixins は、コードを簡単に再利用するために Sass (実際には多くの前処理言語) で使用されるメソッドであり、CSS プロパティまたはコードのセットを返す関数として単純に理解できます。

@mixin border-radius($radius) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;          border-radius: $radius;}.box { @include border-radius(10px); }

上記のコードを処理すると、次の CSS コードが得られます。

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

Sass に慣れていない場合は、まず Sass を学習してください。本題に入り、いくつかの実用的なミックスインを紹介します。

絶対位置

ページで絶対位置を頻繁に使用する場合は、次のことを試すことができます:

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {  top: $top;  right: $right;  bottom: $bottom;  left: $left;  position: absolute;}

Use

.abs {  @include abs-pos(10px, 10px, 5px, 15px);}

Output

.abs { top: 10px; right: 10px; bottom: 5px; left: 15px; position: absolute;}

with rem 単位を適切に使用する

レム単位に精通しているフロントエンド ユーザーは、サポートされていないブラウザに遭遇したことがありますか? どうやって解決しましたか？次のミックスインでは、フォールバック用に px 単位を追加します:

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

use

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

output

p { font-size: 14px; font-size: 0.8rem;}

Clearfix

インターネット上には、次のような Clearfix ハックがたくさんあります。より一般的で、IE6 以降と互換性があります

@mixin clearfix() {    &:before,    &:after {        content: "";        display: table;    }    &:after {        clear: both;    }}

Use

.container {  @include clearfix();}

When-inside

私が好むミックスインは、さまざまな状態の要素の属性を変更するためによく使用されます。たとえば、H5 ページではアクティブなクラス名を現在のページに追加し、現在のページの foo オブジェクトでアニメーションを実行したいとします。

/// Make a context based selector a little more friendly/// @author Hugo Giraudel/// @param {String} $context@mixin when-inside($context) {  #{$context} & {    @content;  }}

Use

.foo {  @include when-inside('.active') {    animation: fadeIn 0.3s 1s forwards;  }}

Output

.active .foo { animation: fadeIn 0.3s 1s forwards; }

レスポンシブ実行時のメディアクエリウェブサイト、とても便利です。次のコードがニーズを満たさない場合は、前の記事「Sass を使用した高度なメディア クエリ」を読むことをお勧めします。

長いShadow

このミックスインは一般的には使用されないかもしれませんが、エフェクトは本当にクールです~

$breakpoints: (  'sm': 'only screen and  (min-width: 480px)',  'md': 'only screen and ( min-width: 768px)',  'lg': 'only screen and ( min-width: 992px)') !default;@mixin respond-to($breakpoint) {  $query: map-get($breakpoints, $breakpoint);    @if not $query {    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';  }  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {    @content;  }}

Use

.foo {  @include respond-to('sm') {    padding-left: 20px;    padding-right: 20px;  }}

Effect

See the Pen Long Shadow Sass Mixinby (@HelKyle) ) CodePen で。