SCSS 문법 정리

저번글에 이어 SCSS의 문법을 살펴보겠습니다.

Data Types

---

CSS에 없는 새로운 개념입니다. CSS에서는 자료형의 타입을 고민하지 않아도 되기때문이죠.

SCSS의 자료형에는 자바스크립트와 비슷한 문법적 개념들이 많습니다.

Data	Description	Ex
Numbers	숫자(단위가 붙어도 상관 없음)	20px, 3rem
Strings	문자(따옴표가 안붙어도 상관 없음)	"/docs/image.jpg", center, absolute
Colors	색상 표현이 가능한 것들	#ffffff, rgba(0, 0, 255, .5), red, orange
Booleans	논리(참, 거짓)	true, false
Nulls	없음(js의 Null)	null
Lists	공백 혹은 컴마(,)로 구분된 목록	(a, b, c) , a b
Maps	key: value의 형태로 만들어진 자료구조	(apple: a, banana: b, cherry: c)

 

주석

---

CSS의 주석은 특이하게 두 가지로 나뉩니다.

컴파일 되지 않는 주석 VS 컴파일되는 주석

이게 어떤 의미냐면 컴파일 시 남아있는 주석이 있고, 사라지는 주석이 있는데

전자자가 컴파일되는 주석이고, 후자가 컴파일 되지 않는 주석입니다.

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

아시다싶이 컴파일되는 주석은 여러줄에 걸쳐 쓸 수 있습니다.

/* 컴파일되는
 * 여러 줄
 * 주석 */
 
 /*
컴파일되는
여러 줄
주석
*/

앞에 있는 별표시(*)는 없어도 문제가 되지 않습니다. 

기존의 CSS와 호환이 잘 된다고 할 수 있습니다.

실제로 컴파일 해보시면 // 는 없어지고 /* */ 는 남아있는 것을 보실 수 있습니다.

중첩

---

아마 이 기능이 SCSS의 가장 큰 장점 중 하나라고 생각합니다.

상위 선택자의 반복을 피하고 복잡했던 구조를 좀 더 편리하게 작성할 수 있습니다.

 

.temp_class {
  height: 50px;
  width: 100%;
  .ul {
    line-height: 1.5;
    li {
      display: flex;
      a {
        text-decoration: none;
      }
    }
  }
}

이렇게 중첩된 코드는 아래와 같이 컴파일 됩니다. 

복잡한 코드를 수평으로 길게 늘여쓰지 않아도 되고,

전처리기가 알아서 이를 작성해주니 매우 편한 것 같습니다. 

상위 선택자 참조(Ampersand)

---

중첩에서 상위 선택자를 참조해야 할 때가 존재합니다.

예를 들어서 :hover 라든지 ::after 등의 상황이 있을 것 같습니다.

그럴 때는 & 기호를 사용해 중첩 안에서 사용합니다.

왼쪽이 SCSS, 오른쪽이 컴파일 결과

이 엠퍼센드 기호를 통해 다양하게 활용할 수 있습니다.

예를 들어 대쉬(-)를 이용하여 구분해놓은 class가 있을때 유용하게 사용됩니다.

bootstrap의 spinner을 활용한 예제

중첩 벗어나기

---

@at-root 를 통해 중첩에서 벗어날 수 있습니다.

중첩 안에서 생성이 되지만 밖에서 사용될 때 사용합니다.

저는 많이 사용해보지는 않았습니다만 이런게 있다고 참고하시면 될 것 같습니다.

NameSpace

---

C++ 에서나 보던 namespace라는 개념은 CSS에서도 존재합니다.

예를 들어서 우리가 많이 사용하는 font-weight, font-size, font-family 들은

font라는 namespace에 속한 속성이라고 생각하시면 됩니다.

쉽게 생각해 우리가 padding이라는 속성을 사용할때 

padding-top, padding-right 이렇게 사용하는 것 보다

padding: 10px 0; 이렇게 사용하면 알아서

상하에 padding을 10px씩, 좌우에는 없이 이렇게 해석되는거랑 동일한 의미입니다.

