[Sass] Sass(1) - 기초

hyesom·2022년 3월 29일
0

CSS

목록 보기
15/18
post-thumbnail

❓ Sass? SCSS?

  • Sass : Syntactically Awesome Style Sheets(문법적으로 짱 멋진 스타일시트)의 줄임말
  • SCSS : Sassy CSS(멋진 CSS)의 줄임말
  • Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
  • CSS의 태생적 한계를 보완해준다.
    ① 변수의 사용
    ② 조건문과 반복문
    ③ Import
    ④ Nesting
    ⑤ Mixin
    ⑥ Extend / Inheritance

❓ CSS Preprocessor

  • Sass와 SCSS는 CSS Preprocessor(전처리기)이다.
  • CSS가 동작하기 전에 사용하는 기능이다.
  • 웹에서는 CSS만 동작하기 때문에 전처리기로는 직접 동작시킬 수 없다.
  • 전처리기로 작성을 한 후 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)한다.

❓ Sass 와 SCSS의 차이점?

  • Sass와 SCSS의 차이는 {}(중괄호);(세이콜론)의 유무이다.
<ul class="computer">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
/* ===== 1. CSS ===== */
.list {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list li {
  color: blue;
  margin-right: 10px;
}
.list li:last-child {
  margin-right: 0;
}

/* ===== 2. Sass ===== */
.list
  width: 100px
  display: flex
  justify-content: center
  align-items: center
  li
    color: blue
    margin-right: 10px;
    &:last-child
      margin-right: 0

/* ===== 3. SCSS ===== */
.list {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  li {
    color: blue;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글