SCSS

👉 SCSS 기본 폴더 구성

❗️scss는 도구일 뿐, 작동되지 않는다.
(언더바)가 붙은 파일은 변환(=css로 작동)이 되지 않는다.
style.scss에 모든 _.scss를 import 시켜 style.css에 작동시킨다.
scss는 html에 불러오는게 절대 아님!

style.scss

<style>
@import './utils/var';  //변수 세팅
@import './utils/mixin';  //재활용 소스 세팅

@import './base/typo';  //폰트
@import './base/reset';  //리셋
@import './base/common';  //공통

@import './layout/header';
@import './layout/nav';
@import './layout/footer';

@import './component/btn/fixbtn';

@import './pages/home';
</style>

@import ''; 로 세팅해줘야 제 역할을 할 수 있다.
세팅 후 Watch Sass 또는 저장 하면, css 폴더에 style.css 파일 안에는 작성한 .이 생긴다.
이 style.css 파일 안에는 작성한 .scss 내용이 모두 들어간다.

❗️Tip! 확장도구를 설치해야 가능

👉 Live Sass Complier

1. 설치

2. 톱니바퀴 아이콘 클릭 - 확장 설정 (Extension Setting)
   

3. Generate Map - Edit in settings.json 클릭
   

4. false로 셋팅됨
   

5. Formats - Edit in settings.json 클릭
   

6. savePath: null 👉 "~/../css/" 로 변경
   

초기 설정 끝-!

👉 html에는 이것만 불러오면 돼요

<link rel="stylesheet" href="./assets/css/style.css">

👉 scss? 어떻게 쓰는데

_header.scss

<style>
header{
    position: relative;
    background: #ccc;
    height: 200px;

    h1{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        a{
            display: block;
            width: 100px;
            height: 50px;
            background: #f00;
        }
    }
    .btn{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        &.sns{left: 10px;}
        &.login{right: 10px;}

    }
}
</style>

❗️scss 특징1 - 상속을 시켜버린다 (부모 기재X)
scss 내용을 작성하면 css에 아래처럼 작성된다.

_header.scss

<style>
header{
	position: relative;
	background: #ccc;
	height: 200px;

	h1{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		a{
			display: block;
			width: 100px;
			height: 50px;
			background: #f00;
		}
	}
}
</style>

style.css

<style>
header {
  position: relative;
  background: #ccc;
  height: 200px;
}
header h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header h1 a {
  display: block;
  width: 100px;
  height: 50px;
  background: #f00;
}
</style>

❗️scss 특징2 - 자동 계산이 된다
100px 곱하기 3 = 300px 👉 계산을 해준다.

<style>
main{
	height: 100px*3;
}
</style>

👉 선택방법

👬 형제선택

.scss

<style>
.btn{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
    &::after{
    	content: '';
    }
    &:hover{color: #eee;}
	&.sns{left: 10px;}
	&.login{right: 10px;}
}
</style>

.css

<style>
header .btn::after {
	content: '';
}
header .btn:hover {
	color: #eee;
}
header .btn.sns {
	left: 10px;
}
header .btn.login {
	right: 10px;
}
</style>

👩‍👧 자식선택

.scss

<style>
.btn{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	.sns{left: 10px;}
	.login{right: 10px;}
}
</style>

.css

<style>
header .btn .sns {
	left: 10px;
}
header .btn .login {
	right: 10px;
}
</style>

❗️scss 주의점

경로 작성할 때, css로 변환되었을 때를 기준으로 잡아야 한다.

<style>
main{
	background: url(../images/file.jpg);
}
</style>