sass3. 변수, 중첩, 파편화, 믹스인

Front_H·2020년 12월 21일
0

SASS

목록 보기
3/3
post-thumbnail

저번 시간에는 sass와 scss를 비교하고 간략하게 sass의 특징을 간단하게 알아보았다.
이번에는 sass의 특징 곧, 그 문법에 대해 구체적으로 알아보자

1. 변수(Variables)

: 자바스크립트에서도 변수를 선언해서 전역변수 또는 지역변수로 사용하는 것처럼 SASS에서도 반복적으로 많이 사용되는 부분, 예를 들어 font 모양이나 색상들을 변수로 지정해 놓고 이 변수값만 변경해 주면 CSS를 아주 간단하게 제어할 수 있습니다.

SASS에서는 변수를 정의할 때 $ 기호를 사용합니다.

$font-first: NtSans, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color

위의 코드를 보면 $font-first와 $primary-color라는 변수가 사용된 것을 볼 수 있습니다.
해당 코드가 css로 컴파일되면 밑의 코드처럼 바뀌는 것을 알 수 있습니다.

body {
 font: 100% NtSans, sans-serif;
 color: #333;
}

2.중첩(Nesting)

HTML 코딩을 하다 보면 중첩적인 표현을 위해 하위 선택자를 많이 사용할 수밖에 없습
니다. 예를 들어 nav 태그를 이용해서 내비게이션을 만들 때 ul과 li라는 태그 선택자가
있는데, 이 두 선택자는 nav의 하위 선택자입니다.

  <nav>
   <ul>
   <li><a href="link1">Menu1</a></li>
   <li><a href="link2">Menu2</a></li>
   <li><a href="link3">Menu3</a></li>
   </ul>

위의 HTML 태그 부분에 CSS 속성을 적용해 보도록 하겠습니다.

nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 5px 3px;
margin: 10px 20px;
text-decoration: none;
color: #999;
}
nav ul li a:hover {
border-bottom: 1px dotted #999;
}

위의 css코드를 sass를 통해 간략하게 만들어보겠습니다.

$default-color: #999;
$navhover-color: #ffb069;
nav {
   ul {
   list-style: none;
     li {
     display: inline-block;
       a {
         display: block;
         padding: 5px 3px;
         margin: 10px 20px;
         text-decoration: none;
         color: $default-color;
         &:hover {
         border-bottom: 1px dotted $navhover-color;
         color: $navhover-color;
         }
       }
     }
   }
}
 

이런 식으로 하위 구조에 대해서 괄호로 중첩시킬 수 있습니다. 그리고 선택자에 &가 보이는데
이것은 자기 자신을 말합니다. 위 코드에서 &:hover는 nav ul li a:hover와 같은 말입니다.

3.부분화(Partials) / 불러오기(Import)

문장이 상당히 길어지고 복잡하게 되어 문장을 분리할 필요가 있습니다. 이때 문장을 분리하는
것을 ‘부분화’라고 합니다. 이렇게 부분적으로 쪼갠 SASS 문장을 하나의 문장에 불러오 기Import를 한 후 컴파일 과정을 거치면, 완벽한 하나의 CSS 파일로 변환되는 것입니다.

부분화를 할 때 제일 중요한 것이 파일 이름입니다. 부분화를 하는 파일 이름은 앞 부분에 반드시 _(언더바) 를 추가해야 합니다. 그래야 이 부분이 부분화 파일이구나 라고 알 수 있습니다.그래서 파일명 앞에 언더바를 추가하면 CSS 파일로 컴파일되지않습니다.
html 에서 해당 css 파일을 불러올일이 없고, import 만 되는경우에는 이 기능을 사용하자.

@import "_var","_mixin","_function";

위의 코드처럼 저는 자주 사용돠는 변수를 선언하는 파일 _var.scss, 각 css속성의 크로스브라우징 버전을 한번에 불러올 수 있는 _mixin.scss, 값을 변환하거나 반복적인 코드를 줄일 수 있는 _function.scss파일로 나누어서 @import로 불러주었다.그리고 이런 파일들은 확장자명을 생략해서 불러와도 되고 실시간 감시대상에서 제외된다.

4.믹스인(mixin)

CSS의 속성 중 특히 CSS3의 속성에서 사용되는 부분에 대해서 브라우저 제조사에 따라 별도의 접두사(Vendor prefixes)가 존재하는데, 믹스인은 브라우저별 접두사를 처리하거나 반복적인 속성을 손쉽게 처리할 수 있게 해주는 역할을 합니다. 이러한 접두사는 가장 먼저 크롬,사파리 > 파이어폭스 > IE계열 > CSS3 속성의 순으로 배열해 주는 것이 가장 좋습니다. 그리고 mixin으로 접두사가 쓰인 css속성들을 정의했다면 사용할때는 @include를 통해 불러올 수 있습니다.
그렇다면 코드를 통해 예시를 알아보겠습니다.

  @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     border-radius: $radius;
    }
    
  .box {
   @include border-radius(10px);
  }

위의 코드처럼 border-radius를 각 브라우저에 대한 접두사를 @mixin을 통해 정리하고 @include로 한번에 불러오고싶다면

@mixin 불러올 이름(매개변수){
-webkit-속성:매개변수;
-moz-속성:매개변수;
-o-속성:매개변수;
속성:매개변수;
}

이런식으로 정의를 내리고 불러올 때는

선택자{@include 불러올 이름(값);}

변수값은 하나인데 속성이 여러 개 있는 경우

변수명 뒤에 점 세개(...)를 추가

@mixin box-shadow($value...) {
 -webkit-box-shadow: $shadows;
 -moz-box-shadow: $shadows;
 box-shadow: $shadows;
}
.test{
 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
profile
drop the bit 0 and 1

0개의 댓글