Sass를 배우고 블로그에 정리하고 싶었습니다...
교안 따라치기는 그만하려 했지만 꼭 남겨보고 싶었습니다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Sass(Syntactically Awesome Stylesheets)나 SCSS 쓰는 이유
- 스타일시트가 점점 더 커지고 복잡해지면 유지보수가 어렵다.
- Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어 시간을 절약할 수 있다.
- 코드 재사용이 가능하다.
Sass 란
Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다.
브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.
- 브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 한다.
- 웹업계에서 실제 많이 사용하는 전처리기이다.
Sass 기술방식 2가지
Sass를 작성하는데에는 기본적으로 두가지 방법이 있다.
- .sass 기술방식과 .scss 방식 → 다른 파일 확장자를 사용한다.
- Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용한다.
왜냐하면 SCSS는 CSS와 동일하게 중괄호를 사용하는 방식이기 때문이다.
//SCSS $font-stack: Helvetica, sans-serif; $primary-color : #333; body { font: 100% $font-stack; color: $primary-color; }
//Sass $font-stack: Helvetica, sans-serif $primary-color : #333 body font: 100% $font-stack color: $primary-color
파일명 앞에 언더바 _를 붙이는 이유
Partial: ''(언더스코어)를 붙이지 않는다면 분할 된 파일들 모두가 컴파일되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 scss 파일의 이름 앞에 ''(언더스코어)를 붙여서 파일명을 정한다면, Sass에게 이 파일이 main파일의 일부분임을 알려줘서 해당 파일은 css파일로 컴파일 하지 않고 내부에서 @import 형태로 작동하게 된다.
※ css는 import할 때 파일 URL을 적어줘야 하지만, Sass에서 import할 때는 확장명을 제외하고 파일명만을 사용할 수 있다.
주석
주석을 한 줄 작성할 때는 //을 사용하고, 작성한 주석 내용은 sass 내에서만 볼 수 있다. 여러 줄을 작성할 경우 /*을 사용하고, scss파일이 컴파일 될 때 주석 내용이 css 파일에 나타난다.
/* 여러 줄 주석은 볼 수 있다. */ // 한 줄 주석은 볼 수 없다.
중첩(Nesting)
Nesting(중첩)을 사용하면, html의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있다. CSS코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해진다.
<!--HTML--> <nav> <!--nav안에 ul이 중첩되어 있고--> <ul> <!--ul안에 세가지 li가 중첩되어 있다.--> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </nav>
//Scss //Scss에서도 HTML처럼 계층구조로 스타일을 적용할 수 있다. nav { background : #C39BD3; padding : 10px; height: 50px; ul { display: flex; list-style : none; justify-content: flex-end; li { color: white; margin-right: 10px; } } }
중첩을 사용하는 이유는?
기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 할 때마다 최상위 선택자를 반복 선언해야 한다. 하지만 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄이게 된다.
속성 Nesting
중첩은 선택자뿐만 아니라 스타일 속성들도 가능하다.
아래 예시를 보면 .add-icon이라는 클래스 선택자에게 background 스타일을 주려고 한다. 이때, background 이름을 가진 속성( background-image, background-position 등)들을 background안에 중첩 시켜서 스타일 코드를 작성할 수 있다. 속성을 중첩 할 때는 콜론
:
을 사용한다.Sass는 속성이 중첩되었음을 인지하고 css 속성들로 변환한다.
//Scss .add-icon { background : { image: url("./assets/arrow-right-solid.svg"); position: center center; repeat: no-repeat; size: 14px 14px; } }
/*CSS*/ .add-icon { background-image: url("./assets/arrow-right-solid.svg"); background-position: center center; background-repeat: no-repeat; background-size: 14px 14px; }
ampersand 앰퍼샌드
"&"는 상위에 있는 부모선택자를 가리킨다.
1)
&
을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있다.//Scss .box { &:focus{} // 가상선택자 &:hover{} &:active{} &:first-child{} &:nth-child(2){} &::after{} // 가상요소 &::before{} }
2) & 를 응용하면 아래 예시와 같이 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있다.
//Scss .box { &-yellow { background: #ff6347; } &-red { background: #ffd700; } &-green { background: #9acd32; } } //.box라는 이름이 같기 때문에 &를 사용해 중첩구조로 만들 수 있다
정리 잘 하셨네요~~ 잘보고갑니다