[Sass문법정리] 2. 주석, 데이터타입, 중첩

4.1. 주석

SCSS의 주석은 두가지가 존재합니다.

             /* */ - 의 기존에 CSS에서 쓰는 주석으로 컴파일 후에도 CSS파일에 남는 주석입니다.

             // - 로 CSS에서는 쓰이지 않는 주석입니다. 컴파일하면 CSS파일에서는 제거됩니다.

4.2. 데이터 타입

데이터	설명	예시
Numbers	숫자	1, 0.2, 20px 2em
Strings	문자열	bold, relateive, “/images.a.png”
Colors	색상	red blue #ffffff
Booleans	논리	true, false
Nulls	비어있음	null
Lists	공백이나 쉼표로 구분된 값의 목록	(apple, orange, banana), apple orange banana
Maps	Lists와 유사하나 값이 key : value 값으로 저장됨	(apple:a, orange: om banana: b)

 

Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항을 소개합니다.

Numbers: 숫자에 단위가 있거나 없습니다.

Strings: 문자에 따옴표가 있거나 없습니다.

Nulls: 속성값으로 null이 사용되면 컴파일하지 않습니다.

Lists: ()를 붙이거나 붙이지 않습니다.

Maps: ()를 꼭 붙여야 합니다.

4.3. 중첩

4.3.1. 중첩이란?

CSS와는 다르게 SCSS는 선택자를 Nesting이 가능합니다.

SCSS예제

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

CSS예제(컴파일후)

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

4.3.2. & (ampersand) – 상위 선택자 참조

중첩 안에서 &키워드는 상위(부모) 선택자를 참조합니다.

SCSS예제

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

CSS예제(컴파일후)

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

4.3.3. @at-root – 중첩 벗어나기

중첩에서 벗어나고싶을때는 @at-root를 사용합니다.중첩 안에서 생성하되 중첩 밖에서 적용하여 사용해야하는 경우에 사용합니다.

SCSS 예제

.list {
  $w: 100px; //$가 붙으면 변수
  $h: 50px;  //변수는 중괄호 밖에서는 적용이 안됨 (local variable)
  li {
    width: $w;
    height: $h;
  }
  @at-root .box { //변수를 적용하기 위해서  .list 안에 설정
    width: $w;     //하지만 구조는 .list밖에 두고싶어서 @at-root 사용
    height: $h;
  }
}

CSS 예제

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

4.3.4. 중첩된 속성

border-style, border-color 등과 같이 동일한 네임스페이스를 가진 속성(단축속성이 풀이된)은 다음예제와 같이 사용 가능합니다.

SCSS예제

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

CSS예제

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}