scss 핵심 이론

핵심 이론

class 이름의 중복은 &로 대체 가능

@at-root: 부모선택자 중첩 나가기

.heading은 .frame에 속하지 않게 된다.

접두어 사용해서 css 속성 자동생성

scss

css

:is 로 선택자 중복 줄이기

html

    <header>
      <h1>Headline Text in header</h1>
    </header>
    <section>
      <h1>Headline Text in section</h1>
    </section>
    <footer>
      <h1>Headline Text in footer</h1>
    </footer>

scss

:is(header,section,footer) h1 {
    font-size: 30px;
    font-weight: normal;
}

외부 파일 가져오기 @import

scss imort

@import "reset"; // 확장자 생략 가능

혹은 

@import ("reset.scss"); // scss파일만 import 가능

css import

@import url("reset.css");

@mixin

기본 문법

@mixin default {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin: 0;
  color: #333;
  background-color: #fff;
  line-height: 1.6em;
}

body {
  @inlcude default;
}

mixin만 따로 외부파일로 선언해서 import도 가능

// mixin.scss

@mixin default {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin: 0;
  color: #333;
  background-color: #fff;
  line-height: 1.6em;
}

---

// style.scss

@import "mixin";

body {
  @include default;
}

@extend와 %

%로 정의한 속성을 @extend 해서 재사용 할 수 있다.

%shape {
  width: 250px;
  height: 300px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.212);
}

.card {
  display: flex;
  gap: 30px;
  &-item {
    @extend %shape;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

다중 변수 선언, 내장함수(map-get)

변수를 객체처럼 선언하고 map-get으로 호출한다.

for문

@for $i from 1 through length($colors)

js로 해석하자면 for (let i=1; i<=colors.length; i++)와 같다.

&:nth-child(#{$i}) 이부분에서 #{}는 변수 $i를 받기 위한 키워드이다.

$colors: (red, orange, yellow, green, blue, indigo, purple);

ul {
  list-style: none;
  padding: 0;
  li {
    width: 100px;
    height: 20px;
    @for $i from 1 through length($colors) {
      &:nth-child(#{$i}) {
        background-color: nth($colors, $i);
      }
    }
  }
}

lighten, darken

lighten(색깔, 퍼센트)

색깔을 퍼센트만큼 밝게 하거나 어둡게 한다

https://sass-lang.com/documentation/modules/color#lighten

https://sass-lang.com/documentation/modules/color#darken