[Sass] Sass 맛보기

🎯 Sass 맛보기

• Syntactically Awesome Style Sheets. CSS Preprocessor.
• SCSS, Sass 문법을 지원한다.
• 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장.
• styled-components는 Sass를 기본적으로 지원한다.

 

📝 &

.reset-button {
    &.active {}
    &.disabled {}
    &:hover {}
    &:not(:first-of-type) {}
    & + & {}
    & ~ & {}
    & > button {}
}

• &는 자기 자신을 나타내는 placeholder다.
  • &.active {}는 컴파일하면 reset-button.active{}로 치환된다.
• 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용할 수 있다.

 

📝 variable

$color-red: red;
$color-white: #fff;

.reset-button {
    color: $color-red;
    &:hover {
        color: $color-white;
    }
}

• 믹스인, partial와 함께 Sass가 제공하는 코드 관리 방법 중 하나이다.
• 색상, 사이즈 등 자주 등장하는 값을 주로 변수로 사용한다.

 

📝 nested style

$color-red: red;
$color-white: #fff;

.reset-button {
    color: $color-red;
    &:hover {
        color: $color-white;
    }
    > button {}
}

• 별도의 class를 정의할 필요 없이, 하나의 block 안에 여러 CSS를 적용할 수 있는 방법이다.
• CSS 선택자가 그대로 적용되므로, 너무 깊게 nested 되면 스타일 유지보수가 힘들다. 하나 정도로만 들어가는 것을 권장한다.

 

📝 mixins, import, include

• 믹스인은 여러 스타일을 한꺼번에 뭉쳐서 사용할 수 있는 문법이다.

 

🛠 font-styles.scss

@mixins font-style-1 {
    font-size: 36pt;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.05;
}

 

🛠 usage.scss

@import './font-styles.scss'

.button {
    @include font-style-1;
    background: red;
}

 

🛠 예시

@mixins flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

// 다른 파일
.layout {
    @include flex-center; // 이렇게 적용 가능
}