bertvthulによるPixabayからの画像

はじめに

今回は処理をまとめる系として、以下のご紹介です。

①パーシャル	@import	別ファイルを読み込む
②スタイルのグルーピング	@extends	スタイルのグループ化 引数不可。
③スタイルを使いまわす	@mixin @include	定義したスタイルを使いまわす。引数可。
④関数	@function	処理をまとめる

「②スタイルのグルーピング」と「③スタイルを使いまわす」の違いが判りずらいのですが、ざっくり以下の特徴があります。

②スタイルのグルーピング
　⇒引数不可。CSSコンパイル後の可読性低いが重複したコード無し。

③スタイルを使いまわす
　⇒引数可。CSSコンパイル後の可読性高いが重複したコード有り。

どっちつかったらいいかわからない場合は「③スタイルを使いまわす」塚っといたらいいかなと思ってます。

①パーシャル

別ファイルに書いたscssを@importで読み込みます。

■別ファイルのファイル名
パーシャルはファイル名の先頭に「_(アンダーバー)」をつけます。

例）ファイル名：_variables.scss

■ファイルの読み込み
任意のscssファイルで「@import “ファイルパス”;」とすると読み込めます

例）@import "variables";

※@importの後のファイルパスはアンダーバー無し、拡張子無しで書きます。

②スタイルのグルーピング

以下のようにするとスタイルをグループ化し、好きなところで呼び出せます。

定義：「%任意の名前{}」でスタイルを定義します。

呼出：「@extends %任意の名前;」

例）

%button-style{    ⇐「.button-style」のように定義しても動くが
  %div-size{　　　　CSSコンパイル後も残ってしまう。
    width: 100px;
    height: 100px;
}

.div1{
    @extend %div-size;
    background-color: blue;
}

③スタイルを使いまわす

■「引数無し」で使う

以下のように定義、呼出します。

なお、mixin名はロワーキャメルケースを使うのが一般的です。

【定義】
@mixin 任意のmixin名{
  プロパティ: 値;
}

【呼出】
@include mixin名;

例）

@mixin boxBase{
  width: 100px;
  height: 100px;
}

.box1{
  @include boxBase;
}

　

■「引数有り」で使う

【定義】
@mixin 任意のmixin名($引数1, $引数2){
  プロパティ1: $引数1;
  プロパティ2: $引数2;
}

【呼出】
@include mixin名($引数1, $引数2);

例）

@mixin boxBase($width, $height){
  widht: $width;
  height: $height;
}

.box1{
  @include boxBase(100px, 100px);
  background-color: #00f;
}

④関数

Sassでは関数も使えます。

【定義】
@function 関数名($引数){
  @return 戻り値;
}

【呼出】
関数名(引数);

例）

@function hello($key){
  @return $key + ".world";
}

.sample{
  content: hello("hello");
}

Sassの基礎はこれで終わりです。