[SASS] SASS 문법01 - 변수(Variables)와 믹스인(Mixins)

 

=== Prologue ===

 

지난 포스팅에 이어서 Sass 문법에 대해서 알아본다.

(사실 이제부터가 진짜 본론이지..!) 

[Sass의 기능]

Sass는 다음과 같은 기능을 가진다.

1 변수
2 네스팅
- 루프
- 인수
- 혼합
3 mixin
4 셀렉터 상속

 

==== Mission ====

 

SASS 의 기능들을 하나하나 살펴보면서 + 예시와 함께! 

SCSS와 SASS 차이 까지 한눈에 파악하면 

일석이조다! 

 

변수부터 살펴보자 

 

=== description ===

 

1. 변수(Variables) : $ 변수를 활용하여 공통된 속성을 재활용 할 수 있다. 

$로 시작하고, :(콜론) 으로 마무리 한다. 

 

=> 네가지 속성을 변수로 할당 할 수 있는데 (js와는 다르게 color가 포함되는게 색다르다!)

 

◆ 수 (단위 포함)
◆ 문자열 (인용 부호가 있거나 없이)
◆ 컬러 (하나 이상의 이름)
◆ 불리언

 

 

반응형

 

==== detail progress ====

 

SCSS와 SASS 쓰는 방식을 같이 비교해 보자! 

변수도 함께 볼것!! 

 

CSS 출력 결과물도 보며 어떻게 컴파일 되는지 과정을 살펴보면 좋을 것 같다.  

 

[SCSS]

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

[SASS]

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

 

[CSS]

 

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

 

 

2. 믹스인(Mixins) : CSS로 속성을 주다보면 쌍둥이 처럼 붙어다니는 공통 속성들이 생기게 되는데 그러한 뭉텅이가 은근히 많은 편이다.

그러한 그룹 속성들을 중복되지 않게 그룹 변수를 써서 깔끔하게 코드를 쓸 수 있도록 도와주는 인자이다. 

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. 

 

@mixin @inclue를 활용한다. 

 

@mixin 이름 (매개변수 : A) {

$ 변수 : ///// ;

$ 변수 : ///// ; 

} 

 

이름만 정하고 고정된(공통된) 속성만 가져 올 수도 있지만, 아래 예시 처럼 매개 변수를 활용하여 내가 바꾸고 싶은 부분은 지정해 줘도 된다. 나머지는 같은데 색깔이 다른경우 등등 

 

@include 이름 

그룹 속성을 가져올 때는 include를 활용한다.

 

To create a mixin you use the @mixin directive and give it a name. We've named our mixin theme. We're also using the variable $theme inside the parentheses so we can pass in a theme of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

 

[SCSS]

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

 

[SASS]

 

@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff


.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)

 

[CSS]

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

 

 

==== Result ====

 

CSS로 쓸때에는 클래스를 지정해 놓고 그 클래스를 여기저기에 삽입했었다.

그룹으로 묶은 클래스 명을 주다 보면 가끔 폰트사이즈라던지 꼭 다른 부분이 하나 생기곤 했었는데 

(그렇게 되면 그 클래스 명을 못쓰는 경우도 있다) 

그 부분을 잘 보완한게 MIXINS (특히 매개변수의 활용) 같다는 생각이 든다. 

 

변수를 활용해서 CSS를 주다니 얼른 활용해 보고 싶다. 

중복된 코드이 남발을 분명 줄여 줄 것이다...! 

 

 

==== Reference====

 

https://sass-lang.com/guide

Sass: Sass Basics

 

https://mesonia.tistory.com/45

[SASS/SCSS] CSS전처리기 SASS, SCSS에 대해 알아보자~