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

関連記事

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress

【リリース】新サービス「プロモーションビデオ制作」

サービス内容に新しく「プロモーションビデオ制作」が加わりました。インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベン...続きを読む

2020.02.16

【デザイン】ポップでグラフィカルなシングルページデザインのWEBサイトまとめ

WEBサイトのコンテンツ(内容)を1ページに収めて掲載をするシングルページデザイン。コンテンツが多い分、ページは縦に長くなってしまいますが、その長さを生かしてデザインされたポップでグラフィカルなWEBサイトをまとめてみました。 Chilicongraphic デザイン...続きを読む

2015.02.15インスピレーション

【デザイン】フード&ドリンクのメニューデザインまとめ

先日、レストランの店舗様のWEBサイトやメニュー表、名刺などのデザインワークスを手掛けさせていただくことになりました。 今日は、フードやドリンクのメニューデザインで参考になったデザインワークスのまとめです。 Discover YOUR WAY Cafe - Patra...続きを読む

2015.02.15インスピレーション