티스토리 뷰
Scss를 작성하고자 할 때, 기본적인 파일 구조는 어떻게 되며, 사용 방법은 어떻게 되는지 알아보자.
💻 파일 구조
- index.html
- style
- style.css
메인으로 띄울 html 파일과 style 폴더를 만들어 그 안에 CSS 파일들을 생성할 것이다. 다만 이때 .css 대신 .scss 파일을 생성한다. SCSS는 처음에도 언급했듯이 브라우저가 컴파일 할 수 없다. 따라서 우리는 SCSS을 활용하여 파일을 작성하고 SCSS 컴파일러가 파일을 읽고 속성에 맞는 CSS로 매핑시켜 자동으로 CSS 파일을 생성해준다. 웹에는 그 후에 올라가게 되는 것이다.
즉 우리는 편하게 SCSS로 작성하기만 하면 컴퓨터가 자동으로 CSS 파일을 생성해준다는 것!!
🎯 중첩(Nesting)
💡 /**/ 주석은 컴파일 시 생성된 CSS 파일에 그대로 노출, // 주석은 제거된다!
우선 위의 파일구조와 동일하게 디렉토리와 파일을 생성하고, index.html의 body 태그에 다음과 같은 nav bar를 작성해보자.
<!-- index.html -->
<html>
...
<nav>
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
<li class="four">four</li>
</ul>
</nav>
...
</html>작성하고, index.html 파일을 띄워보면 다음과 같은 무미건조한 list가 뜰 것이다. 이제 꾸밈 기능을 넣어보자.
1) 중첩구조
Scss를 아예 모르는 현 상태로 CSS 파일을 작성한다면 다음과 같이 작성할 수 있다.
/* style/style.css */
nav {
background-color: rgb(223, 169, 223);
padding: 10px;
height: 50px;
}
nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
nav ul li {
margin-right: 10px;
color: white;
}nav 태그의 배경색과 ul 태그 오른쪽 정렬 등을 포함해 여러 속성들을 부여한 모습이다. 이는 html 구조가 한눈에 보기 힘들 뿐더러, nav 태그와 ul 태그는 계층 구조를 알리기 위해 불필요하게 여러 번 반복되는 모습이다. 이를 SCSS의 중첩구조를 이용하여 나타내보자!
/* style/style.scss */
nav{
background-color: rgb(223, 169, 223);
padding: 10px;
height: 50px;
ul{
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
li{
margin-right: 10px;
color: white;
}
}
}위와 비슷한 듯 다른데, 이 편이 다른 개발 언어 문법과 조금은 더 유사해보인다. 우선 nav와 ul, li 태그의 계층 구조가 한눈에 들어오며 불필요한 반복이 삭제되었다. 벌써부터 상쾌한 기분이 든다! 중첩과 관련된 SCSS의 더 다양한 기능들을 알아보자.
2) 부모선택자 &
&는 현재 자신이 포함된 괄호의 선택자를 가리킨다. 예를 들어 li 태그에 hover 효과(1초 동안 글씨가 보라색으로+커서모양 변경)를 준다고 생각해보면,
/* style/style.scss */
nav{
...
li{
margin-right: 10px;
color: white;
transition: all 1s;
&:hover{
color: purple;
cursor: pointer;
}
}
...
}이렇게 쓸 수 있는 것이다. &기호는 li 괄호 안에 소속되어 있으므로 li를 가리킨다. 즉, 해당 속성은 li의 hover 를 뜻하게 되는 것이다.
만약 content-small, content-medium, content-large 라는 이름을 클래스 이름으로 가지는 각각의 div가 존재한다면,
.content{ &-small{ ... } &-medium{ ... } &-large{ ... } }
와 같이 표현하여 속성들을 부여 할 수 있다.
3) 중첩에서 벗어나는 @at-root
이는 중첩된 구조 안에서만 사용할 수 있는 구문으로, 중첩 내부로 부터 해당 속성을 전역 속성으로 변경시켜준다. 이후에 간단한 글을 끌어와서 이를 사용해보자.
/* style/style.scss */
...
div{
padding: 10px;
@at-root p{
color: gray;
}
}본래라면 div 내부에 있는 p에 한해 속성이 정의 되어야 하지만, 컴파일을 직접 해보면 @at-root를 앞에 붙이게 되면 해당 태그는 중첩 구조와는 별개로 맨 상단의 태그 속성으로 빠지게 된다.
/* 컴파일시 생성된 CSS */
...
div {
padding: 10px;
}
p {
color: gray;
}
💻 SCSS 코드 전문
/* style/style.scss */
nav{
background-color: rgb(223, 169, 223);
padding: 10px;
height: 50px;
border: double white {
radius: 20px;
};
ul{
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
li{
margin-right: 10px;
color: white;
transition: all 1s;
&:hover{
color: purple;
cursor: pointer;
}
}
}
}
div{
padding: 10px;
@at-root p{
color: gray;
}
}
📚 하나씩 쌓여가는 SCSS 기능
- 중첩구조
=> 불필요한 코드를 줄이고, 구조화를 통한 가독성 UP!
- 부모 선택자 &
- 중첩 구조 탈출 @at-root
Inflearn에서 제주코딩베이스가 진행하는 [초급] 40분만에 훑어보는 Sass 강좌 수강 후 작성하였습니다.
Github: https://github.com/Chaemin-L/Sass_study/tree/main/01_Nesting
'Front-end > Sass & SCSS' 카테고리의 다른 글
| [Sass/SCSS] Sass/SCSS란 무엇이고, 왜 사용하는가? (0) | 2022.07.14 |
|---|
