,,,

この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

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