sass란?

수현·2021년 6월 14일
0

sass

목록 보기
1/1

Sass란?


우리가 css로 작업을 할 때, 같은 코드를 반복해서 쓰거나 연산을 활용해야 하는 경우 css만으로는 불편함을 느껴보신 적 있으시죠?
Sass(Syntactically Awesome Style Sheets)는 css의 전처리기(CSS pre-processor)라고 흔히 말합니다.
Sass는 코드의 재활용성을 높여주고, 가독성 또한 높여주어 유지보수에 용이합니다.

Sass와 Scss 차이점


간단하게 말하자면 sass의 최신버전 문법이 scss라고 할 수 있습니다.

Sass가 처음 등장했을 때는 css문법과 상당히 차이가 있었습니다.
때문에 사용에 어려움이 생겨 버전3 이상부터 Scss가 등장했습니다.
Scss는 css와 비슷한 문법을 사용할 수 있도록 만들어졌습니다.
아래의 예시를 확인하세요.

  • sass
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px
  • scss
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}
profile
웹퍼블리셔를 꿈꾸는 병아리 입문자입니다 ! 💻

0개의 댓글