SASS SCSS について、、

sassをscssの書き方で書く

入れ子(ネスト)

.btn {
    display:block;
    span{
        display:inline-block;
    }
}

コンパイルされると、、
.btnと.btn のなかのspanにかかっている
コンパイルとは、SASSで書いたものをCSSになおすこと

変数

$color-main: #333;
.btn {
    background:$color-main;
}

アンパサンド

.header {
    &_title {
    font-size:30px;
    }
}

.header_titleにかかっている

継承(mixin)

@mixin desktop {
 @media screen and (min-width:992px){
  @content;
  }
}
.p {
  font-size: 16px;
  @include desktop {
    font-size: 20px;
  }
}

メディアクエリがすぐかける
変数的な、、変数とは違って、いっぱい書いてある箱みたいなもの
@mixin 自分で考えた変数名 {}
呼び出すときは、@include 自分で考えた変数名 ;
あと引数も設定でき、変更したいプロパティの値だけ変えていくこともできる

//引数も設定できる
@mixin header($fontSize) {
  font-size: $fontsize;
}
.header {
  @include header(20px)
}
//初期値も設定できる
@mixin footer($color:#aaa, $width:200px){
  color: $color;
  width: $width;
}
.footer {
  @include footer(#ccc,6px);
}

ファイルを分割管理できる

@import"variable/_breakpoint";
@import"variable/_color";
@import"base/_global";
@import"layout/_section";
scssフォルダ内のstyle.scssにこれをかくと、variableフォルダ内の_breakpointファイルと_colorファイルなどを呼び込める
そのscssフォルダをcssに読み込んでstyle.css一つで管理する

が基本。。

Sassそのままではブラウザが認識してくれない。なので、Sassから普通のCSSを書きだす（コンパイル）仕組みを作る。コンパイルは、タスクランナー系（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動化するのが一般的。

css設計としてのFLOCSS

FLOCSSとは、CSSを以下のように「3つのレイヤー」と「その子レイヤー（3つ）」に分けて構築しましょう、という考え方です。
・Foundation
・Layout
・Object
┗ Component
┗ Project
┗ Utility

上記のレイヤーの各概要は以下の通りです。
・Foundation：
ブラウザのデフォルトスタイルの初期化や基本的なスタイル（全体の背景や基本となるタイポグラフィなど）を定義。
Foundation　サイト全体のデフォルトスタイルを管理。
├ reset.scss
├ base.scss
├ variable.scss　サイト全体で使える変数
├ mixin　サイト全体で使えるmixnを管理

・Layout：
ヘッダー、フッター、サイドバー、メインコンテンツエリアなど、サイト全体のブロックを定義。
Layout　各ページを構成するサイト全体で共通したエリアを管理。
├ l-header.scss
├ l-main.scss
├ l-footer.scss

・Object：
サイト内で繰り返されるパターンを定義。
Object　サイト全体で再利用できるパターンを持つモジュールを管理

・Component：
再利用できる最も小さな単位のモジュールを定義します。ボタン、ナビゲーション、ページネーションなど。
├ Component　小さな単位のモジュールを管理（ボタンなど）
　├ c-button.scss
　├ c-grid.scss
　├ …

・Project：
サイトの中で固有の見た目を有するものを定義します。弊社のような求人サービスだと求人リストのリスト表示などがこれにあたります。
├ Project　いくつかの↑Componentと、他の要素によって構成される大きな単位のモジュールを管理
　├ p-card.scss
　├ p-profile.scss
　├ ...

・Utility：
細かく見た目の調整を行う時に必要なお役立ちスタイルを定義します。clearfixやmarginの調整、テキストの配置、横幅指定など。
├ Utility ComponentとProjectのモディファイア（パターン）で解決することができないスタイル、また、調整のための便利クラスなどを管理。
　├ u-utility.scss
　├ u-color.scss
　├ u-margin.scss
　├ u-padding.scss

(├ Theme テーマによる色の切り替えなど、ページ単位の色違いとか
　├ t-blue.scss
　├ ...)

コピペですが分かりやすかったので、まとめました