WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Sassで@mixinを使う

@mixinとはSassファイルにおいて

@mixin 任意の名前

と記述することでCSSを定義し、

@include 任意の名前

と記述することで定義したCSSを呼び出すことができる
引数も使用することができる。
よく使うCSSがあれば書いておくと便利。

inline-blockでの横並びとスマホ等で%指定をする際に計算をしてくれる@mixin

f:id:mmmmofu:20180221175934p:plain

デモ
http://efu.sakura.ne.jp/web/sass_mixin/

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SASSで@mixinを使う</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="box1">
    <li></li>
    <li></li>
  </ul>
  <div class="box2"></div>
</body>
</html>

_layout.scss

$base_width: 750px;

//pxを%に
@mixin width($w){
  width: floor((( $w / $base_width ) * 100% )) ;
}

//pxを%にし、センター配置
@mixin widthCenter($w) {
  width: floor((( $w / $base_width ) * 100% )) ;
  margin: 0 auto;
}

// 横並び(親要素)
@mixin inlineWrap($align) {
  text-align: $align;
  letter-spacing: -.4em;
}

// 横並び(子要素)
@mixin inline {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}

style.scss

@import "_layout";

.box1 {
  @include inlineWrap($align: center);
  margin: 50px 0;
  li {
    @include inline;
    width: 300px;
    height: 300px;
    margin-left: 50px;
    background: #C06C84;
    &:first-child {
      margin-left: 0;
    }
  }

}

.box2 {
  @include widthCenter($w: 450px);
  height: 300px;
  background: #6C5B7B;
}

@mixinは同じファイルに書いても良いが、別のファイルに書いて読み込むことでも使用できる。
その場合は@importでmixinの書いてあるファイルを呼び出す。