그래서 결국 아래와 같이 namespace를 지정해주어 사용할 수 있습니다.

특히 초기 body 태그에서 많이 사용하는 것 같습니다. 

변수(Variable)

---

반복적으로 사용되는 값을 변수로 지정해줄 수 있습니다. 

변수 앞에는 $ 표시를 붙여줍니다.

$변수 이름: 내용

아시다 싶이 변수라는 개념은 Scope, 즉 유효한 범위를 같습니다.

선언된 블럭 안에서만 그 범위를 가지게 됩니다.

예를 들어 아래의 예시에서 .temp 쪽에서 $c-r을 선언했고 이를 아래의 다른 scope를 가진 

.error 에서 사용하려고 시도하면 당연히 컴파일이 되지 않습니다.

또한 변수에 변수를 재할당 할 수도 있으며, 플래그로 스코프의 범위를 전역으로 사용할 수도 있습니다.

그러나 전역으로 사용하는 것은 초기에 모든 스코프 밖에서 설정하는 것이 권장되며,

전역변수로 만들때는 특히 이름 짓는 것(naming)에 주의하시기 바라겠습니다.

기존에 사용하던 변수가 덮어져서 의도하지 않은 결과를 초래할 수 있습니다.

문자 보간법

---

자바스크립트에서 백틱 기호를 통해 보간을 하고, 파이썬에서도 fstring으로 보간을 사용합니다.

SCSS에서도 #{}를 통해 보간법을 사용이 가능합니다.

연산

---

SCSS도 기본적인 연산을 지원합니다. 

산술연산, 비교연산, 논리연산을 수행할 수 있습니다. 

 

산술연산

산술연산은 기본적인 단위가 픽셀(px)입니다.

그러나 상대적인 단위(%, em)에서의 연산은 calc()라는 내장함수로 수행해야 합니다.

또한 주의할 점은 / 나누기 연산인데요,

이 나누기 연산은 CSS가 속성값을 분리하는 용도로서도 사용이 됩니다.

namespace 안에서 / 를 통해 구분을 할 수 있습니다.

그렇기 때문에 이를 해결하기 위해서는 

• 값을 괄호로 묶어주거나
• 값이 다른 산술연산에 의해 계산이 되게 만들어야합니다.

주의: Dart SCSS 2.0.0 버전부터는 나누기 연산을 진행할때 calc() 내장함수를 꼭 사용해야합니다.

 

문자열 연산

또한 String은 + 로 두 문자열을 이을 수 있습니다.

특이한 점은 첫 번째 피연산자 기준으로 피연산자에 따옴표가 붙어있다면 따옴표로 묶고,

피연산자에 따옴표가 없으면 따옴표가 처리되지 않습니다.

색상 연산

자료형 중 하나인 색상도 연산이 가능합니다.

색상을 사용할 때 #를 사용하는 색상은 r,g,b 자리에 맞춰서 연산이 되고

rgba도 마찬자기로 r,g,b 자리값끼리 연산이 되지만 마지막의 알파 수치는 연산이 진행되지 않습니다.

 

최근 버전에서 색상 연산의 산술 연산은 더 이상 진행되지 않는 것 같습니다.

 

색상에는 다양한 내장함수를 통해 색상을 조정할 수 있습니다.

이 외에도 opacify, fade-in, fade-out,saturate, desaturate 등의 내장함수가 있습니다.

논리 연산

SCSS에서는 @if 조건문을 사용합니다. 논리 연산을 이때 사용 가능합니다.

아래에서 좀 더 많은 예제로 확인해보겠습니다.

 

@mixin 과 @include, @content

---

@mixin은 CSS에서 재사용 할 그룹

을 선언하는 기능입니다.

 

@mixin은 선언한 후 @include를 통해 포함시켜야 합니다.변수는 하나의 값만 가질 수 있지만, mixin은 그룹화하기 때문에 반복되는 구조가 있다면 편리합니다.

@mixin을 사용할 때 인수 즉 argument를 넣어줄 수 있습니다.

