반응형
jwss
jw 노트
jwss
전체 방문자
오늘
어제
  • 분류 전체보기 (32)
    • 퍼블리셔 일상 (2)
    • Programming (25)
      • HTML (4)
      • CSS (17)
      • JavaScript (2)
      • jQuery (2)
    • Git (2)
    • Web (0)
    • 강의 정리 (3)
      • 퍼블리싱 수업 (3)
      • 노마드코더 (0)

블로그 메뉴

  • 홈
  • Programming

공지사항

인기 글

태그

  • SASS
  • HTML
  • 기본개념
  • js
  • css
  • GIT
  • 웹퍼블리셔

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
jwss

jw 노트

Programming/CSS

[Sass] CSS 전처리기 Sass

2022. 12. 12. 21:35

CSS 전처리기란?

CSS는 프로젝트 규모가 커지면 쉽게 지저분해지고 유지보수가 어려워지는 단점이 있다.

CSS 전처리기는 이러한 CSS의 한계를 보완하기 위해 자신만의 특별한 문법을 갖고 CSS를 생성하는 프로그램이다.

메타언어로서 추가 기능과 도구를 제공하여 CSS 구문을 개선한다.

 

대표적인 전처리기로는 Sass, LESS, Stylus 등이 있다.

 

Sass 그리고 SCSS

  • Sass: Syntactically Awesome StyleSheet
  • SCSS: Sassy SCC

 

CSS 전처리기라고 하면 대표적으로 Sass에 대해서 들었을텐데 그 때 꼭 같이 듣게 되는 것이 SCSS이다.

 

Sass는 들여쓰기 감지를 핵심 특성으로 갖는 표기법과 전처리기 두 가지를 의미한다.

Sass는 코드를 작성할 때 중괄호를 사용하지 않고 들여쓰기로 구문을 감지하고 세미콜론을 사용하니 않는다.

이 문법은 css 문법과 다소 차이가 있다.

 

Sass의 개발자들이 CSS와 차이를 좁히기로 결정하면서 등장한 것이 SCSS이다.

 

SCSS는 Sass 3.0에서 등장한 표기법이다. Sass의 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 각광받고 있다.

 

Sass의 SASS 표기법과 SCSS 표기법에는 이런 차이가 있다.

  SCSS 표기법 SASS 표기법 CSS
중괄호 {} 필요 불필요
(2문자 들여쓰기가
코드 블록을 의미함)
필요
세미콜론 ; 필요 불필요 필요
: 뒤 공백 불필요 필요 불필요
Mixin @mixin = 없음
Include @include + 없음
확장자 .scss .sass .css

 

참고로 Sass, SCSS 등으로 작성된 파일들은 곧바로 웹에서 적용할 수는 없다.

웹은 기본적으로 CSS 파일만 읽을 수 있기 때문에 이 파일들은 별도로 컴파일하는 과정을 거친 후 css 파일로 변환해서 사용한다.

 

 

 

반응형

'Programming > CSS' 카테고리의 다른 글

[Sass] Sass 작성 규칙  (0) 2022.12.14
[CSS] CSS Flex에 대해 알아보자  (0) 2022.12.11
[CSS] CSS Grid에 대해 알아보자  (0) 2022.11.24
[CSS] 속성 값의 크기 단위  (0) 2022.06.23
[CSS] CSS 색상 표현방법 (RGB, HSL 등)  (0) 2022.06.21
    'Programming/CSS' 카테고리의 다른 글
    • [Sass] Sass 작성 규칙
    • [CSS] CSS Flex에 대해 알아보자
    • [CSS] CSS Grid에 대해 알아보자
    • [CSS] 속성 값의 크기 단위
    jwss
    jwss
    안녕하세요. 웹퍼블리셔 공부 블로그입니다.

    티스토리툴바