SCSS 기초

@mixin

해당 스타일 시트 내부에서 얼마든지 재사용이 가능

내부에서 '&'나 또 다른 셀렉터를 포함할 수 있음

 

@include

@mixin을 사용하기 위해 선언하는 구문

셀렉터 지정 후, 내부에 @include로 @mixin을 불러오면 됨

@include뒤 '( )'는 생략 가능

 

@mixins

재사용이 가능한 스타일을 정의하는데 사용

@mixin과 @include를 합쳐서 부름

재사용이 가능한 스타일을 정의하는데 사용

 

/* html */

<div class="txt"></div>

 

/* scss */

@mixin test {

             color: red;

             margin: 0;

 }

 

div {

          @ include test;

}

 

믹스인 응용하기  (IE 지원 X)

line-clamp: 몇 줄 뒤에 컨텐츠를 자를지

box-orient: 박스의 흐름 방향 지정

 

@extend

- %name {속성값}

- 유사한 속성을 가진 클래스를 병합하는 역할

- 웬만한 경력자 아니면 사용하는 것을 자제

/* html */

<div class="a">abc</div>

<div class="b"> abc</div>

<div class="c"> abc</div>

 

/* scss */

%name { font-size: 14px; color: hotpink;}

.a{

        @extend name;

}

 

.b {

         @extend name;

 }

 

.c {

          @extend name;

}

f12 → Styles → .a, .b, .c {

                                             font-size: 14;

                                              color: blue;

                                                       }

 

@mixin과 @extend의 차이점:

@mixin은 속성을 상단에 넣음

@extend는 강제로 모든 값을 넣음

 

if문

- @if (조건) {

/* 조건이 참일 때 구문 */

/* 조건의 괄호는 생략 가능 */

  }

@else {

/* 조건이 거짓일 때 구문 */

}

else {

/* 모두 거짓일 때 구문 */

}

ex)

@mixin btn_radius($h, $radius: true) {

 

padding: 0 20px;

height: $h;

 

 line-height: $h;

text-align: center;

background-color: black;

 color: white;

}

 

@if $radius {

border-radius: $h / 2;

}

.btn {

 

@include btn_radius(30px, true);

 

※ 핫핑크색 형광펜 친 거에 따라 달라짐