1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..)
2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트)
3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트)
# Sass는 한줄주석 (//)과 여러줄 주석(/* */)을 둘다 사용할 수 있다.
- 한줄짜리 주석(//)은 컴파일 시 css파일에 반영되지 않고
- 여러줄 주석(/* */) 만 반영되는 차이점이 있다!
프라이빗한 내용을 작성하려면 한줄 주석 사용하기!
# 중첩규칙(nesting)에 대하여 알아보자!
중첩작성이 css구문과 Sass구문의 가장 큰 차이점이자 핵심이라고 생각한다.
Html 부모요소 자식요소 관계를 들여쓰기로 작성해 나가듯 Sass도 스타일을 들여쓰기와 중첩규칙 이용하여 직관적이고 깔끔하게 작성 가능!! 수정도 간편!
특히 규모가 큰 프로젝트 진행시에 Sass가 장점을 발휘한다.
css에서 스타일을 주기 위해선 모든 선택자의 경로를 일일히 반복해서 선언해야 하고 코드수정시에 모든걸 수정해야하는 반면,
Sass는 중첩규칙을 이용하여 선언문을 계속 반복해 쓰지 않고 코드를 최소화 할 수 있다.
개념을 알았으니 시험해볼 단계!
<div class="container">
<h1>제목h1</h1>
<p>문단내용 p와<span> 그 안의 span</span></p>
</div>
관계작성이 완료됐다면 중첩규칙의 scss를 사용해보자
중첩규칙을 사용하지 않고 작성 했기에 선택자와 선언문이 줄줄이 나열된 모습..
이런 불편함을 줄이기 위해 Sass를 사용하는 것이다 ~~
쨔잔 이게 바로 중첩규칙을 사용하는 이유! 보기도 좋고 손도편하고!
부모 자식은 중첩하고 형제끼리는 같은선상에 작성한다.
왼쪽이 컴파일 된 css파일인데 컴파일 된 최종결과물엔 css구문규칙대로 작성되어 빌드된다.
****
지나친 중첩은 가독성을 떨어뜨리니 한두단계만 중첩하도록 한다.
****
# 단축속성
단축속성은 여러가지 css 속성값을 함께 묶어 공통지정할 수 있는 속성이다.
중첩규칙처럼 속성중첩을 이용하여 단축속성의 하위속성을 그룹화 할 수 있다.
예를들어
font-family : sans-serif;
font-size: 24px;
font-weight: bold;처럼 font라는 속성명을 중복으로 줄줄이 쓸 필요 없이
font: {
family: sans-serif;
size:24;
weight: bold;
}이렇게 접두어를 뺀 하위속성으로 중첩하여 쓸 수 있는 기능이다. (= 네임스페이스 속성 중첩)
# 상위선택자참조
기호 &(엠퍼센드)를 사용하여 상위 선택자(자신을 감싸고 있는 선택자)를 참조할 수 있다.
의사클래스(가상클래스)를 선택하고자 할때 유용하게 쓰인다고 한다.
서로다른 클래스에 서로다른 스타일을 적용할 때도 사용가능하다.
button{
&:hover{
background-color: red;
}
}
/* &는 즉 button을 뜻한다! */구문은 달라도 button:hover{background-color: red;} 과 같은말!
적용해보면
내가 본 학습영상 출처(너무 쉽게 잘 설명 해주신다 꼭 보러가세요!)
https://www.youtube.com/watch?v=067w8vxXWNk&list=PLFeNz2ojQZjtxZTdHpjDK8kTkz4ck2vaJ&index=5
'WEB UIUX > Sass \ SCSS' 카테고리의 다른 글
| [Sass]혼자 유튜브 영상보고 Sass익혀보기 #6(믹스인) (0) | 2022.11.01 |
|---|---|
| [Sass]혼자 유튜브 영상보고 Sass익혀보기 #5(변수) (1) | 2022.10.28 |
| [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트) (0) | 2022.10.27 |
| [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) (0) | 2022.10.06 |
| [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) (0) | 2022.10.06 |
