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

関連記事

無料AIツールのセキュリティ対策|絶対知っておきたい5つの安全ルール

「AIを使いたいけれど、セキュリティが不安…」 そんな声を、中小企業・個人事業主の方からよく聞きます。 無料AIツールは便利ですが、情報管理の意識を少し変えないと、思わぬトラブルにつながることもあります。 本記事では、専門知識がなくて...続きを読む

2025.11.28

デューラーが測った“美”〜人体比例論と北方ルネサンスの論理〜

美しさは“描く”だけじゃなく“測る”もの? デザインやアートの現場で、よくこんな会話が交わされます。 「この人物、なんかバランス悪くない?」 「感覚ではそうだけど、どこがどう悪いのか説明しづらいんだよね」 そんなとき、デューラーの仕事を知ると少し見え方が変わってきます。 ...続きを読む

2025.07.21カノンデザイン論ルネサンス

「アイミツ」にて弊社を紹介していただきました

株式会社ユニラボ ( unilabo Inc. )が運営する「アイミツ」にて、『「本当におすすめできる9社をピックアップ」静岡市のホームページ制作会社をアイミツが徹底調査! 』として、デザインスタジオ・エフを紹介していただきました! https://imit...続きを読む

2020.11.27

【無料】商用利用OKシームレステクスチャ「玄武岩(バサルト)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。玄武岩(バサルト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 テ...続きを読む

2025.07.29シームレステクスチャ

美容室グランディール様ロゴ制作

富士宮市にある『美容室グランディール』様のロゴを制作いたしました。 お店のお名前である「grandir(グランディール)」はフランス語で「成長する・育つ・大きくなる」という意味を持つことから芽が育つ、そしてお客様から愛されるお店をなることをイメージしてハートをモチーフに...続きを読む

2015.02.06ロゴ制作美容室