• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

Sassで@mixin

2018-03-27 by mocurot 1 コメント

 @mixin(ミックスイン)を使えば、あるスタイルを定義したルールセットの内容を継承しつつ、新しいルールセットを作ることができます。
ここまでは@extendと同じですが、 @mixinは引数を指定して定義した @mixinの一部を変更して使うことができます。これにより、より柔軟な処理が可能になります。
※変数についてはこちらを参考に。

@mixinを使ってみる

@mixinを使って、文字を画像にリプレイス(置き換え)してみましょう。
nirというミックスインにリプレイスに必要なプロパティを定義して、.logoからnirに必要な情報を引数として渡して継承します。

@import "compass";

@mixin nir ($img, $w, $h){
  width: $w
  height: $h;
  padding:0;
  margin:0;
  overflow: hidden;
  &:before{
    content:image-url($img);
    @include scale(.5);
    @include transform-origin(0, 0);
    display:inline-block;
    font-size:0;
    line-height:0;
  }
}

.logo {
  @include nir("logo.png", 80px, 80px);
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.logo {
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.logo:before {
  content: url('images/logo.png?1522126163');
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

ミックスインとして定義したnirには、「$img 」(画像の名前)、「$w 」(画像の幅)、「$h 」(画像の高さ)を引数に持たせています。

次に.logoルールセットで@include nir("logo.png", 80px, 80px);として、nirに引数「logo.png 」(画像の名前)、「80px 」(画像の幅)、「80px 」(画像の高さ)を渡しつつインクルードしています。

※Retinaディスプレイ向けに画像の解像度を倍にするのでcompassでscale(.5);とtransform-origin(0, 0);をインクルードしています。


文字を画像にリプレイスすることが多いページを作る場合には、上記のようなミックスインを用意しておけば、画像の情報を渡してあげるだけで文字のリプレイスが完了します。

アイデア次第で効率化できるルールセットもあるので、探してみると面白いかもしれなません。


次回「 @content」

0
この記事に興味を持っていただけたら
をクリックしてもらえると励みになります!

Filed Under: Sass 関連タグ:SASS, SCSS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • さくらのVPSで80/443ポートに繋がらない
    さくらのVPSで80/443ポートに繋がらない
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • SassでCompassを使う
    SassでCompassを使う
  • Sassで@import
    Sassで@import
  • LEMP環境の構築[ルートログインからSSHデーモンの設定]
    LEMP環境の構築[ルートログインからSSHデーモンの設定]

タグ

AMAZON ANKER APPLE APPLE WATCH APPS CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC NGINX NODE.JS NOTE PHP PS4 SASS SCSS SEKIRO SERVER WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン