#はじめに
初学者がネット記事を参照にしながら、Sassについて学習した記録です。
誤りがあれば暖かく指摘頂けると幸いです。
##Sassとは
一言で、CSSを簡単に記述出来る言語です。
中には2種類あり、
SASS記法とSCSS記法がありますが私が学習したのがSCSS記法です。
理由は2点有り、
①SASS記法とCSSでは、記述ルールが全然異なる。
②SCSS記法とCSSは記述ルールがほぼ同じでわかりやすい。
②は、自分が学習しやすいというメリットの他に
エンジニアとして他の人にコードを見てもらう際にも理解してもらい易いと感じました。
##学習内容
###1.環境構築
コードエディタの拡張機能で専用ファイルをインストール
###2.ファイル構成
| ディレクトリ | HTMLファイル | SCSSファイル |
|---|---|---|
| example | example.html | ①example.scss |
コードエディタ下部にある
Watch Sassをクリック
クリックしたあと2つのファイルが追加されます。
②example.css
③example.css.map
ここで、計3つのcssファイルが制作されていますが、
編集するのは、①のみで、①の編集結果が②へ反映されるようになっておりますので、
.htmlファイルへのリンクも通常通り②をリンクさせていきます。
###3.機能
| 記号 | 内容 |
|---|---|
| & | 擬似クラスを使用する時に、クラスの前に&を付けて使用 |
| 変数 | 複数回使用するカラーを代入して使用 |
| @mixin 定義名 | 同じCSSを複数回使用する時に、定義名によって定義する |
| @include 定義名 | mixinにて定義したCSSを使用する |
| import | 他のscssファイルを反映させる(※) |
(※)@import "アドレス"; で既存のcssファイルにリンクされているscssファイルの先頭につける事でリンク
以上
今後も出来る限り学んだことをアウトプットする場として使用したいと思っています。
宜しくお願い致します。