Sass入門ガイド

SCSS記法とSASS記法

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Sassを記述する方法には、SCSS記法とSASS記法の2つの記法があります。ここでは、2つの記法の違いについて紹介します。
講師:
03:29

字幕

Sass を記述する方法にはSCSS 記法とSASS 記法の 2 つの記法があります。このレッスンでは2 つの記法の違いについて紹介します。2 つの記法を紹介する前に先ずは通常の CSS の記法を確認しておきましょう。通常の CSS ではこの様にルールセットを記述していきます。この CSS の内容と全く同じ内容をSCSS 記法で記述したのがこちらの screen.scss ファイルです。screen.scss ファイルを開きました。このファイルはSCSS 記法で記述されています。SCSS とはSassy CSSの略でそのまま直訳するとカッコイイ CSS という意味になります。SCSS ファイルは通常の CSS ファイルと同様にプレーンテキストファイルとして記述ができます。またファイルの拡張子は.scss です。具体的な記法の特徴としてはCSS の記法と互換性を持っているということが挙げられます。具体的にはCSS ファイルで書かれたルールセットをそのままコピー & ペーストしてもSCSS 記法では問題なく動作します。もちろん、ご覧の様にSass 独自のルールのネスト入れ子の様な機能を使って効率的に記述することも可能です。 続いて SASS 記法を紹介します。この内容と全く同じ内容をSASS 記法で書いたscreen.sass ファイルを開きます。こちらが SASS 記法です。SASS 記法という記法のことを言う時はSass 自体を言う時と違ってSASSという綴りを全て大文字で表記します。Sass ファイルも CSS と同様プレーンなテキストファイルとして記述します。拡張子は .sass です。SASS 記法の大きな特徴としてはCSS の記法で必要な波括弧や宣言の後ろにつけるセミコロン等記述しなければいけない記号が少ないという点が挙げられます。またルールや宣言を表現するために波括弧が無い代わりにインデントの深さ等を使っているため意図しないインデントの深さがある場合は文法上のエラーになってしまったりする場合があります。そのため通常の CSS ファイルとも互換性が無くCSS の記述をそのままコピー & ペーストしても正常に動作しません。現在では一般にSass で使われている記法はこちらの SCSS 記法になりますので通常 Sass を使う時にはこの SCSS 記法で書くということを覚えておきましょう。このレッスンではSass を記述する方法のSCSS 記法とSASS 記法の2 つの記法の違いについて学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。