Weblasts

Sassを使ってみる-その③難しそうなところ-

@functionで関数を作る

SCSSでは関数を作って使うこともできますが他のプログラミング言語とは違い複雑なことはせずに返り値を使うことしかできません。

作り方は大体のプログラミング言語とそっくりで、先頭に@functionをいれ、半角スペースの後に関数名 引数を入れる()の中に引数必要な分だけカンマ区切りで変数の形で入れます {}の中には引数を使った処理を入れていきます 呼び出しもとに返すための@return文を最後に置けば完成

処理の中で変数を使うこともできるのでオススメ

親要素と子要素の大きさを引数に入れて何%か計算して出力する関数を試してみます Really Quick Responsive Web Design Calculatorこのサイトの計算機と同じ機能を作ってみます

この状態でコンパイルすると計算した状態で出力されるようになります
毎回計算しないといけなかったものが関数さえ作っておけばSCSSのファイル内でできるので楽なのではなかろうか

#{}

変数に入った文字列は通常は値として認識されてエラーが出てしまって、そのままだとプロパティの値にしか使用できません。単位なども同じで変数を使った処理の後につけようとするとエラーになります

ハッシュ記号を前に置いた波括弧 #{}と組み合わせることでセレクタやプロパティ名にも使うことができるようになります。上の関数のところでは文字列扱いで使いました

例として変数に入れた文字列を使ってクラスセレクタやプロパティ名を出力してみます

コンパイルした出力内容は以下のようになります

何かと何かを組み合わせるのであればこの#{}を使ってください

@mixinと@includeで用意したコードを使いまわす

@mixinは使いまわしたいコードを準備するための構文で, 引数を使って初期値を指定したり、コンテントブロックを指定したりできる

@includeは準備したコードを呼び出すための構文になります

まずは簡単なひな形から

例えば文字に対しての指定をまとめておいて出力すると

コンパイルするとこのように@mixinで作った設定がそのまま吐き出されます

引数を使って初期値を指定する例も見ておきましょう

このコードでコンパイルすると

※プロパティ値でカンマを使って複数を区切らないといけないものは少し書き方が複雑になります

コンパイル結果

@contentの使い方

@mixinの中の{}内で@content;と記述するとコンテントブロックを渡すことができ、1つのmixinで呼び出し側に合わせて処理を追加したりすることが可能になります

コンパイルすると

特定要素のスタイルを引き継ぐ@extend

一度記述した要素のスタイルを、他の要素のスタイル記述時に再利用したい場合に便利です

例えばこんなコードを書いてみると

コンパイルしてみるとこのような形になります
どうしても仕様で継承した場合は複数セレクタの形で出力されてしまいますのでその点には注意

@if / @else / @else if で条件分岐

余り使い道がないように思えますがsassでも条件分岐ができます

コンパイルすると

繰り返し構文は@for

@for 変数名 from ◯ to(through) △」の記法によって、指定した数値の範囲で繰り返し処理ができます。 変数名はやっぱり$iを使うことが多いようですが、好きなものを使ってください

toを使った場合は2つ目の値を範囲に含まず、throughを使った場合は2つ目の値を範囲に含む形になります

コンパイルすると

配列を繰り返し処理する@each

変数に配列を格納して、配列のデータがなくなるまで繰り返すことも可能です
扱うデータが配列の場合は「@each データを入れる変数名 in 配列名」の記法を使います。

配列の各値を一つずつ取り出して繰り返し処理することが可能になります
PHPなどのforeach考え方は同じだけど書き方が別物になっているので注意

例えば大まかにコンテンツを配列で作りクラスセレクタにして使うなら

元々共通するクラスを使えばいいように思えますがこのように配列のデータを使い各クラスへ指定ができます

Recommend Post