[0919 TIL] scss 간단히 알아보기
중첩문의 지원
.container {
display: flex;
.item {
background-color: red;
> span {
background-color: blue;
&:hover {
background-color: green;
}
}
}
}
이러한 scss는 아래와 같이 변경될 수 있다.
.container {
display: flex;
}
.container .item {
background-color: red;
}
.container .item > span {
background-color: blue;
}
.container .item > span:hover {
background-color: green;
}
&연산자
&연산자는 상위부모태그를 가져온다.
따라서 앞에서 본 &:hover
의 경우도 span:hover
로 변경된것을 확인할 수 있다.
$연산자
$는 변수를 만들어주어 재사용이 가능하게 한다.
.container {
.content {
$size: 200px;
width: $size;
height: $size;
@at-root .header {
width: $size;
}
}
}
유효범위는 선언된 중괄호 내부이다.
정의한 변수는 사용하고 싶지만 root에 정의를 하고 싶은 경우 @at-root를 사용하게 된다면, 최상위의 header에 적용이 되는걸 알 수 있다.
!global
기존에 쓴 root 변수를 덮어쓸수 있으므로 주의해야한다.
.box-a {
// !는 flag라고 부르며 글로벌이다.
$h: 200px !global;
width: $w;
height: $h;
margin: $w;
}
!default
$primary: blue;
.box {
$primary: orange !default;
}
기존에 할당된 값이 변수에 있다면 할당된 값을 사용한다.
Author And Source
이 문제에 관하여([0919 TIL] scss 간단히 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinn2u/0919-TIL-scss-간단히-알아보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)