Dreamweaver CCにSass環境を構築します。
- 1.SCSSファイルを用意する
- まずは普通にindex.htmlを作ってサイト設定を登録します。
そのあと「新規ドキュメント」ウィンドウからSCSSファイルを作成します。
名前はとりあえずstyle.scssとかにしてください。
- 2.SCSSファイルになんか書く
- 新規作成したSCSSファイルを開き、Sassを書いてみます。
とりあえず以下に参考コードを置いておきます。#toppage { h1 { font-family: 'Mplus 1p' !important; } h3 a { display: inline-block; padding: 20px 50px; margin: 5% auto; border: solid 2px #fff; border-radius: 6px; &:hover { color: #333; background: #fff; text-shadow: none; } } }
上記のコードは当サイトの構築に使用しているSassの一部です。 - 3.コンパイルする
- Sassを書いて保存したら、「ファイル」タブに表示されているstyle.scssを右クリックし、「コンパイル」を押下してください。
- 4.完成
- コンパイルしたらstyle.scssと同じディレクトリにstyle.cssというファイルができているはずです。それを開いてみましょう。
以下のようなCSSが作成されていると思います。#toppage h1 { font-family: 'Mplus 1p' !important; } #toppage h3 a { display: inline-block; padding: 20px 50px; margin: 5% auto; border: solid 2px #fff; border-radius: 6px; } #toppage h3 a:hover { color: #333; background: #fff; text-shadow: none; }
ちゃんとコンパイルされずError: Invalid CSS after〜とかいうエラーメッセージが出ていた場合は、どこかに構文ミスがあるということです。
逆に、既存のCSSをSassやSCSSにコンパイルしてくれるサービスもあります。
CSS 2 SASS/SCSS CONVERTER