sass初心者の方へのざっくり説明。

はじめに

コンパイル結果などは用意していないので、下記ツールなどを使用して確認してください。

Sassの試し書きツール

Sassmeister
・ どうコンパイルされるか確認に便利です。

visual studio code の お手軽Sassコンパイラ

Easy Sass
・ 取り急ぎコンパイルできれば良い時はこれでも大丈夫です。
・ コンパイル先を指定できなさそうなので大規模プロジェクトには不向きです。

htmlなど試し書きツール

Web Maker
・ chromeの拡張機能です。
・ コンパイル結果の表示はないので上記と併用などしてください。
・ html ▼, css ▼, js ▼ をクリックでsassなどにも変更できます。

Sass参考サイト

Sassの基本
・ はじめの一歩

絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順
gulpで階層構造を維持して出力する
・GUIコンパイラはかゆいところに手が届かない。gulp-sassなら構造を保ってコンパイル可。

複数人で作業する場合の注意点

• 編集ファイルが重複しないように気をつける。
• 無理にsass機能を使用して複雑にしない。
  • 自作の mixin などはシンプルが良いです。
  • // のコメントアウトで使い方を書いておくのも良いです。
  • 説明が長くなりそうな場合.md (マークダウン) 形式でスタイルガイドのような簡単な取説を作るのもオススメです。

Sassの 基本的なもの

まずはこれを覚えれば大丈夫なもの

• コメントアウト（2種類）
  • /* cssと同じものはコンパイルされます */
  • // スラッシュ２本のコメント、コンパイルされません。1行のみですが矩形選択ができるエディタだと複数業のコメントアウトも楽です。
• ネストで記述。（説明は省略）
  • & を使用して親のセレクタを参照。
• @import
  • ファイルの読み込み
• @mixin
  • @include とセットで使います。
• %placeholder_name （プレースホルダー）
  • @extend とセットで使います。@extendされなかった場合、コンパイルされません。
  • @extend はプレースホルダー名以外にクラス名やID名も指定できます。
  • mixinとプレースホルダーの違い参考です→ https://qiita.com/one-a/items/2758511326c09200fded

慣れた頃に便利なものなど

1 : 以下は慣れた頃だととても便利に感じます。

$変数

@at-root

@content;

!default　(まだ使い方イマイチ理解してませんが、便利そうな気がします。)

#{} → 文字列のエスケープ的なものだと思います。

2 : 以下はハードル高めです。知っていると稀に便利です。

@for

@while

@each

3 : 以下はさらにハードル高いです。（まだ使った経験ありません）

@function

検証で使える(@debug/@warn)

補足

• 昔、日本語が含まれるscssファイルはコンパイルできない事がありました。（参考まで）
• コメントの注意点。以下枠内参照してください。

div {
  /* 親が空っぽの場合コメントのみになります */

  p {
    /* ここにコメントを書くようにしています */
    color: #fff;
    @at-root span {
      color: red;
    }
  }
  .test01{
    /* inner01 */
    color: #666;
    &-inner01 {
      /* .test01-inner01 */
      color: #777;
    }
    /* inner02 */
    &-inner02 {
      /* .test01-inner02 */
    }
    /* inner03 */
    &-inner03 {
      /* .test01-inner03 */
    }
    /* こんな感じにコメントはコンパイルされるので書く場所に注意してください。 */
  }
}//div
//中身が長くなりそうな場合、閉じタグの後ろに
//タグやクラス名などを書いておくとわかりやすいです。

/*
http://css2sass.herokuapp.com/

下記を上のurlで　css → sass に変換しようとすると少し残念な結果になりました。
単純な記述の場所は信用しても良さそうですが、100%信用するのは少し怖いです。
*/

.test textarea, .contact input[type="text"], .test input[type="email"], .test select {
  font-size: 1.2rem;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #333;
  background-color: #eee;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  padding: 16px;
}

$変数 の捕捉です。

変数で管理すると便利なものです。

• 色 (下記のようなエディタの拡張機能を使うとより便利だと思います。)
  • https://github.com/Taraflex/Brackets-Color-Highlighter
• z-index の値
  • 変数ファイルにまとめて書いておくと重なり順が把握しやすいです。
• 数値
  • 演算する場合などに便利です。
