DreamWeaver でSass(SCSS)を扱う

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

設定方法

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

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

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

DreamWeaver 設定画面

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

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

Dreamweaver SCSSの設定画面

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

ブログ一覧へ戻る
松下 正平のプロフィール写真
            

この記事の著者

松下 正平

2002年より大阪を拠点に活動。仕様の行間を読み「よきにはからう」実装力をモットーとするWeb制作・WordPress開発のフリーランス。
2019年に大阪市内から枚方市に移転。
近年はLooker Studioを活用したアクセス解析にも力を入れています。

趣味

趣味は息子とのサッカー、及びサッカー観戦。ガンバ大阪好き。
好きなアイドルはBABYMETALとsora tob sokana。
現在はまっているゲームは「スプラトゥーンレイダース」
無限食堂437階をあたりを探索中。

コーディングのご依頼お待ちしております

Wordpressの構築やレスポンシブ化など人手が欲しい時はぜひお声がけください。

このブロックが表示されている時は条件が合えば即日作業が開始できます。お気軽に条件をお送りください。

制作会社様向け詳細はこちら
両手いっぱいに広げ、コーディング案件を待っているメタラー