CSS (Cascading Style Sheets (CSS)) SASS (Syntactically Awesome Style Sheets) SCSS (Sassy CSS)

CSS 에서 사용하기 불편한 중복이나 반복구문을 없애기 위한 전처리기CSS Preprocessor이다.

Sass(Syntactically Awesome Style Sheets), Less, Stylus 같은 애들이 있는데, 뭐 있다는 것만 알고 아무튼 각자 편한 문법으로 작성한 뒤, Compile 하여 CSS 를 만들어준다.

Github page theme 때문에 SCSS 를 쓰게 됐는데

.pure-table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
  thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
  }
  th, td {
    padding: 0.5em 1em;
    border-left: 1px solid #cbcbcb;
    font-size: inherit;
    margin: 0;
    overflow: visible;
  }
  td {
    background-color: transparent;
  }
}

난 Less 도 모르고 Stylus 도 몰라. 그냥 SCSS 만 쓰고 있는데, 다 알아야하나?

문법은 Sass 가 Stylus 와 비슷하고, SCSS 는 Less 와 비슷하다. Sass 와 SCSS 는 하나의 컴파일러로 모두 컴파일 가능하다.

Sass 의 3버전에서 새롭게 등장한 SCSS 는 Sass 의 모든 기능을 지원하는 CSS 의 상위집합(Superset) 이다. 둘의 가장 큰 차이는 {bracket} 과 semicolon; 의 유무다.

정말 귀찮아서 예제는 퍼왔습니다. 죄송해요!

.list
width: 100px
float: left
li
  color: red
  background: url("./image.jpg")
  &:last-child
    margin-right: -10px

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

으어 더 찾아보기 귀찮다.

출처

• Sass(SCSS) 완전 정복!