21. 9. 16(목) TIL(SCSS)

배준형·2021년 9월 16일

TIL

목록 보기

20/21

Javascript SCSS

📌 Sass/SCSS

Sass/SCSS: CSS의 확장 언어. 기본적인 문법은 CSS와 동일하다.
Sass/SCSS는 모든 버전의 CSS와 호환되며 Sass와 SCSS는 기능적으로 차이는 없고, Sass는 중괄호와 세미콜론이 없이 들여쓰기로 구분하고, SCSS는 CSS와 비슷하게 중괄호와 세미콜론을 사용한다.

📌 SCSS 문법

1. 주석

- /\* 내용 \*/ 으로 주석처리할 수 있고 이는 CSS와 같다.
- 추가적으로 // 기호로 주석처리할 수 있는데 CSS에서는 지원하지 않는 기능이다.
- CSS로 컴파일할 때, // 기호를 사용하면 CSS에서는 아예 나타나지 않는다.

2. 중첩(Nesting)

- 선택자 안에 선택자를 작성해서 CSS에서의 부모 요소가 계속 작성되는 불편함을 해소할 수 있다.

// SCSS
.container {
  display: flex;
  .item {
    flex-grow: 1;
    > span {
      color: red;
      &:hover { // & 기호는 상위 선택자를 참조한다.
        color: blue;
      }
    }
  }
}

// CSS
.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
}
.container .item > span {
  color: red;
}
.container .item > span:hover {
  color: blue;
}

3. 변수

- $ 기호로 변수를 선언할 수 있다.
- 선언할 수 있는 변수의 타입으로 Number, String, Colors, Boolean, Null, Lists, Maps(Javascript의 Object) 등이 있다.

$size: 100;
$src: "assets/logo.jpg";
$color-gray: #333

1) !global
- $ 기호를 사용하여 선언한 변수는 선언된 위치에서만 유효한 범위를 갖는다. 그러나 지역 변수로 선언된 $ 기호 변수를 전역 변수로 바꾸기위해 !global 키워드를 작성하면 전역 변수로서의 효과를 갖는다.(!global은 Sass/SCSS에서만 사용할 수 있다.)

.box {
  $size: 200px !global; // 선언된 변수는 .box 지역에서만 유효하지만 여기선 !global 키워드로 전역변수로 선언되었다.
  width: $size;
}
.box-b {
  width: $size; // !global 키워드로 인해 $size가 전역변수로 선언되어 정상 작동한다.
}

$ 기호로 선언된 변수는 var, let으로 선언한 변수처럼 값을 재할당할 수 있다. 재할당된 변수는 마찬가지로 선언된 변수의 지역에만 유효한 범위를 갖는다.

전역변수로 선언된 변수에 지역 변수로 재할당 하면서 !global 키워드를 사용하면 전역변수에 덮어쓰기가 되므로 주의해야 한다.

2) !default
- @ 기호로 선언된 변수를 지역 범위 내에서 재할당 했을 때 !default 키워드를 사용하면 재할당되지 않으며 선언된 변수가 없을경우 !default 키워드가 사용된 변수의 값을 그대로 사용한다.

!default는 프로젝트 중반부 부터 프레임워크 등을 도입했을 때 발생할 수 있는 덮어쓰기 문제를 해결할 수 있다. 예를 들어, 사용자가 프로젝트 중반부 부터 Bootstrap을 도입한다고 가정했을 때 이미 사용중인 프로젝트의 변수가 덮어쓰기 되는 것을 방지하기 위해 !default가 필요한데 Bootstrap 대부분의 SCSS 변수는 !default가 선언되어 있다.

.box {
    $primary: orange !default;
    background-color: $primary; // 이 경우 orange가 적용된다.
}

4. @at-root

- @at-root 기호는 상위 선택자를 무시할 수 있다.
($size 같은 변수는 유효범위 내에 있으므로 사용할 수 있다.)

.container {
  .item {
    $size: 100px; // $size는 전역변수로 선언되어 .container .item 내에서만 유효하다.
    width: $size;
    height: $size;
    
    @at-size.box {
      width: $size; // 이 경우 CSS로 컴파일하면 .box { width: 100px } 의 형태와 같다.
    }
  }
}
// 전역변수로 선언한 $size를 사용하면서 상위 선택자를 무시하고 싶을 때 사용한다.

5. 반복되는 속성

- 반복되는 속성은 중괄호로 작성할 수 있으며 이때, 하이픈은 작성하지 않는다.
- 콜론, 세미콜론을 사용해야 한다.

.container {
  margin: {
    top: 10px;
    left: 20px;
  }; // (CSS) .container { margin-top: 10px; margin-left: 20px; }
  font: {
    size: 20px;
    weight: bold;
  }; // (CSS) .container { font-size: 20px; font-weight: bold; }
}

