Sass入門ガイド

Webブラウザで開発する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
手軽にSassを体験する手段として、Webブラウザ上でSassを記述し、リアルタイムにCSSにコンパイルできるSassMeisterというサービスがあります。ここでは、SassMeiterについて紹介します。
講師:
04:56

字幕

手軽に Sass を体験する手段としてWeb ブラウザ上で Sass を記述しリアルタイムに CSS にコンパイルできるSass meister というサービスがあります。このレッスンではSass meister について紹介します。画面では Web ブラウザでSass meister を開いているところです。Sass meister はsassmeister.comというドメインで提供されている Web サービスです。具体的な内容としては画面の左側にSass を記述するエリアがあります。そして、ここの Sass を記述するエリアに書いた Sass はリアルタイムに画面右側のCSS の出力エリアにコンパイルされて表示されます。どの様な環境からでもWeb ブラウザ上で Sass を記述することで直ぐに CSS にコンパイルできるため大変便利なサービスです。また Sass meister では同時にhtml を記述してその表示結果をリアルタイムに確認することもできます。ここでは予め簡単な html を記述しておきました。画面の下側には記述した html のレンダリング結果がリアルタイムに表示されています。 それでは、この Web ページに対して背景色を設定してみましょう。尚実際に CSS を入力できるのはこの画面左側の Sass のエリアのみです。真ん中の CSS のエリアには文字を入力できませんので注意してください。それでは実際に CSS を記述していきましょう。Web ページに背景色を指定しますのでボディ要素に対してタイプセレクタを記述します。尚この時リアルタイムにSass の内容がCSS にコンパイルされるためSass では、まだ波括弧を閉じていない状態ですのでCSS の欄ではコンパイルにエラーがあったということが分るようなエラー文が出力されています。例えば、このまま波括弧を閉じてみると問題無くコンパイルされています。現在は、未だプロパティー値を何も書いていないためCSS には何も出力されていません。では背景色を指定しましょう。background-color プロパティーを使って背景色に緑系の色を設定します。ここまでは Sass に書いてある内容もCSS に書いてある内容も全く同じです。それでは Sass の特徴であるルールのネスト入れ子を使って今度はh1 要素見出しの部分に文字色を設定してみましょう。 h1 要素はボディ要素の子要素ですのでこのままネストして記述することができます。h1 要素に対してcolor プロパティーを使って文字色を設定します。すると、記述した Sass の内容がリアルタイムにコンパイルされCSS になりました。画面の下を見ると背景色や文字色がきちんと適用されていることが分かります。この様に Sass meister はWeb ブラウザだけで Sass を利用できる大変便利な Web サービスです。この他にもGithub のアカウントを入力するとGist というサービスと連携ができたり或いはオプションを設定できたりという機能も付いています。オプション画面ではコンパイルする Sass のバージョンを選択できたり記法で SCSS 記法を使うかSASS 記法を使うかというのを選べたりします。また他にもバーボンやCompass の様なSass を使ったフレームワークを使うかどうかということも選択できます。出力する CSS の出力スタイルを選べたりhtml を通常の html 以外の Haml やマークダウンなどで記述したりそれぞれのエディター部分のテーマを選択することができたりと様々な機能がオプションとして設定できます。 このレッスンではWeb ブラウザ上で Sass を記述しリアルタイムに CSS にコンパイルできるSass Meister について学びました。

Sass入門ガイド

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

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

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

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

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