• 画像ファイルのパス
  • 長くて忘れがちだったり後でまとめて変更がありそうな場合に。
• メモ（小規模サイトの場合、書くものが少なかったり、
  変数にするまでもないけど忘れがちなものを...個人的には便利だと思います。）
  • //でコメントアウトして、数値などをメモ。↓例

// colors *****
$col-main: pink;
$col-sub : skyblue;

// z-index *****
$z-header : 3;
$z-footer : 3;
$z-nav    : 2;
$z-content: 1;

// 数値 *****
$mt-content: 40px;
$mt-content-sp: $mt-content / 2;

// memo *****
// font-weight 小, 中, 大 → 200, 300, 600
// font-size 小, 中, 大 → 1.2rem, 1.4rem, 1.8rem

@mixin の捕捉です。

/*****
mixinはプロパティの値を変数で渡しておくと、値を変更することも可能です。
但し、あまり複雑にすると複数人作業などの場合、書いた人しか使えなかったりするので注意が必要です。
*****/

/* 基本的な書き方（値は常に同じ） */
@mixin m-col-01 {
  color: yellow;
}
.col-01 {
  @include m-col-01;
}


/* 値を変数で渡す書き方 */
// @mixin ミックスイン名(変数名:デフォルトにしたい値)
@mixin m-col-02($var-col: pink) {
  // スタイルの値の箇所に変数名を書いておく。
  color: $var-col;
}
.col-02-1 {
  // 普通に呼ぶとデフォルトとして指定したpinkが渡される。
  @include m-col-02;
}
.col-02-2 {
  // ミックスイン名の後ろに (別の値) を指定すると値が上書きされる。
  @include m-col-02(skyblue);
}


/* 複数の変数を指定する場合 */
// 複数指定する場合は カンマ で区切って書く。最後のカンマは書かない（エラーとなってコンパイルされない場合がある為）。
@mixin m-col-03($var-col: pink, $var-dpl: block, $var-tal: center) {
  width: 100%; //変更する必要のない値は普通に書き込む。
  color: $var-col;
  display: $var-dpl;
  text-align: $var-tal;
}
.col-03-1 {
  @include m-col-03;
}
.col-03-2 {
  @include m-col-03(skyblue, table, left);
}
.col-03-3 {
  // 2番目を飛ばして3番目を変更したいなどの場合は変数名も一緒に書く。
  @include m-col-03(yellowgreen, $var-tal: right);
}

@at-root の捕捉です。

<!-- サンプルhtmlです。 -->
<section>
  <div class="foo">
    fooです。
    <div class="bar">
      barです。
      <p>段落です。</p>
    </div>
  </div>
</section>
<section id="test">
  <div class="foo">
    fooです。
    <div class="bar">
      barです。
      <p>段落です。</p>
    </div>
  </div>
</section>

/*****
scssサンプル1
@at-rootを使う / コンパイル ◯
sass、コンパイル結果共に理想的になります。
*****/
.foo {
  color: skyblue;
    .bar {
      color: pink;
    }
    @at-root #test .bar {
      /* @at-rootを使うと親を参照しません */
      /* 親を参照したくないけど内容的にここに記述したい!という場合など便利です */
      color: red;
    }
    p{
      color: yellowgreen;
    }
}//.foo

/*****
scssサンプル
@at-rootを使わない / コンパイル △
関連するスタイルが離れてコンパイル結果の視認性などが悪いです。
*****/
.foo {
  color: skyblue;
    .bar {
      color: pink;
    }
    p{
      color: yellowgreen;
    }
}//.foo

#test .foo .bar {
  /* @at-rootを使わずに正確に記述するには.fooから出さないといけないので、
  この位置に記述することになります。
  .bar関連のスタイルが離れていて不便だったりします */
  color: red;
}

/*****
scssサンプル3
@at-rootを使わない / コンパイル ◯
希望通りのコンパイル結果ですが、sassが汚くなり手間もかかります。
*****/
.foo {
  color: skyblue;
    .bar {
      color: pink;
    }
}//.foo
#test .bar {
  /* @at-rootなし */
  color: red;
}
.foo {
    p{
      color: yellowgreen;
    }
}//.foo