6. 보간

- 자바스크립트에서 ${dataName} 식으로 보간을 사용하는 것 처럼 Sass/SCSS에서도 #{dataName} 기호를 통해 보간을 사용할 수 있다.

$name: "github";
$path: "~assets/images";
$box: "B";

.box {
background-image: url($path); // (CSS) background-image: url("~assets/images"); 
background-image: url("#{$path}/#{$name}.png"); // (CSS) background-image: url("~assets/images/github.png");
}

.box-#{$box} { color: red; } // (CSS) box-B { color: red; }

7. 산술, 비교, 논리 연산자

1) 산술 연산자: +, -, *, /, %
2) 비교 연산자: ==, !=, >, <, >=, <=
3) 논리 연산자: and, or, not

// SCSS
.box {
  $w: 100px;
  $h: 200px;
  $b: false;
  @if ($w != 100px or $h > 100px and not $b) {
    width: 100px + 20px;
    height: 200px * 2;
  } @else {
    width: 2px;
    height: 1px;
  }
}

// 적용된 CSS
.box {
  width: 120px;
  height: 400px;
}

※ 나누기 연산자(/)와 calc() 함수
1) 나누기 연산자 /
- 기본적으로 / 기호는 Sass/SCSS에서 단축속성(축약)을 사용할 때 각 개별속성을 구분할 때 사용하기 때문에 /만 사용하게 되면 나누기로 적용되지 않고, 개별 속성을 나누는 것을 인식하게 된다.
- 산술 연산자로 나누기를 사용하기 위해선 아래와 같이 3가지 방법이 있다.

// 1. 소괄호
.box {
  width: (20px / 2); // (CSS) .box { width: 10px }
}

// 2. $변수 사용
.box {
  $a: 20px;
  width: $a / 2; // (CSS) .box { width: 10px }
}

// 3. 산술연산자 혼합 사용
.box {
  width: 20px / 2 + 0px; // (CSS) .box { width: 10px }
}

2) calc() 함수

// SCSS
.box {
    left: calc(100% - 50px);
}

- 기본적으로 단위가 다르면 연산할 수 없지만 calc() 함수를 사용하면 가능해진다. 위의 경우 100%에서 50px만큼만 빼고 나머지 값이 적용된다.

📌 배운점

Sass/SCSS의 문법을 배웠다. CSS의 확장 언어여서 속성, 값들은 동일했고, Sass/SCSS의 문법적 차이도 거의 없어서 크게 어려운 것은 없었다.

아직까지는 기초적인 것만 학습해서 그렇게 덜 어렵게 느껴졌을 수는 있지만 CSS의 연속이고, Sass/SCSS의 실시간 Compile이 되는 sassmeister 사이트가 있기 때문에 직접 사용할 때 초반에는 해당 사이트를 이용하면 사용하는 데 수월할 것이라 생각한다.

Sass/SCSS를 배울 때 CSS, Javascript의 연장선인 느낌이라 문법적으로 크게 어려운게 없는것이지 CSS는 여전히 어렵다.

기존에 CSS를 사용할 때는 선택자의 반복이 매우 많았고, 복잡해질수록 가독성도 떨어지고 중복으로 값이 할당되는 경우도 많았다. 아직 프로젝트에 직접적으로 사용하진 않았지만 Sass/SCSS를 사용하면 가독성도 좋아지고 작성할 때 중복도 줄일 수 있어서 동일한 속성을 부여하는 실수는 하지 않게 될 것이라 판단된다.

📌 앞으로

사실은 Sass/SCSS를 비교적 최근에 알게되었다. 웹 데브코스 1기에 참여하게 된 후 같은 수강생 분들의 github 사이트를 들어가서 프로젝트를 둘러봤는데, 특정 수강생이 Sass/SCSS를 사용한 것을 보게 되었다.

그 때는 정확하게 문법을 이해하지 못했고, CSS랑 비슷한것 같기는 한데 뭔가 달라서 따로 찾아보기도 했지만 잘 이해가 가지는 않았다.

오늘 공부할 때 sassmeister 사이트를 통해서 많이 배웠다. 지금 생각해보면 처음 Sass/SCSS를 찾아봤을 때 왜 이해가 안됐지? 할 정도로 간단하게 생각되기까지 했다.

데브코스에서 SCSS를 이용한 레이아웃 클로닝 과제가 있고 아직 시작하지 않았는데, 이제는 과제가 당장 처리해야 할 숙제같은 느낌이 아니라 내가 배운것을 어디까지 활용할 수 있을까 하는 생각에 기대된다. 지금은 문법을 위주로 학습하고, 과제를 수행하면서 SCSS를 더 익혀나가고 싶다.