SCSS: SCSS Ep.2

15 Dec 2022 • TIL

주석

.container {
	h1 {
      color: red;
      /* background-color: blue; */
      // font-size: 60px;
	}
}

  • /* */

    해당 주석은 scss에서 css로 변환(컴파일)했을 때, 주석처리가 남아있다.
    ⇒ 코드가 남아 있다.

  • //

    해당 주석은 scss에서 css로 변환했을 때, 코드가 나오지 않는 (존재하지 않는)다.
    ⇒ 코드가 남아 있지 않다.

중첩 with SassMeister

<div class="container">
	<ul>
		<li>
			<div class="name">Soha</div>
			<div class="age">39</div>
		</li>
	</ul>
</div>
  • css에서는 하나 하나에 모두 부모요소를 작성해 주었다. 상위 선택자를 반복적으로 작성하여 코드가 길어지고 복잡해진다.

  • scss에서는 중괄호를 통해 상위 요소안에서 계속해서 중첩하여 작성해주는 방식을 사용한다.

    .container {
  ul {
    li {
    font-size:60px;
      .name {
        color:royalblue;
      }
      .age {
        color:orange;
      }
    }
  }
}

  • scss로 작성한 코드를 컴파일하여 css로 변환했을 때

    .container ul li {
  font-size: 60px;
}
.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

  • 자식 선택자로 css 변환하기

    중첩을 이용해서 작성하면 기본적으로 후손 선택자(띄어쓰기 O)로 적용이 된다.cc 그렇다면, 자식 선택자(띄어쓰기 X)로 하려면 어떻게 해야 할까?

    자식 선택자로 하고 싶은 태그 앞에 꺾쇠 괄호를 닫아주면 자식 선택자로 변환이 된다.

    .container {
  > ul {
    li {
      font-size:60px;
      .name {
        color:royalblue;
      }
      .age {
        color:orange;
      }
    }
  }
}

    .container > ul li {
  font-size: 60px;
}
.container > ul li .name {
  color: royalblue;
}
.container > ul li .age {
  color: orange;
}

Sass Meister

codepen에서 작성할 경우 컴파일 버튼을 눌러야 css로 변환된 형태를 확인 할 수 있다. 이렇게 하면 약간의 번거로움이 발생한다.

Sass Meister 웹 사이트를 통해서 왼쪽은 scss 내용, 오른쪽에는 css 내용을 한 눈에 확인 할 수 있다.

상위(부모) 선택자 참조

상위 선택자 참조는 ‘&’기호를 사용한다.

‘&’ 기호가 붙어있는 것은 해당 기호가 있는 중첩된 선택자 영역에 (여기서는 btn) 해당하는 선택자가 들어와서 치환되었다.

해당 코드에서 ‘&’ 기호가 있는 클래스는 active, 해당 클래스를 감싸는 영역은 btn 클래스이다. 정리하면, active 클래스가 일치 선택자를 통해서 btn 클래스와 붙어져 있다.

반대로 말하면, 해당 기호가 상위 선택자를 참조하고 있다고 말할 수 있다.

그냥 단순하게 쉽게 말하면 ‘&’기호가 붙어져 있는 태그와 바로 상위 태그는 css로 변환했을 때 붙어져서 변환된다!!

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

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

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

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

  • 활용하기

    .fs {
  &-small {font-size: 12px;}
  &-medium {font-size: 18px;}
  &-large {font-size: 25px;}
}

    .fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 18px;
}
.fs-large {
  font-size: 25px;
}
 TIL  SCSS

Comments

Related Posts