dreamweaverでsass

Dreamweaver CC 2017 Beta版なら簡単な設定でsassが使える

進化したDreamweaver CC 2017 Betaでは最初からcssプリプロセッサーが入っているので、別のソフトをインストルせずsassファイルをcssファイルへコンパイルすることができます。

簡単な設定でsassを導入する事ができます。

sassを覚えてみたいへど、設定が難しそうということで躊躇していた方はこの機会に是非トライして頂きたいです。
sassを覚えればcssコーディングがかなり楽になるのでお勧めです。

今回はwindows環境での設定手順を解説します。

まずはDreamweaver CC 2017 Beta版をダウンロードします。
ダウンロードはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

新規サイトの作成

まずは練習用のサイトを作成します。
上部メニュー>サイトをクリックし、新規サイトをクリックします。

sassの設定

サイト設定

まずは練習用のサイトで使用するフォルダを作成します。例としてデスクトップに「website」というフォルダを作成し、その中にscssファイルを入れる「sass」フォルダとcssファイルを入れる「css」フォルダを用意します。

sassの設定

サイト名は「sassの練習」とし、ローカルサイトフォルダはデスクトップに作成した「website」フォルダを選択します。

sassの設定

CSSプリプロセッサー>一般を選択して、ファイルの保存時に自動コンパイルを有効にするにチェック入れます。

sassの設定

CSSプリプロセッサー>ソースと出力を選択して、出力フォルダーを定義を、デスクトップに作成した「website」フォルダの「css」を指定します。
このフォルダにコンパイルしたcssフォルダが入ります。

続いて、ソースフォルダーを、デスクトップに作成した「website」フォルダの「sass」を指定します。
このフォルダにscssファイルを入れます。

sassの設定

scssファイルの作成

デスクトップに作成した「website」フォルダの「sass」フォルダにscssファイルを作成して入れます。
適当にtest.scssという名前にします。※拡張子を.sassにするとコンパイルエラーが起こるので.scssの拡張子にします。

sassの設定

ソースコードは例で以下のコードを入れます。

#main{
    background-color:#fff;
    .content{
        background-color:#eee;  
        color:#000;
        .h1title{
            font-size:16px;
        }
    }
}

test.scssのファイルを右クリックし、「コンパイル」を実行すると、「css」フォルダ内にコンパイルされたtest.cssのファイルが生成されます。
※ファイル内容を更新するだけでも自動でファイルが生成されます。

sassの設定

cssプリプロセッサー部分でcssの出力スタイルを「compressed」にすると

sassの設定

この用に圧縮されたcssファイルを生成できます。これによりファイルの容量が軽減され、seo的にも良いです。

sassの設定

このようにDreamweaver CC 2017 Beta版では、最初っからcssプリプロセッサーが内蔵されているので、簡単にsassファイルのコンパイルができます。

便利なのでぜひダウンロードして試してみてください。

Dreamweaver CC 2017 Beta版のダウンロードはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です