sass와 scss 차이점

// sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

• sass는 세미콜론과 중괄호가 없음
• scss가 우리가 아는 css와 가까워서 난 scss가 더 좋음

scss 사용 방법

styles/utils.scss

// ~표시는 /node_modules 경로로 바로 들어감
@import '~include-media/dist/include-media'; // npm i include-media
@import '~open-color/open-color'; // npm i open-color
// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

// 믹스인 만들기(재사용되는 사티을 블록ㅇ르 함수처럼 사용할 수 있음)
@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

SassComponent.scss

@import './styles/utils';

.SassComponent {
  display: flex;
  background: $oc-gray-2;
  @include media('<768px') {
    background: $oc-gray-9;
  }
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      // .red 클래스가 .box와 함께 사용되었을 때
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }
    &:hover {
      // .box에 마우스를 올렸을 때
      background: black;
    }
  }
}

SassComponent.js

import './SassComponent.scss'

export default function SassComponent() {
  return (
    <div className='SassComponent'>
      <div className="box red"></div>
      <div className="box orange"></div>
      <div className="box yellow"></div>
      <div className="box green"></div>
      <div className="box blue"></div>
      <div className="box indigo"></div>
      <div className="box violet"></div>
    </div>
  )
}

• $를 이용해 변수 선언 / 사용할 때도 $ 붙여주기
• @mixin 사용하여 함수 생성 / 사용할 때 @include
• &는 부모 요소를 뜻함
• @import로 불러오기
  • ~ 표시는 node_modules 폴더로 바로 들어감

결과 화면

< 768px

> 768px