所要時間約15分
そんな方向けの記事となります。この方法なら15分足らずで環境構築ができます！
Sassの環境構築を黒い画面なしで行う方法を紹介します。
なおmacとwindowsでは同じ方法で行うことが出来ます。
Preprosのインストール
Preprosという基本無料のソフトを使います。Preprosは日本語に対応していませんが、直感的に操作できるようになっています。
まずはPreprosの公式サイトにアクセスしてください。
矢印のダウンロードをクリックしてください。
mac、windows,linux版があるので選択してください。
インストールしてください。
インストールが完了すると以下の画面になります。
Preprosは無料で使えますが有料版もあります。無料で使いたい場合はcontinue trialをクリックしてください。
Preprosの基本的な使い方
まずsassという名前でフォルダを作りましょう。名前はここではsassとしましたがなんでもいいです。
sassの中に拡張子を.scssとしたファイルを作ります。
試しに以下のようにsassを書いてみます。ファイル名はtest.scssとしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | main { .main__content { margin: 20px; h1 { font-size:25px; font-weight: 600; } p { font-size:16px; margin-bottom: 16px; } ul { display: inline-block; font-size: 0; li { font-size: 16px; list-style: none; padding: 20px; } } } } |
これをcssに変換します。
作成したsassフォルダをPreprosにドラッグしてください。
test.scssをクリックしてください。以下の画面になります。
| Process Automaticlally | 自動でコンパイルする機能です。ファイルを上書き保存するたびにコンパイルされます。 |
| Prefix CSS | ベンダープレフィックスを自動でつけてくれます。 |
| Minify CSS | 自動で空白を削除してファイルを軽量化します。 |
| Create a Source Map | ブラウザでsassファイルの行数する知ることが出来るファイルを自動で生成してくれます。 |
Process Fileをクリックするとコンパイルされてcssファイルがsassフォルダに作られます。
4つの項目にチェックをつけてコンパイルしてみます。
Minify CSSによって圧縮されています。
圧縮されていない場合はこのようになります。
sassフォルダにはtest.css.mapが作られています。これがブラウザでsassファイルの行数する知ることが出来るファイルです。
最後に
所要時間：30分 ティロこんにちは、ティロといいますsassの超基本的な書き方を紹介します。環境構築がまだの人はこちらの記事をお読みください。15分程度で環境構築ができます。&n[…]