Sassパーシャルのディレクトリ構成と役割メモ

Sassの個人学習用備忘録です。復習したい箇所を中心に記述しているので端折っている部分もございます故。
# 前談
Sassを採用する理由の一つに`パーシャル`という仕組みでのメンテナンス性向上を図れる。
この構成はプロジェクトごとに変わりますがとりあえずなんとなくイメージできるように書き留めておきます。


- ソースコードは一例です。
- blockなどの用語はBEM記法を想定してます。

加筆中....

# シンプル構成
![スクリーンショット 2020-12-12 6.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/1bf8c467-509f-2b95-fc35-a356ca5cf0bc.png)


コマンド 

```
touch index.html | mkdir img | 
mkdir css | touch css/style.css | 
mkdir sass | touch sass/main.scss | touch sass/_base.scss | touch sass/_layout.scss | touch sass/_components.scss | touch sass/_typography.scss |
touch package.json
```


# 詳細パターン
![スクリーンショット 2020-11-10 21.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/f5fa871c-e70a-5f66-12ad-e5cfe8de4417.png)

コマンド

最低限必要そうなファイル構成のコマンドメモ。

```
cd sass | touch main.scss
```

pwdはsassディレクトリ↓

```
mkdir abstracts | touch abstracts/_mixins.scss | touch abstracts/_variables.scss ｜
mkdir base | touch base/_base.scss | touch base/_animaitions.scss | touch base/_typography.scss | touch base/_utilties.scss |
mkdir components | touch components/_button.scss | touch components/_card.scss |
mkdir layout | touch layout/_header.scss | touch layout/_footer.scss | touch layout/_navigation.scss |
mkdir pages | touch pages/_home.scss
```


# 【ディレクトリ】abstracts
`変数や関数`が記述されたファイルの置き場

※以下ファイルについて

### _functions.scss
ｘｘｘ

### _mixins.scss
`ルールセット`か`プロパティ`を`@mixin`で括ったデータを記述する

```sass
@mixin clearfix{
    &::after{
        content: "";
        display: table;
        clear:both;
    }
}
```

### _variables.scss
`変数`データを記述する

```sass
//COLOR
$color-primary: #7ed56f;
$color-primary-light: #55c57a;
$color-primary-dark: #28b485;

//GRID
$grid-width:114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;
```


# 【ディレクトリ】base
サイトと通じて`ほぼ共通のcssデータ`や`アニメーション`などの重たい(土台のイメージ?)のファイルの置き場

※以下ファイルについて

### _animaitions.scss
`transform`などを使った動きをつけるプロパティを`@keyframes`で括ったデータを記述する

```sass
@keyframes moveInLeft{
    0%{
        opacity: 0;
        transform: translateX(-10rem) rotate(-50deg);
    }
    
    80%{
        transform: translateX(2rem);
    }
    
    100%{
        opacity: 1;
        transform: translate(0);
    }
}
```

### _base.scss
`ユニバーサルセレクタ`や`ｈｔｍｌ`や`body`に当てる`サイト全体の最低限の土台プロパティ`を記述する

```sass
*,
*::after,
*::before {
    margin: 0;
    padding:0;
    box-sizing: inherit; 
}

html{
    font-size: 62.5%;
    box-sizing: inherit;
}


body {
    box-sizing: border-box;
}
```

### _typography.scss
`文字、行間、書体、文字色、太さ`の共通プロパティや、`見出し`などタイポグラフィー、つまりフォントに関するプロパティを記述する

```sass

body {
    font-family: "Lato",sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: $color-grey-dark;
    padding: 3rem;
}

.heading-primary{
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 6rem;
    
    &--main{
        display: block;
        font-size: 6rem;
        font-weight: 400;
        letter-spacing: 5rem;
        
        animation: moveInLeft 1s ease-in-out;
    }
    
    &--sub{
        display: block;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: 1.74rem;
        
        animation: moveInRight 1s ease-in-out;
    }
}
```

### _utilties.scss
基本的に`１つの機能だけ`を持たせたセレクタを記述する。
例えば`小要素をセンタリングしたい`や`margin`などの間隔などでコーディング中は場所問わずちょくちょく使う
先頭に`u-`をつけると一目でわかる。

```sass
.u-center-text{ text-align: center; }

.u-margin-bottom-small{ margin-bottom: 2rem; }
.u-margin-bottom-medium{ margin-bottom: 4rem; }
.u-margin-bottom-big{ margin-bottom: 8rem; }
```

