오늘도 문법 내용보다 문법을 어디에 쓸지 그 용도를 중요하게 기억해줘야 한다.
용도를 알아야 내가 문법을 자유자재로 사용가능하니까요.
sass 파일과 scss 파일
.sass 파일도 만들 수 있는데 이 파일은 여러분이 SASS 문법으로 코드짤 때 중괄호 생략이 가능하다.
.box
font-size : 16px;
.main-bg
color : red이렇게 짤 수 있다.
하지만 저같은 틀딱들은 괄호 있는게 좋아서 .scss 파일을 쓰도록 하겠다.
인터넷에서 예제코드 복붙 많이 하는 분들도 .scss 파일 쓰는게 좋다.
(인터넷 예제코드들은 다 중괄호 있잖아요)
Sass 문법 2. 셀렉터 대신 쓰는 Nesting
셀렉터를 많이 사용하다보면 코드 자체가 복잡해진다.
예) div.container > div p.first > span::after
셀렉터 조금만 복잡해지면 처음 보는사람은 이거 보자마자 무슨 요소인지 제대로 파악조차 어렵다.
그래서 셀렉터의 외모를 개선할 수 있는 Nesting이라는 문법이 존재한다.
.navbar {
ul {
width : 100%;
}
li {
color : black;
}
}
/*위에건 SASS 문법*/
.navbar ul {
width : 100%;
}
.navbar li {
color : black;
}
/*밑에건 CSS 문법*/위 두개의 코드는 같은 기능을 하는 코드이다.
중괄호 안에 또 셀렉터를 쓰시면 그것은 셀렉터상의 스페이스바 문법과 동일하게 작성가능하다.
사용하는 이유는 이거 딱 하나이다.
"UI들을 뭉텅이로 관리할 수 있어서" 이다.
navbar 내부에 속한 요소들을 저렇게 정리해놓으면 나중에 관리가 편해지지 않을까요?
navbar 내부에 있는 글자 하나 바꾸려고 하면 .navbar {} 중괄호만 뒤져보면 되잖아요.
참고1. 그럼 아까 그 div.container > div p.first > span 예제는 이렇게 써야하나요?
div.container {
>div {
p.first {
>span {
}
}
}
}이러면 되는데.. Nesting하실 때 괄호를 저렇게 3개 4개 타고 들어가는건 권장하는 방법이 아니다. 최대 2개이다!!
SASS 문법 쓰거나 안쓰거나 셀렉터 저렇게 길게 나열하는건 좋은 관습이 아니다.
깔끔하게 클래스 하나 선언하자.
참고2. 그럼 :hover 같은거 붙이려면 어케해야해요?
.navbar {
:hover {
color : blue;
}
}
.navbar {
&:hover {
color : blue;
}
}위처럼 쓰면 .navbar :hover를 잡게 되고
밑처럼 쓰면 .navbar:hover를 잡게 된다.
밑에처럼 &기호를 붙여주시면 셀렉터를 스페이스바 없이 붙일 수 있다.
참고로 Nesting 문법은 꼭 써야하는게 아니다.
저는 귀찮아서 그냥 안씁니다.
Sass 문법 3. 이미 있는 클래스를 확장하는 @extend
이미 존재하는 속성들을 복붙하지 않고 사용하실 수 있다.
@extend 그리고 여러분이 복붙해야할 클래스 명을 뒤에 적어주시면 끝이다.
.btn {
font-size : 16px;
padding : 10px;
background : grey;
}
.btn-green {
@extend .btn;
background : green;
}@extend를 사용하신 후 복붙할 클래스명을 뒤에 적으면, 클래스명에 있던 모든 내용이 복붙된다.
보통 비슷한 디자인의 요소들을 양산할 때 많이 사용한다.
% 기호는 .대신 쓸 수 있는 임시클래스인데, CSS파일에서 클래스로 컴파일하지 않고싶을 때 쓰는 기호이다.
컴파일하고나면 %기호 안에 있는 것들은 흔적도 없이 사라진다.
