【Sass授業一日目】Sassの設定、SassとBEMの組み合わせ

SassをVSCodeで使用する方法

SassではSCSS記法で記述した「Sassファイル」から「CSSファイル」を生成します。SassファイルからCSSファイルを生成することを「コンパイル」と呼びます。

f:id:chromiumpig:20201126103249p:plain

Sass（SCSS）の基本記法

ul{
  list-style: none;
  padding-left: 0;
  li{
    border-bottom: solid 1px;
  }
}

「&」は親セレクタを意味する入れ子になっているが子孫セレクタにはならない

a{
  color: red;
  &.-btn{
    border: solid;
  }
  &:hover{
    text-decoration: none;
    color: aqua;
  }
}

変数宣言可能

$変数名：値;

変数の色変えると色一気に変えられるので楽

$color-main: #f00;
$color-sub: #0ff;

a{
  color: $color-main;

}

文字列として変数を使用する場合は「#{変数名}」と記述します。

$pass: '../img/';
.Hero{
  background-image: url(#{$pass}hero.img);
　コンパイル結果　→　background-image: url(../img/hero.img);
}

Sass（SCSS）でファイルを分割管理

s003：Sass（SCSS）でファイルを分割管理 | JOBTECH.JP

下みたいな省略も可

@import 'parts/_header.scss';
@import 'parts/_footer.scss';
@import 'parts/_test.scss';

@import 'parts/header';
@import 'parts/footer';
@import 'parts/test';

Sass（SCSS）でよく使う記述を部品化

s004：Sass（SCSS）でよく使う記述を部品化 | JOBTECH.JP

パーツより先に読み込む

// mixin
@import 'mixin/media';
// parts
@import 'parts/header';
@import 'parts/footer';
@import 'parts/test';

「@include sp(pc)」で呼び出せば下みたいにコンパイルされる

.header {
  //共通デザイン
  padding: 40px;
  //スマホデザイン
  @include sp{
    color: red;
  }
  //PCデザイン
  @include pc{
    color: blue;
  }
}

↓

@charset "UTF-8";
.header {
  padding: 40px;
}
@media screen and (max-width: 479px) {
  .header {
    color: red;
  }
}
@media screen and (min-width: 480px) {
  .header {
    color: blue;
  }
}

mixinの定義

@mixinの呼び出し

@include

呼び出された時に記述される内容

※@content部分に記述される内容

BEMのルールとカスタマイズ

CSSの命名規則BEMのルールとカスタマイズ | JOBTECH.JP

SassとBEMを使ったときの一般的なセレクタの書き方

.HeaderPC{
  display: flex;
  justify-content: center;
  background-color: $color-dark;
 
  &_link{
    color: #fff;
  }
}

■デメリット

セレクタ名で検索できない

変則的な書き方

.HeaderPC{
  display: flex;
  justify-content: center;
  background-color: $color-dark;
}

 
.HeaderPC_link{
  color: #fff;
}

■メリット

普通のCSSと同じセレクタなので初心者が参加しやすい

・セレクタを検索できる