sassでコーディング効率化!意外と知らなかった?関数いろいろ※cssコンパイル後ソースあり

2015.5.8 CSS

sassでコーディング効率化!意外と知らなかった?関数※cssコンパイル後ソースあり

Sassを使ってコーディングする中で、ネストやらミックスインだけでも効率化において効果を発揮しますが、拡張メタ言語としてもっとイキイキとしてもらうためには関数が必須ですね。

compassなんかも使って効率化しましょう!というわけで、僕も忘れがちな関数とコンパイル後にCSSでどうなっているか、さらにちょっとした注釈などを殴り書きしていきます。

sassでコーディング効率化!意外と知らなかった?関数

ソースコード簡略化系

処理の条件分岐をさせる「@if(~)」

Sass(コンパイル前)

CSS(コンパイル後)

@ifに関してはよく紹介されていますが、Javascriptなどみたいに@if(~~)と、括弧を用いても動作するのはあまり紹介されていない気がします。

僕は括弧を使ったほうがやりやすいので、括弧派です!

 

CSSを引用する「@extend」

Sass(コンパイル前)

CSS(コンパイル後)

ネストしてあるクラス指定まできっちりと継承して、まとめられます。

値ひとつを返す際に使う「@function」

Sass(コンパイル前)

CSS(コンパイル後)

@functionに至っては@mixinとほぼ同様の動作ですが、こちらは処理結果の単体の値しか返せません。

@return 値 と書いて値をリターンします。

「わかりやすいコードを書く」という意味で使い分けるといいですね!

関数を作成する「@mixin」

Sass(コンパイル前)

CSS(コンパイル後)

関数名の後の()内の引数に続けて「」と書くことで、カンマ区切りの配列で値を指定できるようになります。

「@content」を応用してレスポンシブデザイン用のCSSメディアクエリを楽に書く

Sass(コンパイル前)

CSS(コンパイル後)

1~3行目でブレークポイントのpx数を変数に格納します。
それを使って4~9行目でmin-widthやmax-widthなどメディアクエリの記述をさらに変数に格納します。

breakPoint」というミックスインをつくり、第一引数で「sp(スマホ)」「tab(タブレット)」「pc(パソコン)」を指定したときにそれぞれのブレークポイントに条件分岐するように書きました。
第二引数は「min(min-width)」か「max(max-width)」の分岐です。

 

プロパティをネストする

Sass(コンパイル前)

CSS(コンパイル後)

とても解りづらいのですが、例えば、cssの「border」というプロパティには「border-top」「border-width」「border-image」など、様々な種類があります。

それらを「border{}」の中にネストすることで簡略化できるということですね。

変数名を自在に使用できる「インターポレーション」

Sass(コンパイル前)

CSS(コンパイル後)

スラッシュで区切ってショートハンドでCSSのfont指定をするとき、変数や数値どうしだと「/」が演算子となって、割り算されてしまいます。
しかしそこで、#{$変数名}と記述することで、演算されないようになります。

またこの記述でクラス名やグラデーションのfilterプロパティにも変数を使うことが出来ます。

色系

色の明度を調節する「darken」「lighten」

Sass(コンパイル前)

CSS(コンパイル後)

色の彩度を調節する「saturate」「desaturate」

Sass(コンパイル前)

CSS(コンパイル後)

色によっては彩度の高めようがない場合があります。その場合は、そのままのカラーコードが返されます。ちなみに彩度の単位は「%」でも「0.x」でも良いです。

似ている記述でも返す値の違う「rgba」「rgb」

Sass(コンパイル前)

CSS(コンパイル後)

rgba()は、本来10進数でカラーを指定するところに16進数や「white」などの文字列で指定しても変換して返してくれます。

rgb()は、10進数で指定して16進数で返してくれます。

引数の特定のカラーを抽出して10進数で返す「red」「green」「blue」

Sass(コンパイル前)

CSS(コンパイル後)

完全にNGな結果になっていますが、要するに、括弧内の引数のRGB値から

  • red()なら#FF0000
  • blue()なら#00FF00
  • green()なら#0000FF

といった具合に、該当のカラーコードを10進数で返してくれます。

 

HSL色空間を操作する「hsl」「hsla」「hue」「saturation」「lightness」

 

Sass(コンパイル前)

 

 

CSS(コンパイル後)

 

 

Hue(色相)、Saturate(彩度)、Lightness(明度、輝度)という意味がありますが、hue(),saturation(),lightness()は、引数を元にそれぞれ対応した値を返します。
サンプルでは引数にhsl()関数を使っていますが、普通に16進数の#00adbbとかでも大丈夫です!

そのhsl()ですが、引数に指定したhsl形式のカラーコードを16進数のRGB値に変換してくれます。

同じ要領で、hsla()はa=Alpha(透明渡)が加わっているのでRGBA値に変換して返してくれます!

透明度の調節をする「opacify」「transparentize」

Sass(コンパイル前)

CSS(コンパイル後)

opacifyは、指定した色の透明度を下げて、より不透明にした値を返します。不透明にした結果、透明度の値が1を超えた場合は、16進数のRGB値を返します。

対して、transparentizeは、透明度を上げて、より透明に知覚した値を返します。

色相環上での補色を返す「complement」

Sass(コンパイル前)

CSS(コンパイル後)

補色とは、色相環上で対照的な位置にある色のことです。

引数に指定した色の補色を返します。

色を反転させる「invert」

Sass(コンパイル前)

CSS(コンパイル後)

complement()と同じ場合もありますが、反転した色を返します。

数値系

絶対値を取得する「abs」

Sass(コンパイル前)

css(コンパイル後)

数値の切り捨て、切り上げ「ceil」「round」「floor」

Sass(コンパイル前)

css(コンパイル後)

.Sass(応用編ミックスイン)

小数の桁数と丸め方を制御する Sass 関数 · terkel.jpより。なるほどー!

パーセント変換をしてくれる「percentage」

Sass(コンパイル前)

css(コンパイル後)

ループ系

配列を順に処理する「@each~in~」

Sass(コンパイル前)

css(コンパイル後)

規定の回数だけループする「@for~form~」

Sass(コンパイル前)

css(コンパイル後)

@for ~ from 1 to 4だと1~3。@for ~ from 1 thorough 4だと、1~4の繰り返し。

変数$classNumが1からスタートし4に到達するか、それ以下までか、ということですね。

数の上限までループする「@while~」

Sass(コンパイル前)

css(コンパイル後)

いかがでしたか?

汎用的なものの一部はきっとこのページにある関数ではないかな、と思います。ここに書いたものはどれも結構使っていて、且つとても役立っていますねー!

SyntaxHighlighterでSASSのブラシがないため見づらいうえに、「●●系」で無理やりカテゴライズした感が満載ですが、こんな感じで次回はcompass編を紹介していこうと思います!

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。