SASS-(1) 선언,변수,중첩 제외

SASS

파일 명 .scss
css를 편하게 작성하기 위한 방법으로
하위요소의 스타일을 작성 할 때 상위요소의 {}안에 작성한다.

body{
    font: {
        size: 12px;
        family: "맑은 고딕";
    };
    padding: {
        left: 50px;
        right: 10px;
        top: 20px;
        bottom: 10px;
    };
}

scss 파일에서 위와 같이 작성하면

body {
  font-size: 12px;
  font-family: "맑은 고딕";
  padding-left: 50px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

css에서는 위와 같이 작성된다.

font: {
	size: 12px;
	family: "맑은 고딕";
}

와 같이 작성 시, 띄워쓰기 및 : 필

---

나 자신 &

            <li class="fs-small">menu1</li>
            <li class="fs-medium">menu2</li>
            <li class="fs-large">menu3</li>

.fs{
    &-small{
        font-size: 14px;
    }
    &-medium{
        font-size: 18px;
    }
    &-large{
        font-size: 24px;
    }
}

위와 같이 html의 class에 값을 지정할 때 묶어 지정할 수 있다.

li{
	&:nth-child(1){ color:#fff;}
    &:hover{ background:red;}
    &:after{ content:"글자";}
   }

위와 같이 html의 li에 선택자를 nth-child로 지정할 때, :hover를 줄 때 등에도 묶어 지정할 수 있다.

---

변수 선언 $

$글자 : 속성값;

$width: 100px;
li{
	width:$width;
    }

와 같이 선언, 및 적용한다.
css에서 :root{--글자:속성값;}으로 지정하던 때와 같이 scss 파일의 상단에 적어주어야한다.
body안에 작성하면, 작성 된 곳의 하단, 자식요소에만 작동한다.

$width: 100px;
li{
	width:$width !golbal;
    }

상위 요소에도 사용하고 싶다면, 위와 같이 !golbal 을 뒤에 작성해준다.

---

중첩 벗어나기 @at-root

중첩 안에서 작성하지만, 다수에 적용되기 때문에 css상에서는 중첩 밖에서 작성되는 것으로 출력하고 싶을 때 작성하는 코드

<div id="wrap">
	<div id="no1" class="black">
    </div>
    <div id="no2" class="black">
    </div>
</div>

html이 위와 같을 때,

▶

#wrap{
	#no1{
    	&.black{background:black}
    }
}

으로 작성하면 css상에서 선택자가 #wrap #no1.black으로 작성되어
id가 no1인 div에만 backgrond:black이 적용되지만

▶

#wrap{
	#no1{
    @at-root .black{background:black}
    }
}

으로 작성하면 css상에서 선택자가 .black으로 작성되어
class가 black인 모든 요소에 backgrond:black이 적용된다.

응용

• A요소에서 변수선언$ 한 것을 A요소 바깥에 존재하는 요소B에 사용하고 싶을 경우
  (이 경우, @at-root를 사용하지 않고 A요소의 변수선언$에 !golbal을 줘도 해결됨)
• 여러요소에 영향을 끼치는 class에 값을 지정할 때

---