✅ Sass란 무엇일까
1️⃣ Sass를 사용하는 이유
css를 조금이라도 다뤄본적 있는 사람이라면 공통적으로 느끼는 단점이 있습니다. 코드를 작성하다 보면 css의 규모가 커지고 복잡해져 추후 유지보수에 있어 엄청난 불편함을 느끼게 됩니다.
이러한 불편함을 최선으로 개선하기 위해 나온 Sass라는 확장 프로그램이 나오게 되었습니다.
Sass를 사용하게 되면 코드 작성에 대한 시간이 줄어들고, 유지와 관리에 도움을 주게 됩니다.
| 종류 | 설명 |
|---|---|
| 호환성 | 모든 버전의 CSS와 완벽하게 호환됩니다. |
| 기능성 | css에는 없는 유용한 기능을 지원합니다. |
| 인지도 | 업계에서 많이 사용되고 있습니다. |
| 확장성 | Sass기반의 프레임워크가 다수 존재합니다. |
이 외에도 다양한 이유가 있습니다.
2️⃣ css / sass / scss 차이점
💡
sass와scss는 Nesting 구조(중첩 구조)를 가지고 있습니다.
sass는 들여쓰기에 예민하기 때문에 반드시 지켜줘야 합니다.
scss는 중괄호로 구분을 짓기 때문에 오류날 가능성이 적습니다.
3️⃣ 7-1 패턴란?
☝🏻 파일명에 _가 붙는 경우
@import되어 사용될 것으로 파악합니다.
가이드라인
| 이름 | 설명 |
|---|---|
| base | 리렛, 타이포그래피 규칙 등 전체 스타일에서 기본이 되는 스타일이 들어있는 폴더 |
| components | 버튼, 케러셀, 커버, 드롭다운 등 한 덩어리씩 떨어뜨려 생각할 수 있는 스타일을 담는 폴더 |
| layout | 굵직 굵직한 큰 섹션 네비게이션, 헤더, 푸터, 폼요소 등 레이아웃을 나눠서 관리할 수 있는 폴더 |
| pages | 로그인 페이지, 마이 페이지 등 페이지 단위로 스타일을 나누는 폴더 |
| themes | 디폴트 테마, 다크 테마, 라이트 테마 등 테마에 관련된 스타일을 넣는 폴더 |
| abstracts | 변수, 함수, 믹스인, 플레이스 폴더 들 추상적인 것들은 넣은 폴더 |
| vendors | 필요에 의해 사용되는 외부 스타일 소스(예시 : 부트스트랩, 제이쿼리 ui스타일 등) |
3️⃣ @import 예시
css는 기본적으로 제일 하단에 있는 소스 부터 읽기 때문에 최상단에 기본이 되는 변수나 믹스인, 리셋 스타일이 있고 그 이후에 component 스타일을 넣게 됩니다.
4️⃣ Sass Variables(변수)
변수파일을 사용하게 되면 추후 수정사항이 생겼을 시 변수만 변경해주면 일괄적으로 적용되어 수정하기 편합니다.
사용방법
5️⃣ mixin
자주쓰는 코드 집합이나 재사용성을 유리하게 해주는 코드라고 보면 됩니다.
예시 말줄임표나 텍스트 스타일 등 자주 사용되는 css를 미리 구성해 두어 @include name; 으로 불러올 수 있게 합니다.
사용방법
$text를 통해 값을 받아 넣을 수 있습니다.
사용방법
값을 정의한 순서대로 작성하여야 합니다.
6️⃣ @function
변수를 받아서 원하는 값으로 가공한 뒤 return하는 함수로 사용할 수 있습니다.
사용방법
