CRA(create-react-app)にSCSSを導入した話。

node-sassをnpmインストールする

npm i -D node-sass

.cssファイルを.scssにリネーム

scssで書いてみる

このような3色の四角の囲みを使っているのですが、

f:id:ckoshien:20200118194824j:plain

div.topic{
    position: relative;
    top: 0px;
    padding: 5px;
    border-radius: 5px;
    margin: 0px 5px 5px 5px;
    overflow-x: scroll;
    max-width: 400px;
    font-size: 14px;
    &.border_green{
      border:1px solid #386537;
    }
    &.border_pink{
      border:1px solid #BF7A87;
    }
    &.border_blue{
      border:1px solid #1F72A6;
      //トップページyoutube用style
      iframe#widget2{
        max-width: 400px;
        max-height: 300px;
      }
    }

ベースのスタイルを書いて色だけ分岐させるのはこう書けるようです。

埋め込みyoutubeのスタイル指定にメディアクエリを使います。 SCSSの場合は変数を使うこともできますが、ベーシックな書き方を使ってみます。

iframe{
  //youtube
  &#widget2{
    @media (max-width: 400px) {
      width: 100%;
      height: 300px;
    }
    @media (min-width: 400px) { 
      max-width: 600px;
    }
  }
}