CSS_Sass 기초 1

CSS는 매우 원시적인 언어이며, CSS가 몇천줄이 넘어가기 시작한다면 CSS 관리 자체로도 큰 부담이 된다.

그래서 이런 상황에서 여러가지 문제들을 해결할 수 있는 Preprocessor (전처리언어) 라는걸 만들어냈다.

그 중 하나인 Sass는 CSS를 조금 더 프로그래밍 언어스럽게 작성할 수 있는 문법들을 제공한다.

프로그래밍스러운 변수, 함수, import, 상속 등의 기능을 CSS에서 이용가능하다.

▶️ Sass 개발환경 셋팅

vscode에 있는 Live Sass copiler extension 을 검색후 설치한다. (최소 v5.0 이상) 설치후 최하단 status bar에 watch sass 버튼이 생기고 이를 누르면 자동으로 Sass 파일을 css로 변환해준다.

---

▶️ Sass 문법 1 : 값을 저장해놓고 쓰는 '변수'

  (test.scss)
  $메인색상 : #2a4c6e;
  $서브색상 : #333333;

  .text {
    color: $메인색상
  }
  .box {
    background: $서브색상
  } 

• Sass 파일의 기본확장자는 .scss이다.
• 복잡한 칼라코드를 $(변수명)으로 변수로 작명해서 사용할 수 있다.
• width, font-size 등 자주 쓰지만 기억하기 어려운 값들과 많은 곳에서 공통적으로 사용하는 값등을 설정해주면 좋다. 수정과 관리가 쉬워진다.

---

▶️ Sass 문법 2 : 사칙연산

  (test.scss)

  $기본사이즈 : 16px;

  .box {
    font-size : $기본사이즈 + 2px;
    width : (100px * 2);
    height : (300px / 3)
  }

• 덧셈뺄셈은 px 단위는 px 단위끼리, % 단위는 % 단위끼리 이렇게 단위를 맞춰줘야하고
• 곱셈 나눗셈은 보통 뒤에 단위를 쓰지 않는다. 혹시라도 사용하면 이상한 자료형이 된다. 곱셈 나눗셈은 괄호 안에 작성해야 잘 먹는다.

(참고)

• SASS없이 그냥 CSS 파일에도 var() 이걸 이용해서 변수문법을 사용가능하긴하다.
• 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙연산을 사용가능하다.

---