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

関連記事

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

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

2015.03.03HTMLコーディング

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー

【デザイン】印象に残るビジネスカードデザイン第2弾

以前に「印象に残るビジネスカードデザイン」をテーマにアイディアにあふれるビジネスカード(名刺)をご紹介しました。今回は第2弾目です。 今回もちょっと変わった、もらうと印象に残るビジネスカード(名刺)の事例をご紹介します。 TAM Cargo:Box Busines...続きを読む

2015.04.16インスピレーション

【デザイン】室内の壁をクリエイティブに飾るデザインワーク

店舗やオフィスなど単調な壁面、インテリアや照明がないと少し寂しい雰囲気にもなります。 そのような室内の壁をクリエイティブに飾るアートワークをまとめてみました。 Smartdeco - Wall decoration design: asterisco*l...続きを読む

2015.02.14インスピレーション

【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。 基本的な使い方 導入は簡単、ライブラリを読み込むだけで実装でき、設置後は...続きを読む

2018.02.27HTMLコーディング