CSS - Sass란 ?

CSS

: Sass란 ?

>Sass란?

• CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.

• 기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 

• 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 

• 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다.

>Sass의 장점

1.코드중복을 줄일수 있다.

SASS 사용 전 코드 (코드가 복잡할수록 더 유지보수가 어려워 집니다.)

#navbar {

width: 80%;

height: 23px;

}

#navbar ul {

list-style-type: none;

}

SASS 사용 후 코드

#navbar {

width: 80%;

height: 23px;

ul { list-style-type: none; }

}

출처: http://ithub.tistory.com/87 [Fall in IT.]

2. 변수를 사용 할 수 있기 때문에 유지보수가 쉬워진다.

$main-color: #ce4dd6;

$style: solid;

#navbar {

border-bottom: {

color: $main-color;

style: $style;

}

}

a {

color: $main-color;

&:hover { border-bottom: $style 1px; }

}

출처: http://ithub.tistory.com/87 [Fall in IT.]

3. ETC

그외에도, 함수와 연산자를 사용할 수 있으며, 다양한 문법들이 존재한다.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html 참조

>Sass 심화 (extend와 mixin)

1. mixin

• 프로젝트를 하다보면 말줄임을 표현하는 스타일, 버튼 스타일, 아이콘 스타일에 해당하는 클래스를 만들어 놓고 필요한 위치에 클래스를 추가로 넣어주는 경우가 있는데 mixin기능을 사용하면 더 쉽게 반복적인 작업을 할 수 있다. 
• 또한 mixin은 특정 속성값을 인자로 전달할 수 있다.

ex) 다음과 같이 미디어 쿼리를 사용할때, 매우 유용하게 쓰일 수 있게된다.

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
​
@mixin mobile {
  @media screen and (min-width: $sm) {
    @content;
  }
}
​
@mixin tablet {
  @media screen and (min-width: $md) {
    @content;
  }
}
​
@mixin desktop {
  @media screen and (min-width: $lg) {
    @content;
  }
}
​
@mixin large-desktop {
  @media screen and (min-width: $xl) {
    @content;
  }
}

mixin.scss

@import 'mixin의 경로';
​
example{
 margin: 10px;
   @include desktop{
     margin: 20px;
     }
  
}

example.scss

• mobile first로 짜여진 웹이라면, 위와 같이 @include를 통해 desktop일때의 속성을 변경시켜 줄 수 있다.
  

2.extend

• sass 에서 특정 선택자를 상속 할 때, @extend 지시자를 사용한다.

sass

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.box{ padding:20px; border:1px solid #333; }   .news-box{ @extend .box; background-color:#eee; }   .list-box{ @extend .box; background-color:#000; }

css

1 2 3 4 5

.box, .news-box, .list-box { padding: 20px; border: 1px solid #333; } .news-box { background-color: #eee; } .list-box { background-color: #000; }

1 2 3

<div class="box news-box"></div>

이렇게하면 위 코드처럼 html에서 클래스를 두 번 써야하는 작업을 줄일 수가 있다.

출처: http://ithub.tistory.com/87 [Fall in IT.]

• 위를 살펴보면, 공통되는 css속성들을 적용시킬때, css같은경우는 ,로 묶어주고 css적용을 한뒤, 다시 다른속성값에 대해서만 표시를 해주었던 반면에, sass는 @extend 로 속성을 받아와, 코드가 더 간결해지고, css에서 처럼 클래스를 두번 쓰는 작업을 줄일수가 있게된다.

ex)typography로 정해놓은 속성 extend하기

아래와 같이 h1,h2,h3등등과 같은 태그들의 속성들을 typography 파일로 전역적으로 사용하기 위해 설정해두고, 다른파일에서 extend하여, 다른속성들을 적용시키는 예제이다.

.h1 {
  font-size: 2.0em;
}
​
.h2 {
​
}
​
.h3 {
  margin-top: 2.1em;
  margin-bottom: 1.3em;
​
  font-size: 1.3rem;
  font-weight: 700;
}
​
.h4 {
  margin-top: 1.3em;
  margin-bottom: 0.9em;
​
  font-size: 1.15rem;
  font-weight: 600;
}
​
.h5 {
  font-size: 1.1rem;
}

Typography.scss

    h5 {
      @extend .h5;
      font-weight: bold;
      padding-top: 1.25rem;
      border-top: 1px solid $color-lightgray;
    }

index.scss