【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をコンパイルする方法になります。

関連記事

【デザイン】HTML5を使用したアニメーションサイト

HTML5より新しく登場した「Canvas」などによって、AdobeのFlashのような動的な2次元グラフィックを、HTML形式ファイルをベースに制作することができるようになりました。 今後、デザインとして設計されるのはもちろん、アニメーションやゲーム、WEBアプリケー...続きを読む

2015.02.16インスピレーション

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

ウェブサイトの制作を頼むときに知っておきたい専門用語

お店や会社のホームページを持ちたいと思うとき、制作できる方や制作会社を探しますが、説明される内容や掲載されている内容に専門用語が多く、難しいと思う方もいらっしゃると思います。今回は、ホームページの制作でよく出てくる専門用語を解説したいと思います。 ウェブサイトの制作は実際の...続きを読む

2018.02.09WEBサイト制作レンタルサーバ