Sass入門ガイド

sourcemap ソースマップ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
sourcemapオプションを使うと、デバッグのために使うソースマップファイルを出力できます。ここでは、その手順を紹介します。
講師:
03:42

字幕

ソースマップオプションを使うとデバッグのために使うソースマップファイルを出力できます。このレッスンではその手順を紹介します。あらかじめデスクトップにはmy-sass というフォルダが作成されています。このフォルダの中にはSass ファイルとその Sass ファイルを元にして出力したCSS ファイルが入っています。こちらのフォルダはSass ファイルを CSS にコンパイルする時に使われるキャッシュですので無視してください。それでは Sass ファイルとCSSファイルをIDE にドラッグ & ドロップして開いてみましょう。こちらが Sass ファイルです。Sassファイルの中身には様々なスタイルが定義されており大体 130 行程度のSassファイルになっています。それを元に出力した CSS ファイルはやはり同じようにスタイルが定義され大体 100 行程度の CSSフ ァイルです。それでは、この Sass ファイルからCSS ファイルを出力する時に合わせてデバッグのために使うソースマップファイルを出力するようにしてみましょう。Sass ファイルが置かれているフォルダでキーボードの Shift キーを押しながら右クリックをします。 オンテキストメニューから「コマンドウィンドウをここで開く」を選びこの Sass ファイルがある場所でコマンドプロンプトを開きます。尚 Mac 環境では処理したい Sass ファイルが入っているフォルダをターミナルのエイリアスにドラッグ & ドロップして開くとターミナルが、そのフォルダを基準として開きます。では実際にソースマップオプションを使ってみましょう。ソースマップオークションを使うにはSass コマンドに続いて半角スペースを空け記号のハイフンを 2 つ入力しその後に sourcemap と入力します。更に半角スペースを空けてソースマップを出力したい元となる Sass ファイルのファイル名これは screen.scss です。そして通常通りコロンを挟んでCSS ファイルの名前を入力します。これでコマンドを実行するとSass ファイルからCSS ファイルのコンパイル時に合わせてソースマップファイルも出力される様になります。こちらの Explore にご注目ください。コマンドを実行してみます。Enter キーを押します。Sass ファイルから CSS ファイルのコンパイルが行われました。 この時拡張子に.mapという新しいファイルが生成されていることが分かります。この.mapという拡張子のファイルがソースマップファイルになります。ソースマップファイルを使うとSass から出力された CSS をWeb ブラウザでデバッグする時に大変便利な機能が詰まっています。尚ソースマップオプションを使ってSass ファイルから CSS ファイルをコンパイルした時その CSS ファイルの末尾にはこの用にソースマップ用のコメントが入っています。このコメントが出力されていないとソースマップファイルは正常に動作しませんので注意してください。このレッスンではデバッグのために使うソースマップファイルを出力するためのソースマップオプションの使い方について学びました。

Sass入門ガイド

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

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

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

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

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