1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. DreamWeaver でSass(SCSS)を扱う

Posted on Jul 8, 2018 by matsushita shohei

DreamWeaver でSass(SCSS)を扱う

記事カテゴリー: HTML

DreamWeaver でSass(SCSS)を扱うための設定をまとめました。簡単です。

Sass(SCSS)はCSSを設定する為のファイルです。
変数や関数を使用できたり、入れ子構造が使えたりするのが特徴ですが、場合によってはメリットを感じないかもしれません。
ただレスポンシブをメディアクエリ単位ではなく、プロパティ単位で記述できるのとコンパイル(改行やコメントといった余計な要素を削除したファイルを自動保存)できる点は大きいですね。

設定方法

DreamWeaver でSass(SCSS)を扱うには下記の設定が必要となります。

  • 1.サイト設定
  • 2.CSSプリプロセッサー(コンパイル形式と出力先)の設定

出力先を指定する必要がある為、まずは「サイト→新規サイト」でサイトの定義をする必要があります。
それが終わったら、サイトの管理ウインドで作成したサイトを選択し、CSSプリプロセッサーのタブを開きます。

DreamweaverでSass(SCSS)を使うための設定(一般)

一般設定で自動コンパイルを有効にして コンパイルの形式を指定します。
個人的にはcompressedがお勧め。

あとは出力先フォルダとソースフォルダを設定したら終わります。

DreamweaverでSass(SCSS)を使うための設定(CSSプリプロセッサー)

新規作成から.scss形式のファイルを作成し、ソースフォルダに保存。
そのSCSSファイルを変更し、保存したら自動で出力先フォルダに.cssファルダが保存されています。
一度お試しあれ。

※ソースフォルダの設定が間違っていると自動コンパイルできないので注意してください。
 サブディレクトリも可なので、ルートを指定しておいて問題ないです。

※突然保存してもコンパイルされなくなった時は別のサイトを開いていませんか

この記事についての補足

画面はDreamWeaver CC 18.2 のものです。

この記事をシェアする

このカテゴリーの一覧に戻る

松下 正平

この記事の投稿者

松下 正平matsushita shohei

アドベネック代表。 WEB制作会社にてコーダーとして実務を経験し、2002年より独立。2006年アドベネック設立。長く大阪市内に住んでいましたが、今は学生時代を過ごした枚方に移住。ゲームは主に通勤時間にやっています。趣味は音楽鑑賞とサッカー観戦。 Googleのデジタルワークショップ修了しました。

  • Ps
  • Ai
  • Pr
  • Ae
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS