Nesting

& (는 parent를 뜻함)

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;

	&Blue {			// .btnBlue
	      background-color: blue;
	    }

	&.red {      //btn red
      background: $red;
      @include square(1);
    }
}

map

$font-weights: (
  'regular': 400,
  "medium": 500,
  "bold": 800,
)

body{
// map         key
font-weight: map-get($font-weights, medium);
}

mixin

//선언 시
@mixin colorBox($color, $fontsize: 12px) {
  width: 200px;
  background-color: $color;
  font-size: $fontsize;
}

//사용 시
.purpleBox {
  @include colorBox(purple);
}

.greenBox {
  @include colorBox(green, 24px);
}

// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;

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

.SassComponent {
  display: flex;
  .box {   // 일반 CSS 에선 .SassComponent .box
    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);
			    }
	}
}

const SassComponent = () => {
  return (
    <div className="SassComponent">
      <div className="box red" />
      <div className="box orange" />
      <div className="box yellow" />
    </div>
  );
};

CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술입니다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장하셔야 합니다.

import styles from './CSSModule.module.css';

<div className={styles.wrapper}>

<div className={${styles.wrapper} ${styles.inverted}}>

<div className={MyComponent ${theme} ${highlighted ? 'highlighted' : ''}}>

• carousel