Sass: SCSSとSASSは同じディレクトリで混在できます

複数人でSassを書く際、お互いに好みが別れることがあるかと思います。

【Aくん】長い間SASS記法で書いてきたからSASSがいいな。

【Bさん】時々CSSをコピペしたい時もあるしSCSSがいいな。

そんな時、SassはSCSS記法(.scssファイル)とSASS記法(.sassファイル)が混在していても大丈夫ということを思い出してください。

ディレクトリ構成

sass/
  _component.sass ←SASS記法で書かれたファイル
  _header.scss ←SCSS記法で書かれたファイル
  app.sass

app.sass

@import component
@import header

【Aくん】使い回しをするコンポーネントパーツは僕がSASSで書くよ。

_component.sass

/* SASS記法で書いた内容 */
.button
  display: block
  background: gray

  &--primary
    background: orange

【Bさん】デザインから起こしていく部分は私がSCSSで書くね。

_header.scss

/* SCSS記法で書いた内容 */
.header {
  position: relative;

  &__logo {
    position: absolute;
    top: 0;
    left: 0;
  }
}

【Aくん/Bさん】SassはCSSを書き出すためのものだから、最終的に意図した通りに出力されればそれでOKだよね。

app.css(出力結果)

/* SASS記法で書いた内容 */
.button {
  display: block;
  background: gray;
}
.button--primary {
  background: orange;
}

/* SCSS記法で書いた内容 */
.header {
  position: relative;
}
.header__logo {
  position: absolute;
  top: 0;
  left: 0;
}

求めているものは出力結果なので、記法で揉めるとか無くしたいですよね。