はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content)

Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content)

Sass の醍醐味であるファイル分割(@import)、関数(@function)、継承(@extend)、@mixin、@include、@content についてまとめておきます。

ファイル分割(@import)

Sassファイルは、分割して管理することができる。 _filename.scss のように、 ファイル名の先頭に _(アンダースコア)をつけると 直接コンパイルされない。 別のsassファイルで @import で呼び、分割して管理することができる。

ファイル構成例

        

_mixin.scss
_setting.scss
_base.scss
loyout/
 _header.scss
 _footer.scss
module/
 _button.scss
 _heading.scss
main.scss

以下のように分割ファイルを呼び出して、 main.css にまとめることができる。

main.scss

        

@import "mixin"
@import "setting"
@import "base"
@import "layout/header"
@import "layout/footer"
@import "module/button"
@import "module/heading"

関数(@function, @return)

自作の関数を作ることもできます。引数と返り値が必要です。 void関数のような使い方をする場合は、後述する mixinを使います。

以下は、横幅を940px 各カラムのmargin(-right)を10px、5等分したときに 各カラムの幅を計算する関数です。

Sass

        

$totalWidth: 940px;
$columnCount: 5;
$margin-right: 10px;
@function getColumnWidth($width, $count, $margin){
 //$columnWidthを計算
 $columnWidth: floor(($width - ($margin * ($count - 1)))/$count);
 @return $columnWidth;
}
.grid {
 float: left;
 width: getColumnWidth($totalWidth, $columnCount, $margin-right);
}

CSS

        

.grid {
 float: left;
 width: 180px;
}

継承(@extend)

@extendで、 オブジェクト指向に似た継承を行うことができる。

下記は、 メッセージ用のセレクタ .msg を作り、 それを継承して、エラーメッセージ用の .errorMsg と 警告メッセージ用の .warningMsg を作っている例です。

継承すると、共通のプロパティは、 カンマ区切りの複数のセレクタで指定されます。

Sass 例:メッセージ

       

.msg {
 font-size: 12px;
 font-weight: bold;
 padding: 2px 4px;
 color: white;
}
.errorMsg {
 @extend .msg;
 background: red;
}
.warningMsg {
 @extend .msg;
 background: orange;
}

CSS 例:メッセージ

        

.msg, .errorMsg, .warningMsg {
 font-size: 12px;
 font-weight: bold;
 padding: 2px 4px;
 color: white;
}
.errorMsg {
 background: red;
}
.warningMsg {
 background: orange;
}

また、継承元に% をつけると、CSS に出力されないようにできる。 以下の例では、 button は、出力されない。

Sass 例:ボタン

        

%button {
 display: inline-block;
 text-align: center;
 padding: 10px 20px;
}
.button-primary {
 @extend %button;
 background-color: #4285f0;
 color: #eee;
}
.button-secondary{
 @extend %button;
 color: #333;
 }

なお、 同じセレクタについて継承ばかりすると、カンマ区切りばかりのセレクタが出来上がり、 見づらくなるので注意が必要 です。

        

.header, .button, .article, .list, .container, .menu, .block, .inner, .block-header, .block-body, .block-footer {
 display: block;
 padding: 10px 0;
 border-bottom: 1px #ccc solid;
}

何かルールを設けて、範囲を限定する必要がある。

@mixin, @include

@mixin は、 @extend と違って引数も取ることができ、 @function と違って返り値は必要なく、プロパティのまとまリを定義できる。 定義のみなので、 @include で呼び出して使う。 継承の意味合いがない場合は、 こちらの@mixin を使う。

また、後の保守性も考えて、 mixin は引数を使って、変数で変更できるように設計することが良いようです。

以下は、 height を入力して垂直方向に中央揃えする .middle クラスの例です。

Sass 例:.middle

        

@mixin middle($height) {
 height: $height + px;
 position: absolute;
 top: 50%;
 margin-top: -($height / 2) + px;
}
.icon-menu {
 @include middle(10);
}

CSS 例:.middle

        

.icon-menu {
 height: 10px;
 position: absolute;
 top: 50%;
 margin-top: -5px;
}

また引数は、初期値を設定できる。

Sass 例:角丸

        

@mixin round($radius:4px) {
 border-radius: $radius;
}
.label{
 font-size: 12px;
 @include round;
}

CSS 例:角丸


.label {
 font-size: 12px;
 border-radius: 4px;
}

@content

@mixin は、 @content を使える。 @content のある @mixin@include すると、 @include したセレクタ@content の位置に挿入できる。

以下は、 @content とメディアクエリの例です。

Sass

        

@mixin tablet($max-width:1024px) {
 @media only screen and(max-width: $max-width){
  @content;
 }
}
.sidebar {
 width: 300px;
 float: right;
 @include tablet {
  width: 100%;
  float: none;
 }
}

CSS

        

.sidebar {
 width: 300px;
 float: right;
}
@media only screen and (max-width: 1024px) {
 .sidebar {
  width: 100%;
  float: none;
 }
}

更に拡張すると、マルチデバイス対応に使えます。

Sass 例:マルチデバイス対応

        

@mixin tablet($max-width:1024px) {
 @media only screen and(max-width: $max-width){
  @content;
 }
}
@mixin sp-large($max-width:480px) {
 @media only screen and(max-width: $max-width){
  @content;
 }
}
@mixin sp-small($max-width:320px) {
 @media only screen and(max-width: $max-width){
  @content;
 }
}
.sidebar {
 width: 300px;
 float: right;
 @include tablet {
  width: 100%;
  float: none;
 }
 @include sp-large {
  width: 100%;
  float: none;
  padding: 0 10px;
 }
 @include sp-small {
  display: none;
 }
}

CSS

       

.sidebar {
 width: 300px;
 float: right;
}
@media only screen and (max-width: 1024px) {
 .sidebar {
  width: 100%;
  float: none;
 }
}
@media only screen and (max-width: 480px) {
 .sidebar {
  width: 100%;
  float: none;
  padding: 0 10px;
 }
}
@media only screen and (max-width: 320px) {
 .sidebar {
  display: none;
 }
}

まとめ

@mixin, @extend は、便利な機能だが、 最終的に生成されるファイルはCSSファイルであり、保守性や可読性の低いものができる場合もあるので、 テキトーな多用は厳禁である。

広告を非表示にする