/*****
scssサンプル4
@at-rootを使わない / コンパイル ×
コンパイル結果のID、クラスの順が記述ミスとなりスタイルが当たりません。
*****/
.foo {
  color: skyblue;
    .bar {
      color: pink;
    }
    #test .bar {
      /* @at-rootなし */
      color: blue;
    }
    p{
      color: yellowgreen;
    }
}//.foo

@content; の捕捉です。

http://kanapple.net/study/archives/51
↑古い記事ですがわかりやすいと思います。
以下は上記以外で私が活用していたサンプルです。
（以下、長々と書きましたが、上記urlのメディアクエリでの活用が最も活用できそうな気がしてきました。）

<div>@content; の捕捉1<br>
  <span class="icon-01">四角のアイコン</span>
</div>
<div>
  <span class="icon-02">丸のアイコン</span>
</div><br><br>
<div>@content; の捕捉2<br>
  <span class="icon-03">四角のアイコン</span>
</div>
<div>
  <span class="icon-04">丸のアイコン</span>
</div><br><br>
<div>@content; の捕捉3<br>
  <span class="icon-05">四角のアイコン</span>
</div>
<div>
  <span class="icon-06">丸のアイコン</span>
</div>

/*************** @content; の捕捉1 ***************/
/*
共通部分が多いけど、ちょっとだけ個別のスタイルをあてたいものに便利です。
*/
@mixin mx-icon01 {
  font-size: 1.2rem;
  position: relative;
  &::before {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    line-height: 1;
    top: 50%;
    margin-top: -0.5em;
    @content;
  }
}//@mixin

.icon-01 {
  padding-left: 1.5em;
  @include mx-icon01{
    content: "◆";
    color: pink;
    left: 0;
  }
}//.icon-01
.icon-02 {
  padding-right: 1.5em;
  @include mx-icon01{
    content: "●";
    color: skyblue;
    right: 0;
  }
}//.icon-02

/*************** @content; の捕捉2 ***************/
/*
重複する記述が多い場合はプレースホルダーも活用した方が
コンパイル結果がスッキリします。
*/
%ph-icon02 {
  font-size: 1.2rem;
  position: relative;
  &::before {
    display: inline-block;
    position: absolute;
    width: 2em;
    height: 1em;
    line-height: 1;
    top: 50%;
    margin-top: -0.5em;
  }
}

@mixin mx-icon02 {
  @extend %ph-icon02;
  &::before {
    @content;
  }
}//@mixin

.icon-03 {
  padding-left: 2.5em;
  @include mx-icon02 {
    content: "◆◆";
    color: crimson;
    left: 0;
  }
}//.icon-03
.icon-04 {
  padding-right: 2.5em;
  @include mx-icon02{
    content: "●●";
    color: darkblue;
    right: 0;
  }
}//.icon-04

/*************** @content; の捕捉3 ***************/
/*
プレースホルダーのみでもコンパイル結果はスッキリです。
・sassがほんの少し記述が増える
・beforeにしたっけafterにしたっけと悩む
・複数人作業だとbefore, afterどっち使う？などのルールを意識せずに済む

など、2と3の差はその程度なので、お好みで。
*/
%ph-icon03 {
  font-size: 1.2rem;
  position: relative;
  &::before {
    display: inline-block;
    position: absolute;
    width: 2em;
    height: 1em;
    line-height: 1;
    top: 50%;
    margin-top: -0.5em;
  }
}

.icon-05 {
  @extend %ph-icon03;
  padding-left: 2.5em;
  &::before {
    content: "◆◆";
    color: green;
    left: 0;
  }
}//.icon-05
.icon-06 {
  @extend %ph-icon03;
  padding-right: 2.5em;
  &::before {
    content: "●●";
    color: darkorange;
    right: 0;
  }
}//.icon-06

#{} の捕捉です。

//例えばこんな使い方的なものです。
.test {
  &-inner01 &-sub {//問題なし。
    color: pink;
  }
  &-inner01, &-inner02 {//問題なし。
    color: skyblue;
  }
  &-inner01#{&}-inner02 {//親を参照したクラス名を連続させる記述は#{}で&を囲わないとエラーになりました。
    color: yellowgreen;
  }
  &-inner01.item {//2つめが親を参照しなければ問題なし。
    color: orange;
  }
}//.test