[CSS] Sass
Sass란?
Sass(Syntactically Awesome Style Sheets)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라, 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 줍니다.
Sass는 두 가지 확장자 .scss 와 .sass 를 지원합니다. Sass가 처음 나왔을 때는 .sass 확장자만 지원되었으나, 기존 CSS와의 이질감이 든다는 개발자들의 의견에 의해 .scss 확장자도 지원하게 되었습니다.
.sass와 .scss의 차이점
.sass 와 .scss 의 문법은 꽤 다릅니다.
.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
.sass 확장자는 중괄호와 세미콜론을 사용하지 않습니다. 반면 .scss 확장자는 기존 CSS를 작성하는 방식과 비교해서 문법이 크게 다르지 않습니다.
또한 Mixin을 사용하는 방법도 조금 다릅니다.
.sass Mixin
=square($size) {
$calculated: 32px * $size
width: $calculated
height: $calculated
}
.red {
background: $red;
+square(1);
}
.scss Mixin
@mixin square($size) {
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
.red {
background: $red;
@include square(1);
}
.sass 는 = 와 + 기호로 Mixin 기능을 사용하고, .scss 는 @mixin 과 @include 로 Mixin 기능을 사용합니다.
일반적으로 .sass 보다는 .scss 가 더 자주 사용됩니다.
Sass의 문법. Sass는,
1. 변수의 사용이 가능하다.
Sass는 코드의 재사용성을 높이기 위해 변수 할당 및 사용이 가능합니다. 다음과 같은 방법으로 변수를 선언 및 사용할 수 있습니다.
변수 선언
$변수명: 속성값;
$red: #fa5252;
변수 사용
.red {
background: $red;
}
또한 변수는 block scope 적인 특징을 갖습니다. 아래 예시에서는 color라는 변수 명에 red 컬러를 의미하는 헥사 코드를 할당해 주고, box1 클래스의 스타일링 코드에서 이 변수에 green 컬러를 의미하는 헥사 코드를 입력하게 되면, 해당 백그라운드는 녹색으로 설정될 것입니다. box2 클래스의 스타일링 코드는 전역에 선언되었던 빨간 색상의 백그라운드가 적용될 것입니다.
$color: #fa5252; // red
.box1 {
$color: #40c057; // green
background: $color;
}
.box2 {
background: $color;
}
값 뒤에 !global 이라는 예약어를 붙여주면 해당 변수와 동일한 이름의 전역 변수의 값을 건드릴 수 있습니다.
$color: red;
.box1 {
$color: green !global;
background: $color;
}
.box2 {
background: $color;
}
위의 코드에서는 box1 스타일링 도중 color 변수의 값을 !global 예약어를 통해 블럭 스코프 밖의 color 변수를 덮어 씌웠으므로, box2 클래스의 백그라운드는 빨간 색이 아닌 녹색으로 칠해질 것입니다.
또한 !default 예약어 사용으로 재할당 선언을 무시할 수도 있습니다.
$color: red;
$color: green !default;
.box1 {
$color: green;
background: $color;
}
.box2 {
background: $color;
}
두 번째 줄에서 color 변수의 값을 green으로 설정했지만, !default 의 사용으로 명령이 무시됩니다. 이후 box1 클래스의 스타일링 도중 전역에 정의되어 있는 color 변수를 green으로 설정하고나서 백그라운드를 color 변수로 설정하게 되면, 녹색으로 칠해집니다. 상단부에서 color를 green으로 칠하는 명령이 무시됐으므로, box2는 빨간색으로 칠해집니다.
2. 식의 사용이 가능하다.
.box {
width: 200px - 100px;
height: (200px / 2);
}
css 에서는 위와 같은 식 계산을 사용하려면 calc 함수를 사용해야 했지만, Sass는 그대로 사용해도 됩니다.
3. 선택자 중첩(Selector Nesting)이 가능하다.
둘 이상 엘리먼트에 동일한 스타일링 코드를 적용하려면 CSS는 다음과 같은 방법으로 작성합니다.
.div p {
font-size: 2rem;
}
이는 선택자를 불필요하게 중복해서 작성해야하는 번거로움이 있습니다. 이를 해결하고자 Sass는 다음과 같은 netsing 구조를 허용합니다.
.div {
p {
font-size: 2rem;
}
}
4. 상속이 가능하다.
.box {
width: 100px;
height: 100px;
}
.red-box {
@extend box;
background: red;
}
.green-box {
@extend box;
background: green;
}
컴파일 과정을 거쳐 위의 scss 코드는 다음과 같은 css 코드로 바뀝니다.
.box,
red-box,
green-box {
width: 100px;
height: 100px;
}
.red-box {
background: red;
}
.green-box {
background: green;
}
5. 다른 파일의 변수를 가져올 수 있다.
colors.scss
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;
style.scss
@import 'colors.scss';
.box {
background: $violet;
}
파일을 import 하면, 가져온 파일에 작성된 변수들을 사용할 수 있습니다.
6. Mixin을 제공한다.
Sass 문법은 상속이 가능하다는 것을 위에서 봤습니다. 상속은 컴파일 과정에서 여러 선택자들을 묶어 그들에게 똑같은 스타일링을 적용시켜줍니다. 그렇게 되면, 다른 선택자들과의 연관성이 없는데도 불구하고 같이 묶이게 되어 의도하지 않은 값 변화가 생길 수 있습니다.
위와 같은 상황 예방을 위해 mixin 을 사용합니다. 믹스인은 스타일링 코드만 해당 선택자에 적용시킬 뿐, 서로 관련 짓지 않습니다. 믹스인은 또한 인자를 받아 사용할 수 있습니다.
@mixin square($size) {
$calcuated: 32px * $size;
width: $calculated;
height: $calculated;
}
.red {
@include square(1);
}
위 코드가 컴파일 되면 아래와 같은 코드로 나타나게 됩니다. 속성과 그 값들을 흡수해 온다고 생각하면 될 것 같습니다.
.red {
width: 32px;
height: 32px;
}
7. 함수를 사용할 수 있다.
Mixin은 해당 속성명과 속성 값을 그대로 흡수해 오는 반면, 함수를 사용하면 반환 값을 얻어와 프로그래머가 지정해 둔 속성에 값을 대입할 수 있게 됩니다.
@function calc-width($size) {
@return $size * 4;
}
@function calc-height($size) {
@reutnr $size * 3;
}
.box {
width: calc-width(10px);
height: calc-height(10px);
}
댓글남기기