1. SCSS의 폴더 구조
✅ 7-1 Architecture (7-1 패턴 / 폴더 구조)
- 7-1의 의미 : 7개의 폴더와 하나의 파일.
- 즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용.
아래와 같은 구조를 가진다.
1. base : 사이트 전반에 걸쳐서 재사용되는 스타일을 여기에 정의한다. 사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당된다. ex) _typography : 폰트용
2. component : 컴포넌트는 "소형" 레이아웃 같은 것이다. 사이트 내에서 재사용가능한 작은 부분들을 여기에 정의한다. buttons, forms, profile pictures와 같은 것이 여기에 해당된다.
3. layout : 사이트 구조에 해당하는 레이아웃을 여기서 정의한다. nav bars, headers, footers 와 같은 것이 여기에 해당된다.
4. utils : 실제 스타일은 없고, 그저 다른 폴더에 정의된 스타일을 돕는 역할을 한다. 즉, 모든 Sass 도구와 도우미를 담고 있다. 글로벌 변수, 함수는 _variables 파일에, mixins은 _mixins에 작성한다.
5. pages : 모든 페이지가 같은 스타일을 사용할 수는 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣으면 된다. 예를들어, "Contact Us"에서만 사용될 스타일이 있다면 _contact.scss와 같이 네이밍한 후 이 폴더에 넣으면 된다.
6. themes : 사이트가 다른 종류의 모드를 지원할 때 사용된다. 예를들어 관리자모드와 디폴트모드가 있는 사이트라던가, 다크모드(야간모드)와 라이트모드가 있는 사이트가 있을 수 있다. 각 모드에 따라서 각기 다른 스타일이 지정되기 때문이다.
7. vendors : 프로젝트에서 사용하는 외부 라이브러리 및 프레임워크의 모든 CSS 파일을 담고 있다. 프로젝트에서 사용하는 외부 스타일을 이 폴더에 넣으면 된다. 예를들어 부트스트랩을 커스터마이징 하고 싶다면 부트스트랩 stylesheet을 다운받아 이 폴더에 넣으면 된다.
8. style.scss : 위와 같이 각 폴더 기준에 따라 scss파일들을 분류했다면, 이 모든 파일들을 단 하나의 파일로 모아서 사용한다. 해당 파일은 직접적으로 스타일을 정의하지 않고 단지 "import"만을 담당하는 파일이다.
2. SCSS 사용법
1. 중첩.
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}2. 상위 선택자
✅ 중첩 안에서 "&" 키워드는 상위(부모) 선택자를 참조하여 치환한다.
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}
---------------Compiled------------------
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}3. 변수
✅ 중첩 안에서 "$" 키워드를 사용하여 변수를 생성한다.
$red: #FF0000;
$blue: #0000FF;
$color-primary: $blue;
$color-danger: $red;
.box {
color: $color-primary;
background: $color-danger;
}4. Mixins
✅ ‘Mixins' 이란?
재사용 가능한 기능을 만드는 방식의 의미하며,
1. 선언하기(@mixin)
2. 포함하기(@include)
두 가지 방식으로 사용한다.
1. @mixin
$mobile: 767px; //320 최소
$tablet: 1023px; // 768 최소
$desktop: 1200px; //1024 최소
//1200
/*반응형, 브라우저 크기가 767px 이하일때*/
@mixin mobile{
@media (max-width: $mobile){
@content;
}
}
/*반응형, 브라우저 크기가 768이상, 1023px 이하일때*/
@mixin tablet{
@media (max-width: $tablet){
@content;
}
}
/*반응형, 브라우저 크기가 1024px 이상일때*/
@mixin desktop{
@media (max-width: $desktop){
@content;
}
}2. @include
@include mobile(믹스인 이름){
스타일;
}
