Sass入門ガイド

style CSSの出力スタイル

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
styleオプションを使うと、Sassから出力されるCSSの出力スタイルを変更することができます。ここでは、その手順と出力スタイルの種類を紹介します。
講師:
05:33

字幕

スタイルオプションを使うとSass から出力されるCSS の出力スタイルを変更することができます。このレッスンでは、その手順と出力スタイルの種類を紹介します。画面には Sass で選択することができるCSS の出力スタイルの一覧を表示しています。上から順にネスティッドエクスパンディッドコンパクトコンプレスドと読みます。デフォルでは nested が出力スタイルとして適用されています。それでは実際に出力スタイルを切り替える方法を紹介しましょう。デスクトップに予め my-sass というフォルダを作っています。この中には screen.scss というSass ファイルがありこのファイルをデフォルトの状態でコンパイルしたのが screen.css です。この2つのファイルを開いてみましょう。IDE にドラッグ & ドロップで開きます。現在は Sass ファイルを表示しています。Sass ファイルはこの様な中身になっています。それでは CSS ファイルに切り替えます。CSS ファイルはデフォルトのnested という出力スタイルを選んでコンパイルしています。nested では Sass のネストの構造がそのままインデントで表現されている様な形で出力されます。 ちょっと見慣れない形ですよね。それでは、この CSS の出力スタイルを変更してみましょう。Sass ファイルが含まれるフォルダの中でキーボードの Shift キーを押しながら右クリックをして「コマンドウインドウをここで開く」を選んでコマンドプロンプトを開きます。Mac 環境の方はその Sassファイルが含まれるフォルダをターミナルのエイリアスにドラッグ & ドロップするとその場所でターミナルが開きます。ここではスタイルオプションを使ってCSS の出力スタイルを変更します。スタイルオプションを使うにはSass コマンドの後に記号のハイフンを 2 つ続けて入力しそして style と入力します。半角スペースを空けて指定したい出力スタイルを入力します。ここでは expanded というスタイルを指定してみましょう。expanded と入力します。その後に半角スペースを空けて出力したい Sass ファイルそして出力したい CSS のファイル名を入力します。これは screen.scss をscreen.css に出力します。これで出力スタイルが expanded でCSS を書き出すということになります。 Enter キーを押して実行してみましょう。コンパイルが行われ Sass ファイルからCSS ファイルが出力されました。それでは出力された新しいCSS ファイルを確認してみましょう。出力スタイルが変わったため先ほどとは CSS の書式フォーマットが変わりました。expanded を使うとそれぞれのルールセットが1 行ごとに改行されています。比較的見慣れたスタイルと言えるのではないでしょうか。この様にコマンドラインでスタイルオプションを使うことでCSS の出力スタイルを切り替えながらSass ファイルから CSS を出力することができます。尚 IDE や GUI のアプリケーションではこのオプションを使える場合や使えない場合があります。各ソフトのヘルプ等でご確認ください。それでは各出力スタイルの詳細を紹介します。先ずは nested です。これは冒頭にも紹介した通りデフォルトの出力スタイルになります。Sass のネスト構造がこの様にインデントによって表現されて出力されます。次に expanded です。expanded では、先ほどご覧いただいた様にルールセットごとに改行が行われ比較的見やすい形で出力される様になります。 次に compact です。compact ではルールセットごとに改行が行われます。しかしルールセットの中プロパティの宣言の部分は 1 行になります。次に compressed です。compressed は最も圧縮された出力スタイルです。全ての不要なインデント改行、半角スペースを削除して圧縮した状態で出力されます。その分ファイルサイズが削減されますので開発途中は他の出力スタイルで開発を行い最終的に完成したらcompressed フォーマットで出力するというのが良いでしょう。尚 compressed フォーマットでは通常の CSS のコメントが削除されますので注意してください。ライセンス情報等の様に削除されたくない情報はそれを残すための特殊なコメントの書き方もあります。このレッスンでは Sass から出力されるCSS の出力スタイルを変更することができるスタイルオプションについて学びました。

Sass入門ガイド

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

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

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

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

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