REDLINE MAGAZINE | web制作・デザインに関するさまざまな情報掲載サイト

Sassには様々な便利な関数が揃っています。とりあえずまずは一通りネイティブ関数を確認して、その後、自作関数についても触れたいと思います。最後に「@debug」と「@warn」についても書きます。 Sassに用意されている関数一覧 Sassのネイティブ関数一覧は下記リファレンスで確認できます。 >> Module: Sass::Script::Functions — Sass Documentation 色関連の関数 RGB関連の関数 rgb($red, $green, $blue)赤、緑、青の値から色を作成する。 rgba($red, $green, $blue, $alpha) >>続きを読む

「@at-root」はSassのバージョン3.3で追加された機能で、記述した場所より上のセレクタのネストを解除するというもの。何に便利なのかイマイチ掴めていないのだけれども、勉強します。 @at-root とりあえず「@at-root」の使い方書きます。 こんな感じでルールセットの中に「@at-root」をつっこめる。 上のサンプルは何の役にも立たないけれども、記述した場所より上のセレクタのネストを解除する、ということで、.parentのネストを解除して階層が1つ上がってるのが確認できる。上の例ではネストは2階層だけれども、３階層でも４階層でも「@at-root」が使われている箇所はネストが解 >>続きを読む

jsやらPHPやら色んなところで遭遇する「制御構文」がSassでも使えます。CSSでも使えたらいいなと思う事がたくさんあったのですが、それもまたSassで解決できますYO(*´ω｀*) Sassで使える制御構文 使えるのは以下の4つです。これらを使用してよりプログラミングっぽい書き方ができるようになります。jsやPHP等に触れる機会も多いと思いますが、だいたい同じような書き方で使えます。 @if（条件分岐） @for（繰り返し） @while（繰り返し） @each（繰り返し） @if(条件分岐) 「もし～なら」という条件分岐の際に使用する「@if」。Sassの場合は頭に「@」がつきます。 @ >>続きを読む

やっとここまで来たぜ「@mixin」。このミックスイン関連のブログやらなんやらを見て、とにかく楽しそうで仕方なかったのです。一番勉強したかったとこ。頑張るぞー(*´ω｀*)↑↑ @mixin 基本 「@mixin」はスタイルを定義しておき、それを好きなところで呼び出せるという機能。それだけだと「@extend」と変わらないって感じなのですが、「@mixin」では引数が使えちゃう(*´∀｀)！ …と興奮気味ですが、さっそく基本の使い方をみていきます。 ミックスインの使い方 まず「@mixin 任意の名前{・・・}」という形でミックスインを定義します。 定義しただけではCSS側には何も出力されませ >>続きを読む

今回はスタイルの継承ができる「@extend」についてです。 この辺りから本格的なSassって感じがしてテンション上がります(*´∀｀) @extend 基本 「@extend」は指定したセレクタのスタイルを継承できる機能。ルールセットの中で中で他のセレクタで指定してあるルールをそのまま流用できます。 @extend セレクタ; 書き方はこれでOK。簡単。シンプルな例で見てみると、こんな感じになります。 コンパイル後は継承元と継承した先のセレクタがグループ化されます。 ほぼ同じスタイルを使いまわしたいけど、1つだけプロパティの値を変更したいなんて場合も簡単です。 共通するプロパティはグループ化 >>続きを読む