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

関連記事

美容室グランディール様WEBサイト制作

富士宮市にある『美容室グランディール』様のWEBサイトを制作いたしました。グランディール様の店内のイメージであるナチュラルで癒される空間をWEBサイト上でも感じていただけるようにデザインをいたしました。 [gallery link="file" columns="4...続きを読む

2015.02.14WEBサイト制作美容室

【WP】ソーシャルボタンを設置できる「WP Social Bookmarking Light」の導入方法

ソーシャルメディアを通じて「いいね」と評価される記事が共有され多くの人に広がることは、第三者から好評を得ている、評判がいいことが多いと思います。 またSEOにおいては、内容が良いものはより上位に掲載されるという考え方があり、ソーシャルメディアで評価されることはSEO対策にも...続きを読む

2015.04.14WordPress

【WP】author.phpを使用したページでユーザー名が表示されない?

ワードプレスでは、テーマに[author.php]を用いると、ユーザーアカウント事の記事の一覧ページを作成することができます。[author.php]は、アーカイブページの分類に入りますので、[author.php]が無い場合は[archive.php]が反映されます。 ユ...続きを読む

2018.08.10WordPress

【フォト】港町焼津の新年の漁船・大漁旗・富士山

静岡県焼津市では新年三ヶ日になると、漁船に大漁旗が掲げられた姿をみることができます。色とりどりの大漁旗が晴天の青空にとても映えます。天気の良い日は富士山と一緒にみることもできます。 フォトギャラリー ※写真をクリックすると拡大表示します。[gallery link="fi...続きを読む

2017.01.03フォトギャラリー

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー