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

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

【Aくん】長い間SASS記法で書いてきたからSASSがいいな。
【Bさん】時々CSSをコピペしたい時もあるしSCSSがいいな。

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

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

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

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

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

  &--primary
    background: orange

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

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

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

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

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

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

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

ご相談をお待ちしております

エクスコード株式会社は、次のようなご要望やお悩みを持つお客様に寄り添い、ご期待に応えます。

  • なるべく早くプロトタイプを作って、動かしてみたい。
  • ホームページやアプリを作ってみたいが、やり方も予算感も全く分からない。
  • 話をきちんと聞いて、意見を反映させたホームページやアプリを作って欲しい。

ご相談・お見積もりはこちら

メニュー