[SASS - SCSS] 1-3. 부분화-불러오기와 믹스인 내용 정리

 

3. 부분화 / 불러오기

SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리를 해야 조금 편하게 작업이 가능합니다. 문장을 분리하는 과정은 부분화라고 합니다. 부분적으로 쪼갠 SASS 문장을 하나의 문장에 불러오기를 한 후 컴파일 과정을 거치게 되면 하나의 CSS 파일로 변환이 됩니다.

부분화를 할 때 가장 중요한 것은 파일 이름이고, 반드시 부분화를 하는 파일의 이름은 _언더바로 시작이 되어야 합니다. (ex: _style(O) / style(부분화 X)

CSS 파일 내부에 불러오기를 하는 방법이 있는데, 이 경우에도 import를 이용해서 처리하게 됩니다. 

 

- css: @import url(style.css);
- SASS: @import 'style';

CSS import에는 url 뒤에 경로부터 확장자까지 작성하게 되지만, SASS에는 확장자를 기재하지 않고 파일 이름만 기재합니다. 부분화를 작성하게 되면 _언더바를 붙이지만, import할 때는 _언더바를 사용하지 않습니다. CSS import와는 다른 부분입니다.

 

4. 믹스인(Mixin)

믹스인 브라우저별 접두사를 처리하거나 반복적인 속성을 손쉽게 처리할 수 있게 해주는 역할을 합니다. CSS3에서 사용되는 부분에서 브라우저마다 적용이 되지 않는 부분을 벤더프리픽스를 기재하여 적용을 하게 됩니다. 이 속성을 사용하여 하위 브라우저에서 CSS3의 속성이 표시되지 않을 것을 대비하여 지정을 해서 작성하는 것이 좋습니다.

 

 

 

border-radius라는 속성에 별도의 접두사를 처리하는 부분에 변수 $radius를 지정했고, .box1 선택자 부분에 변수값에 10px을 부여하였습니다. 나머지 속성과 함께 작성하면 radius 값이 적용되는 것을 볼 수 있습니다.

결과값을 보면 CSS를 일반적으로 코딩할 경우에는 n개의 box 클래스를 만든다면 각각 border-radius 밴더프리픽스를 기재해야되지만, 믹스인을 사용하여 해당 선택자에 다음과 같이 값을 부여할 수 있습니다.

 

.box1 {
    height: 100px;
    background: red;
    text-align: center;
    @include border-radius(10px);
}

.box2 {
    height: 100px;
    background: orange;
    text-align: center;
    @include border-radius(20px);
}
.....

SASS의 가장 큰 장점은 반복되는 작업을 최대한 줄이고, 생산성을 높이며, 작업의 효율성을 극대화하는데 있습니다.