今さらSassを使ってみたい【超簡単!導入編】

Sass

【導入前日編】から4ヶ月ほど経ってしまいましたが、
その間、実際にSassを導入してサイトを制作しておりました!

この記事ではDreamweaverでの導入方法をまとめました。

超簡単!導入方法 ~Dreamweaver~

「Sass」「Sass 使い方」で検索すると、多くの先駆者たちが色々な方法でSassを導入しています。
よくある方法は

  1. Rubyをインストール、さらに黒い画面でごにょごにょと設定する
  2. Sassのデータ(.SCSS)を.CSSへ変換するためのサービスをインストール

です。

私も初めはそんな流れでSassを使い始めたのですが、
変換サービスをいちいち起動するのが面倒くさい!
そもそもRubyをインストールする段階で敷居が高い!黒い画面!

…Sassって本当にみんな使っているの?という感じでした。

そこでさらに調べてたどり着いた方法は「Dreamweaverを使う」です。
普段からDreamweaverを使用している人は、Sassの導入が3分ぐらいで終わります。

是非どうぞ!

Dreamweaverの設定方法

  1. Dreamweaverの上部メニュー「サイト」→「新規サイト」を選択
  2. 「サイト名」「ローカルサイトフォルダー」を普段通りに入力
  3. 左メニュー「CSSプリプロセッサー」→「ソースと出力」を選択
  4. 「CSS出力」を「ソースと同じフォルダー」または「出力フォルダーを定義」を選択します。

    .SCSSにコードをゴリゴリ書いて保存すると、.CSSが勝手に作成されます。その作成先のことですね。サイト構成によってお好みでどうぞ。
    ちなみに.CSSは保存するたんびに勝手に更新されてゆきます。楽ちん。

  5. 左メニュー「CSSプリプロセッサー」→「一般」を選択
  6. 「SASS/SCSS: Output file style」を変更

    .CSSにコードが保存される時のスタイルのことですね。
    スタイルの違いはこんな感じです↓

    nasted

    body {
    color: skyblue;
    background: whitesmoke;
    font-size: 14px; }
    
    .hoge {
    width: 100px;
    height: 100px; }
    

    compact

    body { color: skyblue; background: whitesmoke; font-size: 14px; }
    
    .hoge { width: 100px; height: 100px; }
    

    compressed

    body{color:skyblue;background:whitesmoke;font-size:14px}.hoge{width:100px;height:100px}

    expanted

    body {
    color: skyblue;
    background: whitesmoke;
    font-size: 14px;
    }
    
    .hoge {
    width: 100px;
    height: 100px;
    }q
    

    実際にいじるのは.SCSSなので、作成される.CSSは「compressed」でいいんじゃないかなと思っています。見ないですし。
    見やすいスタイルは「nasted」「expanted」ですかね!

    これで設定はすべておしまい!簡単すぎですね。

SCSSファイルを作る

最後に、実際にコードを書いてゆく.SCSSを作ります。

  1. 上部メニュー「表示」→「新規ドキュメント」→「SCSS」を選択→作成
  2. .CSSが本当に自動で作られるのかを見届けるために、.SCSSにコードを書いてみる
  3. CSSを確認

更新されていますか?されていたら成功です!

Sass導入方法でした。
次回はSassの便利なアレコレを記事にしようと思います!

Kaorin
まめなりでコーディング担当のかおりんです。 コーディングを楽しくできるように勉強したことを記事にしたいな。
%d人のブロガーが「いいね」をつけました。