@mixin을 template으로 잡고 사용할 때 좋습니다.

또한 defalut value 즉 기본값을 설정해줄 수 있어 별도의 argument가 전달되지 않아도 기본값으로 컴파일됩니다.

@content는 좀 특이한 태그인데요, @mixin에 @content가 포함되어 있으면

해당 부분에 원하는 스타일 블록을 전달할 수 있습니다.

이를 통해 선택자의 속성을 추가해줄 수 있습니다.

이 외에 @extend 키워드가 존재하긴 하는데 이 부분의 사용은 권장되지 않습니다.

이는 상위 선택자에 하위 선택자를 붙여 다중선택자로 만드는 역할을 수행합니다.

자세하게 예제까지는 보여드리지 않고 이런게 있다라고 인지만 하셔도 좋을 것 같습니다.

 

함수(Function)

---

SCSS에서는 함수도 정의할 수 있습니다.

@mixin과 비슷하다고 생각할 수 있지만 함수는 값을 반환하는 것이고, @mixin은 style을 반환합니다.

함수도 @를 앞에 붙여 @function 이라는 지시어로 선언하고 @return으로 값을 반환합니다.

여기서 주의해야할 점은 SCSS에서도 내장함수라는 개념이 존재하기 때문에,

이 내장함수와 이름이 충돌이 일어날 가능성이 존재합니다. 

따라서 사용자 정의 함수에 한에서는 내장함수와 겹칠일이 없는 이름으로 설정을 하거나,

접두 혹은 접미어를 붙여 사용하는것이 권장됩니다.

 

조건(if)

---

SCSS의 조건문은 두 개의 형태로 나뉘는데요, 

우리가 일반적으로 알고있는 조건식과 삼항연산자를 사용하는 조건식입니다.

삼항연산자처럼 사용할때는 (조건, 식1, 식2) 로 사용하고,

식1은 조건이 참일때, 식2는 조건이 거짓일때 값이 반환됩니다.

일반적인 조건문은 @if 지시어를 사용하며 @else , @else if 도 사용 가능합니다.

또한 일반적인 지시어 조건문에서 조건을 묶는 괄호는 생략이 가능하며,

논리연산자(and, or not)의 사용이 가능합니다.

반복(@for)

---

일반적인 for문의 사용과 비슷합니다.

@for는 from ~ through(혹은 to) 와 같이 사용이 됩니다. 

이때 through는 through 뒤에 붙은 종료까지 반복되며,

to는 종료 직전 값까지 반복이 됩니다.

CSS는 zero-based-language가 아니기 때문에 0부터 시작하는 것이 지양됩니다.

그리고 변수는 관례상 $i 를 사용합니다.

반복(@each)

---

@each는 List와 Map 자료구조의 데이터를 반복할 때 사용됩니다.

for each 구문을 생각하면 이해하시기 편할거라고 생각됩니다.

먼저 List를 살펴보겠습니다.

sass meister 활용

index의 값이 필요한 경우에는 index() 내장함수를 통해 사용할 수 있습니다.

다음으로는 Map 자료구조입니다.

Map 데이터를 반복시에는 key, value 즉 두 개의 변수가 필요합니다.

반복(@while)

---

@while은 조건이 거짓이 될때까지 반복을 계속합니다.

while문과 마찬가지로 자칫 무한루프에 빠질 수 있기 때문에 사용에 권장되는 스타일은 아닙니다.

내장함수(Built-in Functions)

---

https://sass-lang.com/documentation/modules

위의 SASS 공식 홈페이지 에서 모든 내장 함수를 확인할 수 있습니다.

그러나 개발할때 모든 내장함수를 사용하는 것은 아니며,

필요에 의해 사용하게 됩니다. 

 

https://www.w3schools.com/sass/sass_functions_string.php

위의 사이트에 자세하게 정리 되어 있습니다. 

참고자료(Reference)

---

https://heropy.blog/2018/01/31/sass/

https://www.w3schools.com/sass/default.php

https://github.com/sass/dart-sass

https://sass-lang.com/documentation

https://sass-guidelin.es/ko/