【scss】スタイルを使い回す(変数や継承)

scssで、同じスタイルを使い回す際の定義、呼び出し方について。

変数の定義

1つのスタイルを使い回したい時には、変数として定義し、都度その変数を呼び出す。

scss

//定義
  $変数名: 値;
//呼び出し
　セレクタ { スタイルタイプ: $変数名; }

//例
  $point_color: #ccc;
  p { background-color: $point_color; }

スタイルの継承

@extendを付けるだけで、前に使ったスタイルを継承できる

scss

 .wrapper {
  height: 100%;
  width: 100%;
  background-color: #fff;
 }

 //呼び出し
 .content {
   @extend .wrapper {
   background-color: #ff0211;
   }
 }

引数を使ったスタイルの共有

使い回したいスタイルを@mixinで定義し、@includeで呼び出す。
例えば、基本のスタイル同じだけど、色だけ変更したい時とかに便利。

scss

 //定義
  @mixin required($bgColor:#ff0211) {
    color: #fff;
    background-color: $bgColor;
    margin-left: 8px;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 2px;
  }
 //呼び出し
  .option{
    @include required(#bfbfbf);
  }

メディアクエリ

例えば、PC、タブレット、スマホでスタイルを変えたい時などは、ブレイクポイントを指定すると簡潔に書ける。

scss

// 変数を定義
$breakpoint-tablet: 1024px;
$breakpoint-mobile: 640px;

// 幅が$break-point以下の時に@contentを適用
@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}
// 幅が$break-point-min以上、$break-point-max以下の時に@contentを適用
@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

ベンダープレフィックスの付与

ブラウザでサポートされていない拡張機能の実装に使う（拡張機能であることを明示する役割)。
今では、主要なブラウザでは、概ねサポートされてるので、ほとんど使わない。

scss

// ベンダープレフィックスを付与したい場合
$set-prefix: '', '-moz-', '-webkit-'; 

// プロパティにプレフィックスを付与したい場合
@mixin ProprtySetPrefix($name, $value) {
  @each $prefix in $set-prefix {
    #{$prefix}#{$name}: $value;
  }
}

// 値にプレフィックスを付与したい場合
@mixin ValueSetPrefix($name, $value) {
  @each $prefix in $set-prefix {
    #{$name}: #{$prefix}$value;
  }
}

// 使い方 
div {
  @include ProprtySetPrefix(transition, 0.5s);
}