CSS, Sass, SCSS

CSS란? 

 

Cascading Style Sheet의 약자로, 웹 페이지를 만들 때 스타일링에 사용되는 스크립팅 언어이다. javascript / html과 함께 가장 인기 있는 웹 개발 기술이다. 
원래 css가 엄청 많이 쓰였는데 sass의 등장으로 기본적인 css의 사용량이 많이 줄었다. sass의 발전된 버전인 scss도 css를 대신해서 많이 쓰이고 있다.

 

CSS 전처리기: Sass(Syntactically Awesome Style Sheets),  SCSS(Sassy CSS)

 

CSS를 더 강력하고 유연하게 사용하기 위한 확장 언어이다.

CSS의 한계를 보완하고, 코드의 재사용성과 유지보수성을 높이기 위해 고안되었다.

기본적으로 Sass와 SCSS는 CSS로 컴파일되기 때문에, 브라우저에서는 최종적으로 CSS 코드만을 읽는다.

그래서 기존의 CSS 파일과 함께 사용할 수도 있으며, CSS의 모든 기능을 그대로 사용할 수 있다.

 

 

<확장된 기능>

 

1. 중첩 선택자 사용 가능

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    text-decoration: none;
  }
}

2. $를 이용해서 변수 정의 가능 

$primary-color: #333;

body {
  color: $primary-color;
}

3. 반복되는 스타일 블록을 재사용할 수 있게 해주는 믹스인

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

 

 

4. 여러 개의 Sass또는 SCSS 파일을 하나의 파일로 결합하기

// main.scss 파일에서 다른 SCSS 파일들을 임포트
@import 'reset';
@import 'typography';

Sass와 SCSS의 차이

 

Sass와 SCSS는 기능적으로는 동일하고, 문법 스타일의 차이만 있다. 

 

Sass는 중괄호와 세미 콜론 없이 더 간결한 문법을 제공하고, SCSS는 기존의 CSS와 비슷한 문법을 사용해서 CSS를 SCSS로 전환하기 용이하다.(확장자명만 바꿔도 된다.)

 

Sass: 중괄호 대신 들여쓰기로 블록을 구분하고, 쉼표 대신 개행을 사용한다. 
SCSS: 원래 css문법처럼 중괄호랑 쉼표를 사용한다.