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

今回は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ファイルに残しておけるのも後から確認する際 >>続きを読む

今回はSassの「変数」について勉強します。今までCSSを書いてきて変数が使えたらいいのになぁと思うタイミングが多々ありました。これで解決するぞ(*´ω｀*)♪ Sassで変数を使う 「変数」ってものについては特に書かなくてもいいかと思うのですが、まぁ一応Wikipediaのリンクだけ置いておきます。 >>変数 (プログラミング) – Wikipedia Sassの変数の宣言は「$」から始まる変数名の後に「：」と「値」、最後に「;」を指定する。 $変数名 : 値 ;　 その変数を参照したい時は、使いたいプロパティの値部分にその「$変数名」を記述する。 変数を使って同じ値 >>続きを読む

今回はSassの基本的な機能、「ネスト」について勉強します。ルールのネスト、親セレクタの参照、プロパティのネスト、プレースホルダー、それからSassのコメントについても触れています。 ちょっとこの辺りからは、教科書、動画だけでなく、Sass公式のリファレンスもちゃんと確認するようにしますね。 >>File: SASS_REFERENCE — Sass Documentation ルールのネスト Sassではルールをネストを利用して書く事が出来ます。CSSをHTMLの構造に合わせてネストさせて（入れ子にして）書いていく事が出来るので把握しやすく、重複したセレクタを書かんでも良くなると >>続きを読む

と、いうことで脱Sass初心者を目指してもっかい頑張ります。今回はSassの概要のおさらいと、Sassを自分のPCで使えるようにする環境設備と動作テストまでやります。 私の参考書籍・参考サイト まず最初に今回の学習に関して私が参考にしている書籍とサイトを紹介します。前回の記事にも書いたのですが、「Sassの勉強記事だけ読みたいんや、という方は是非次の投稿記事へお進みください」とか書いたのでもっかいちゃんと紹介しておきます。 書籍。私はこの本を買いました。 >>Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 本当にこの本は「教科書」です。記 >>続きを読む