# 【ディレクトリ】components
`ボタン`などの`部品(パーツ)`をそれぞれ部品ごとに分けたファイルの置き場

※以下ファイルについて

```sass

.btn{
    &:link,
    &:visited{
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        margin: auto;
        border-radius: 10rem;
        transition: all .2s;
        position: relative;
        font-size: 1.6rem;
    } 
    &:hover{
        transform: translateY(-0.3rem);
        box-shadow: 0 1rem 2rem rgba($color-black, .2);
        
        &::after{
            transform: scaleX(1.4) scaleY(1.6);
            opacity: 0;
        }
    } 
    
    &:active{
        transform: translateY(-0.1rem);
        box-shadow: 0 0.5rem 1rem rgba($color-black, .2);
    } 
    
    &--white{
        background-color: #ffffff;
        color: $color-grey-dark;
        
        &::after{
            background-color: #ffffff;
        }
    }
    
    &::after{
        content: "";
        display: inline-block;
        height: 100%;
        width: 100%;
        border-radius: 10rem;
        position: absolute;
        top:0;
        left:0;
        z-index: -1; 
        transition: all .4s;
    }
    
    &--animaited{
        animation: moveBottom .5s ease-in-out .75s;
        animation-fill-mode: backwards;  
    }
}
```

# 【ディレクトリ】layout
コンポーネントとは異なり、もっと`大きな部品`の置き場。
それ以外にもサイトデザインから読み解く設計(仕様)に関する置き場。

※以下ファイルについて

### _header.scss

サイトの全体の影響範囲の大きい`ヘッダーフッター`や`ナビゲーション`や`サイドメニュー`など。

```sass
.row {
    width: $grid-width;
    background-color: #eee;
    margin: 0 auto;
    
    &:not(:last-child){
        margin-bottom: $gutter-vertical;
    }
    
    @include clearfix;
    
    [class^="col-"]{
        background-color: orangered;
        float: left;
        
        &:not(:last-child){
            margin-right: $gutter-vertical;
        }
    }
    
    .col-1-of-2{
        width: calc((100% - #{$gutter-vertical}) / 2);
        
    }
    
    .col-1-of-3{
        width: calc((100% - #{$gutter-vertical}*2) / 3);      
    }
    
    .col-2-of-3{
        width: calc(2 * ((100% - #{$gutter-vertical}*2) / 3) + #{$gutter-vertical});  
    }
    
    .col-1-of-4{
        width: calc((100% - #{$gutter-vertical}*3) / 4);
    }
    
    .col-3-of-4{
        width: calc(3 * ((100% - #{$gutter-vertical}*3) / 4) + #{$gutter-vertical}*2);    
    }    
}
```
### _grid.scss

コンテンツを繰り返しつくる上でのルールである`グリッド`や`パネル`などいわゆる`block(BEM記法)に当てることの多い`部分など

```sass

.header {
    height: 95vh;
    background-image:linear-gradient(to right bottom, 
    rgba($color-primary-light, 0.773),
    rgba($color-primary-dark, 0.176)) ,
    url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;
    clip-path: polygon(0 0,100% 0,100% 75vh,0 100%);
    
    &__logo-box{
        position: absolute;
        top: 4rem;
        left:4rem;
    }
    
    &__logo{
        height: 3.5rem; 
    }
    
    &__logo:hover{
        animation: moveInRight 1s ease-in-out;
    }
    
    &__text-box{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%); /* 見出しの位置を調整 */
        text-align: center;
    }
}
```

# 【ディレクトリ】pages
xxx

※以下ファイルについて

### _home.scss
ｈｔｍｌ構造で`section`に当たるclassのセレクタ。ディレクトリ名からページ単位と誤解しやすいが、`main`タグ内の`大きなコンテンツ`の区切り

```sass
.section-about{
    background-color:  $color-grey-light-1;
    padding:25rem 0;
    margin-top: -20vh;
} 

.section-features{
    padding:20rem 0;
    background-image:linear-gradient(to right bottom, 
    rgba($color-primary-light, 0.773),
    rgba($color-primary-dark, 0.176)) ,
    url(../img/nat-4.jpg);
    background-size: cover;
    transform: skewY(-7deg);
    margin-top: -16vh;

    & > * {
        transform: skewY(7deg);
    }
} 
```