[SCSS]SCSS문법과 예시

SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다.

 

반응형

1.변수 (Variables)

$ 기호를 사용하여 변수를 정의할 수 있습니다.

$primary-color: #FF6347;

 

2.중첩 (Nesting)

CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다.

.container {
    width: 100%;
    .header {
        background-color: #333;
        color: #FFF;
    }
}

 

3.Mixin

재사용 가능한 코드 조각을 생성하는데 사용됩니다.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

 

4.함수 (Functions)

값을 계산하거나 다양한 작업을 수행하기 위해 사용됩니다.

@function divide($a, $b) {
    @return $a / $b;
}

.width-50 {
    width: divide(100%, 2);
}

 

5.확장 (Extend)

선택자 간의 스타일을 공유할 수 있도록 도와줍니다.

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    background-color: #dff0d8;
}

 

SCSS는 Sass의 한 유형으로, 이 구문을 사용하여 작성된 파일은 일반 CSS 파일로 컴파일될 수 있습니다. 이 파일들은 일반적으로 .scss 확장자를 가집니다.