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ファイルであり、保守性や可読性の低いものができる場合もあるので、 テキトーな多用は厳禁である。
参考リンク
