グローバルなCSS変数

• SCSS内で閉じれるものは$color:'red'等をvariables内の各ファイルで定義し、他モジュールでインポートして使用する
• colorMode等で切り替えるものは、--color-background: #3ea8ff;などのcss変数をReactComponentのstyle={}で指定
• variables内で$color_background:var(--color-background)のように読み込んで、それを更に他モジュールから参照する

メディアクエリ

variables内で定義

   code:media query.scss	
    $sm: 576px;
    $md: 768px;
    $lg: 992px;
    $xl: 1200px;

    $breakpoints: (
      'sm': 'screen and (max-width: #{$sm})',
      'md': 'screen and (max-width: #{$md})',
      'lg': 'screen and (max-width: #{$lg})',
      'xl': 'screen and (max-width: #{$xl})'
    );

    @mixin mq($size) {
      @media #{map-get($breakpoints, $size)} {
        @content;
      }
    }

各ファイルで使う

    @import '../variables';
    .container {
      margin: 0 2rem;

      // ↓768px以下で適用したいCSS
      @include mq(md) {
         margin: 0 1rem;
      }
    }

絶対パスインポート

• tsconfig.jsonで"baseUrl": "src",を指定してあればscssでもエイリアスが聞く