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

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つだけプロパティの値を変更したいなんて場合も簡単です。 共通するプロパティはグループ化 >>続きを読む

今回はSassの「@import」について。CSSで使える@importの他にSass独自の@import機能があるので違いと使い方について勉強します。 CSSの@importと、Sassの@import 基本的な@importの書き方はCSSと同じですが、条件によってCSSの@importとしてインポートするか、Sassの@importとしてインポートするかが決まる。どっちの@importとしてインポートされたかによって違いがあります。 CSSの@importの使い方等詳しい説明は省きますが、上に書いた「CSSファイルとしてインポートされる」条件は下記の4つ。CSSの@importとして読み >>続きを読む

今回はSassの「演算」についてです。 普段プログラムとか書くことがあれば特に難しい事はないと思うのですが、Sassの場合、色の足し算とかも出来ておもしろいです。 数値の演算を使う プロパティの値に演算を使うとコンパイル後には計算結果を返してくれます。足し算「+」、引き算「-」、掛け算「*」、割り算「/」が使えます。例えばこんな感じ。 上の例では左右のpadding分の幅を元のwidthから引き算したい場合を考えて書きましたが、普段暗算や計算機で一旦計算してからcssに書いていたものが計算式だけでOKなのでとても便利。また、元のwidthの値をscssファイルに残しておけるのも後から確認する際 >>続きを読む