1. CSS의 기반 SASS 기본 정의 (변수,중첩)

SASS는 CSS에 존재하지 않는 기능들을 사용 할 수 있어 편리하다.

기능

1. 변수

2. 중첩

3. 혼합

4. 상속

등으로 이루어져 편리하게 사용할 수 있고 코딩 시간을 단축할 수 있다.

웹스톰에서 Sass를 수정하면 자동적으로 CSS가 수정된다. (알아서 CSS에 맞게 수정됨)

변수

- 색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값을 저장할 수 있습니다. Sass는 $기호를 사용하여 무언가를 변수로 만듭니다. 다음은 그 예입니다.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass가 처리되면 $font-stackand에 대한 변수를 정의하고 $primary-color CSS에 변수 값을 넣은 일반 CSS를 출력합니다.

브랜드 컬러로 작업하고 사이트 전체에 일관성을 유지할 때 이것은 매우 강력 할 수 있습니다.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

중첩

nav { << 이거 안에 다 들어간 것 임. 장점 : 메모리도 덜 차지하고, 반복해서 안써도 되서 좋음
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

위에는 SASS만 가능한 것이다. 만약 CSS로 코딩한다면

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

이렇게 코딩하여야 한다.