• ..

VSCode

    ファイル分割

    Sass では@import <file-path>;といいう構文で別の sass ファイルを取り込むことができます。

    例えば、以下のような_base.scssindex.scssがあるとします。

    // _base.scss
    
    $font-size: 14px;
    // index.scss
    @import 'base';
    
    body {
      color: $font-size;
    }

    最初に@import '_base';とすることでindex.scssでも_base.scssの内容が使えるようになります。baseで読み込んでいるのは入力ミスではなくそういう仕様で、別ファイルに読み込まれることを想定しているようなファイルは_をファイル名に付けるとディレクトリ構造が整えれます。