Zenn
🌿

ちょっとモダンなCSS

2023/05/27に公開
CSS
tech

めんどくさい書き方しかできなかったものが、現在は、簡単に完結できるようになったものが増えました。
普段利用しているものをまとめました。

モダンとは

  • レガシーの反対 ある時点から新しいもの

SCSS

_variable.scss
// width
$pc-s: 1200px;
$sp: 560px;
// color
$black: #000;
_mixin.scss
@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}
@mixin marginY($value: 40px) {
  margin: $value 0;
  @if ($value > 60px) {
    @include sp {
      margin: calc($value / 2) 0;
    }
  }
}
@mixin contentsBody($calc: 100px, $width: $pc-s) {
  width: min(100% - $calc, $width);
  margin: 0 auto;
  @if ($calc > 40px) {
    @include sp {
      width: min(100% - calc($calc / 2), $width);
    }
  }
}
_hoge-page.scss
.box {
  @include contentsBody($calc: 100px, $width: 1000px);
  @include marginY($value: 100px);
  background: rgba($black, .7);
  .text {
    font-size: 32px;
    @include sp {
      font-size: 16px;
    }
  }
}

SCSS 各説明

@include sp

  • @media~~を短くしたいので採用
$sp: 560px;
.text {
  font-size: 20px;
  @include sp {
    font-size: 16px;
  }
}

$spの値からfont-sizeが16pxになります。

background

$black: #000;

background: rgba($black, 0.7);
/* 👆が👇になる */
background: rgba(0, 0, 0, 0.7);

@marginY

marginの Y 軸、つまり上下の余白です。
デフォルト値は 40px にしています。
条件を満たす場合、入力値の 50%にしています。

_mixin.scss
@mixin marginY($value: 40px) {
  margin: $value 0;
  @if ($value > 60px) {
    @include sp {
      margin: calc($value / 2) 0;
    }
  }
}

@contentsBody

コンテンツやセクションなどの幅に使用しています。

  • $calcのデフォルト値は 100px
  • $widthのデフォルト値はvariable.scssファイルで定義した$pc-sの値
width: min(100% - $calc, $width);

👆 は$widthが max-width です。

例

_hoge-page.scss
.container {
  @include contentsBody($calc: 100px, $width: 1000px);
  @include marginY($value: 200px);
}

👆 のcontainerはmax-widthが 1000px
ブラウザ幅が 1000px 以下になると左右に 50px ずつ余白ができます。
上下marginが 200px ブラウザ幅が$spの値になると 100px

CSS

👇 のようなレイアウトの場合

index.html
<div class="container">
  <div class="inner">
    <h1 class="title">TITLE</h1>
  </div>
  <!-- 省略 -->
</div>
style.css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}
.inner {
  width: calc((100% - (60px * 2)) / 3);
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
}
.inner .title {
  width: fit-content;
}

CSS の各説明

gap

style.css
width: calc((100% - (60px * 2)) / 3);

innerが何個になるかわからないときなどに使用します。

  • 60px はgapと合わせ、3 カラムの場合はガターが 2 つなので、gap*2 をする
  • 120px が引かれるので、それを三分割で 3 カラムの出来上がり

grid

style.css
display: grid;
place-content: center;

何かを真ん中にしたい時に使用します。

aspect-ratio

  • 比率 1:1

その他

a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

:root {
  --shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.boxshadow {
  boxshadow: var(--shadow);
}

.text {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

etc..

最近（2023.5 時点）の CSS の流れ

Tailwind がやはりマストの感じはします。Twitter でもトレンドにあがりますし、一時 Bulma なども名前見たような気がしましたが、気づいたら一強な感じになっていますね。
SCSS に関しては、基本的に増えると管理しづらいので、mixinがこれ以上増やすのは考えていません。
今は TailWind、CSS in JS、emotion とかいっぱいあり、CSS もネストができるようになりました。

現在は、Tailwind を使用し始めたり、Next を勉強中で、CSS in Modules と Tailwind を採用していて、
正直 SCSS の優位性はほとんど感じていないのが本音です。

GitHubで編集を提案

Discussion