📌 Sass 중첩
CSS의 뜻은 Cascading Style Sheets이다.
여기서 cascading이란 위에서 아래로 흐른다는 뜻을 가지는데
부모에서 자식으로 상속되는 것과 비슷하다고 생각하면 될 것 같다.
하지만 css는 아래와 같이 작성해야 하며 위에서 밑으로 내려오는 느낌이 전혀 없다.
이건 짧은 수준..점점 더 길어진다고오ㅠㅠ
하지만 이걸 Sass로 작성하게 된다면
쭉쭉 내려오는 느낌이 들지 않나요!!!!!!!!
앞에 반복해서 class명 적지 않아도 되서 행복한 1인
📌 Sass 참조 (&)
Sass는 특이한 선택자가 몇가지 있는데 바로 &이다.
이런식으로 부모선택자의 이름을 반복해서 작성할 필요 없이 & 하나만으로 처리가 가능하다.
css로는 이렇게 변환된다.
📌 Sass 변수
- Sass의 변수는 컴파일되면서 사라진다. (CSS 파일에서 보이지 않음)
- Sass의 변수는 한 번에 단 하나의 값만 가진다.
- Sass의 변수는 재할당 시 이전 내용을 변경하지 않는다.
위와 같이 $변수명: 값; 으로 변수를 선언한 후 사용이 가능하다.
선언 위치에 따라 전역변수 또는 지역변수로도 사용 가능하며 -(하이픈)과 _(언더스코어)는 동일하게 취급된다.
변수의 사용은 ①값이 여러곳에서 반복되거나 ②수정될 가능성이 높을 때 사용하는 것이 가장 좋다.
📌 Sass 보간
Sass에서는 변수를 CSS속성값 안에 그대로 끼워넣는 것도 가능하다.
그대신 위의 사진처럼 #{}사이에 변수를 작성해야한다.
(같은 사진을 여러번 쓴다거나 rgba의 opacity값만 달라질 때 사용하면 편할듯 !!)
📌 Sass 주석
css에서 주석은 /* */ 형태로 사용되었고 알려지면 안되는 내용을 주석으로 다는 것은 불가능했다.
하지만 scss에서는 // 형태의 인라인 주석을 사용할 수 있다.
//으로 작성하면 컴파일 후에 css 파일에서는 보이지 않고, /* */으로 작성하면 css처럼 적용된다!!
📌 Sass 출력
1) compressed (압축)
- 압축 스타일은 최소한의 공간을 차지하도록 압축한 형태로, 타인이 읽는 상황을 고려하지 않는다.
- 꼭 필요한 공백을 제외하고는 모두 삭제한다.
명령어)
sass style.scss:style.css --style compressed
EX)
<style>
#main{color:#fff;background-color:#000}#main p{width:10em}
</style>2) compact (축약)
- 축약 스타일은 중첩이나 확장보다 공간차지를 덜 한다.
- 각각의 CSS 규칙을 한 줄로 표기하며 줄 마다 선택자가 앞에 있기 때문에 속성보다는 선택자에 더욱 집중하게 한다.
명령어)
sass style.scss:style.css --style compact
EX)
<style>
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
</style>3) expanded (확장)
- 확장 스타일은 CSS 작성 스타일과 거의 같다고 할 수 있다.
- 속성은 규칙 안에서 들여쓰기 하여 한 줄로 작성하고, 규칙은 들여쓰기 하지 않는다.
명령어)
sass style.scss:style.css --style expanded
EX)
<style>
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
</style>4) nested (중첩)
- 중첩 스타일은 Sass의 기본 출력 스타일로, CSS 스타일과 HTML 문서의 구조를 잘 보여준다.
- 각 속성은 한 줄에 작성하고, 각 규칙은 중첩 정도에 따라 들여쓰기 한다.
- 그 덕분에 스타일 구조를 쉽게 알 수 있으며 큰 CSS 파일을 살펴볼 때 더욱 유용하다.
명령어)
sass style.scss:style.css --style nested
EX)
<style>
#main {
color: #fff;
background-color: #000; }
p {
width: 10em; }
</style>