【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことをご紹介しました。

今回は、Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法をご紹介します。

Adobe Dreamweaver CC で簡単コンパイル

Adobe Dreamweaver CC ではSass・SCSSは標準機能として制作、編集が可能になっております。Adobe Dreamweaver CCにて新規にドキュメントを制作するときにSassやSCSSをドキュメントのタイプとして選択することが可能です。

拡張子が.sass、または.scssのファイルを作成することができます。

SassやSCSSの構文に従い、CSSの内容を記述します。

Sass・SCSSをコンパイルする場合は、Adobe Dreamweaver CC のメニューバーにある「ツール」から「コンパイル」をクリックします。

コンパイルは以上で完了します。Adobe Dreamweaver CC でサイトの設定をしない場合は、.sassまたは.scssのファイルと同じフォルダにCSSファイルが生成されます。

.sassまたは.scssの構文に間違いがあった場合は、生成されたCSSファイルの内容にエラーの表記が追記されますので、CSSファイルの内容をチェックします。

以上が、基本的なAdobe Dreamweaver CCを使ったSass・SCSSをコンパイルする方法になります。

関連記事

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

モバイル端末の画面サイズまとめ

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機...続きを読む

2015.02.06HTMLコーディング

インクジェットプリンタでクリーニング機能を実施しても印刷が汚れてしまう

みなさんはインクジェットプリンタで写真などを印刷したときに、印刷した面がインクで汚れていたという経験はございませんか? 写真などをキレイに印刷するため光沢紙を使ったときにインクの汚れがついてしまうとやりきれない気持ちになります。 印刷した面がインクで汚れてしまう場合、インク...続きを読む

2018.03.05プリンタ印刷

【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。 今回は、Tooltips(吹き出し)を実...続きを読む

2015.03.03HTMLコーディング

【ソーシャルメディア】ソーシャルマーケティングの重要性

facebookやtwitter、Googoleプラスやyoutubeなどのソーシャルメディアをビジネスとしてマーケティングに取り込む動向が続いています。現在、ブロガーや中小企業の約75%が現在、などのTwitterやFacebook、LinkedInのようなソーシャルメディ...続きを読む

2015.02.17WEB