Sassまとめ【自分用】

Sassまとめ 自分の記録
manami
manami

こんにちは、田中真奈美( @momo29_aus )です。

この記事はTwitterなど見かけた有識者の知識や、職業訓練校で学んだことなどをまとめた「Sass」の自分用メモです。

Sassの種類

SASS記法とSCSS記法と2種類ある
⇒SCSS記法「style.scss」がわかりやすいはず

※この記事ではSCSS記法についてまとめています

SCSSでの記述(例)

@charset "UTF-8";
@import "_reset.scss"; // @importを使ってファイルを読み込む

// 変数の設定

// mixinの設定
①charsetを指定する
②@importを使ってファイルを読み込む
③変数を設定する
④mixinを設定する
なお、必ずこの順番で書かなければいけないというわけではないです!
次から詳細に説明します。

変数の設定

// 変数の設定
$main-color: #xxx;
$unit: 8px;
$point-tablet: 979px;
$point-lsp: 640px;
$point-sp: 480px;

mixin

// mixin
@mixin tablet {
 @media ( max-width: $point-tablet ) {
  @content;
 }
}

@mixin lsp {
 @media ( max-width: $point-lsp ) {
  @content;
 }
}

@mixin sp {
 @media ( max-width: $point-sp ) {
  @content;
 }
}

具体的な使い方

// ex
header {
 width: 100%;
 border-bottom: 4px solid $main-color;
}
.g-nav a {
 display: block;
 padding: 10px 20px;
 color: $main-color;
 @include sp {
  padding: 10px 0;
  font-size: 14px;
  text-align: center;
 }
 &:hover {
  color: #xxx;
 }
}

(中略)
&>a {
 display: block;
 padding: $unit*2;
 color: #xxx;
 @include lsp {
  padding: $unit*2;
  text-align: center;
  font-size: 14px;
 }
 &:hover {
  text-decoration: underline;
 }
}

パーシャルファイルとは?

_(アンダースコア)をファイルの前につけることでパーシャルファイル化することができます

@importを使って複数のファイルを同時に読み込める
@import機能を使う場合、importで読み込むファイルは、コンパイルする必要はないのでパーシャルファイルにする

複数のパーシャルファイルを読み込む場合は読み込む順番に気をつける

Sassを使う準備( VS Code 、Live Sass Compilerでの設定 )

設定ファイルの記述を変更することで、コンパイルするCSSファイルの「記述形式」「CSSの拡張子」「CSSファイルの保存場所」などを設定できます。

VScodeの拡張機能→Live Sass Compilerの設定(歯車マーク)→拡張機能の設定

下記の記述を変更します。

"liveSassCompile.settings.formats": [
  {
    "format" : "compresed",
    "extensitionName" : ".css",
    "savePath" : "~/../css"
  }
]

format:compressed→圧縮されてコンパイルされる

expanded→圧縮されずにコンパイルされる

(他にもnested, compactなどが設定できます。)

extensitionName:コンパイル後のファイルの拡張子を設定します

savePath:コンパイル後のファイルをどの階層に置くか、フォルダ名を何にするか設定します

“../css”にしておけば、SCSSフォルダと同じ階層にCSSファルダがつくられて、その中にstyle.cssが生成されます

Sassの使い方(コンパイルの仕方)

①SCSSフォルダをつくり、その中のstyle.cssに必要な記述をしたら保存
②「Watch Sass」を押してコンパイルする
③コンパイルされたCSSファイル(style.css)をいつものようにhead内のリンクで読み込む
index.htmlを開いている状態で下のメニュー欄に表示されている「Watch Sass」を押すとコンパイルが開始します。
watch-sassの説明
1度Watch Sassを押せば、エディタと閉じるまでの間style.scssを保存することで自動的にコンパイルが継続します。

フォルダの構造

VScodeでは、Live Sass Compilerを設定することでCSSフォルダやstyle.cssが「Watch Sass」を押すことで自動生成されます。

階層はこんな感じです↓

階層の説明画像

上記画像内で自分で作る必要があるのは、

style.scssファイルとそれを入れるSCSSフォルダ、それとindex.htmlです。

もちろん、フォルダ名やファイル名は任意で決められます。

※参考にしたいSassの記述

コメント

タイトルとURLをコピーしました