TIL DAY 207
오늘 배운 일
✔️ CSS Layout
🏈 SCSS [part I]
이번에는 SCSS 라는 것을 배울 것이다.
SCSS 는 기본적으로 CSS preprocessor 이다!
시작하기 앞서, 쾌적한 작업환경을 구성할 수 있도록 설치해보자!
먼저 git 설치!
https://git-scm.com/
그리고 NodeJS LTS 버전 설치!
https://nodejs.org/en/
그리고 원하는 장소에 scss-study 라는 폴더를 생성!
VSCode 를 열고
scss-study 폴더로 가서...
터미널에 다음과 같이 설치해준다.
git clone https://github.com/serranoarevalo/scss-boilerplate .끝에 점을 한 이유는 현재 폴더에 한다는 의미!
npm i프로젝트가 의존하고 있는 모든 패키지를 설치해주고...
서버 시작을 위해 밑에 커맨드를 입력해준다.
npm run dev그러니까 SCSS 는 CSS 의 섹시 버전!
SCSS 를 컴파일해서 CSS 로 만든다.
사실 SCSS 를 사용하기 전에, Sass 라는 것을 사용했는데 SCSS 는 Sass 의 업그레이드 버전이라고 이해하면 된다.
다른 CSS preprocessor 도 존재하는데(예: stylus, less), SCSS 와 Sass 를 사용하는 이유는 점점 업계 표준이 되어가고 있기 때문이다.
사람들이 왜 SCSS 를 선호하냐면 약간 CSS 를 programming language 처럼 만들어 준다. (CSS 에 없는 좋은 기능들을 사용할 수 있다.)
하지만 SCSS 는 사용하기 어렵다.
컴파일 하거나 build 하는 단계가 필요해서 클론한 프로젝트에서는 gulp 라는 패키지를 설치해두었다.
gulp
gulp 는 nodeJS 패키지인데 새로된 코드를 오래된 코드로 컴파일 해주고 변환해준다. 그러니까 SCSS, Sass 를 css 로 바꿔준다.
그럼 다시 코드로 돌아가서 밑에 커맨드를 실행해주면...
npm run dev
커맨더에서 위에와 비슷하게 나타나는 것을 확인할 수 있다.
설명하자면 gulpfile.babel.js 라는 파일에서...
const routes = {
css: {
watch: "src/scss/*",
src: "src/scss/styles.scss",
dest: "dest/css",
},
};특정 파일을 보고 있는데, 그 파일은 styles.scss 인 것이다.
그러니까 src 주소 파일에 일어나는 모든 일들은 css 로 컴파일 되는거다.
그리고 css 파일을 dest 라는 폴더에 넣어주었다.
그럼 scss 와 css 파일을 비교해보면...
styles.scss
body {
background: peru;
a {
color: blue;
}
}
styles.css
body{background:peru}body a{color:#00f}그리고 gulp 의 장점으로는 코드 에러가 있다면 바로 커맨드에서 실시간으로 알려준다.
그럼 이제 본격적으로 시작해보자!
우선 variables 라는 것을 배워보자
variables 는 기본적으로 웹사이트에서 가장 중요한 색깔이나 스타일을 저장하고 싶을 때 사용한다.
SCSS 에 사용해보면...
src/scss 폴더안에 _variables.scss 라는 파일을 만들어준다.
사실 아무 이름으로 해도 상관없다. (다만 밑줄(_)은 꼭 필요하다.)
밑줄(_) 파일들은 css 로 변하지 않았으면 하는 것들이다!
그러니까 _variables.scss 라는 파일은 SCSS 만을 위한 파일이라고 의미한다.
variable 을 생성하기 위해서는 그냥 $ 을 넣어준다.
그리고 variable 이름을 적어주고 : 하고 값을 적고 ;로 마무리해준다.
_variables.scss
$bg: #e7473c;이게 간단한 SCSS 에서 variable 을 생성하는 방법이다.
그리고 styles.scss 에 import 해준다.
styles.scss
@import "_variables";
body {
background: peru;
a {
color: blue;
}
}css 에서는 바뀌지 않았다.
styles.css
body{background:peru}body a{color:#00f}그러면 우리가 만든 $bg 을 적용해보면...
styles.scss
@import "_variables";
body {
background: $bg;
a {
color: blue;
}
}css 파일을 보면...
styles.css
body{background:#e7473c}body a{color:#00f}위에서 만든 variables 파일에서 만든 빨간색 배경으로 바뀌었다.
그냥 $이름 이렇게 적어주면 된다.
만약 폰트 크기를 원하는 사이즈로 지정하고 싶으면...
_variables.scss
$title: 32px;styles.scss
@import "_variables";
body {
background: $bg;
a {
color: blue;
}
}
h1 {
color: $bg;
font-size: $title;
}styles.css
body{background:#e7473c}body a{color:#00f}h1{color:#e7473c;font-size:32px}그럼 다음으로는 Nesting 이라는 것을 알아보자!
Nesting 은 원하는 요소를 더 정확하게 해준다.
그럼 index.html 에 코드를 추가해보면...
index.html
<body>
<h2>Title</h2>
<div class="box">
<h2>Another Title</h2>
</div>
</body>화면을 보면...
만약 2 개의 title 이 있다고 가정하고 밑에처럼 코드를 수정해보면...
styles.scss
@import "_variables";
h2 {
color: $bg;
}
2개의 h2 태그에 적용되는 것을 알 수 있다.
근데 예를 들어 box 라는 클래스를 갖고 있는 div 안에 있는 h2 에만 변화를 주고 싶다면...
styles.scss
@import "_variables";
h2 {
color: $bg;
}
.box h2 {
color: blue;
}
이렇게 할 수 있다.
근데 만약에 box 가 button 을 가지고 있고 밖에도 button 이 있다면...
index.html
<body>
<h2>Title</h2>
<div class="box">
<h2>Another Title</h2>
<button>Hello</button>
</div>
<button>Bye bye</button>
</body>
근데 box 안에서만 스타일들을 적용하고 싶다면...
styles.scss
@import "_variables";
h2 {
color: $bg;
}
.box {
margin-top: 20px;
}
.box h2 {
color: blue;
}
.box button {
color: red;
}
위에처럼 적을 수 있는데 더 보기 좋게 작성할 수 있는데 이 때 Nesting 을 사용해준다.
styles.scss
@import "_variables";
h2 {
color: $bg;
}
.box {
margin-top: 20px;
h2 {
color: blue;
}
button {
color: red;
}
}box 라는 클래스 부모에 자식 요소들을 적어주니 코드가 진짜 읽기 쉬워졌다.
보통 box 에 hover 기능을 추가해주면...
.box:hover {
background-color: green;
}이렇게 적어주는데 Nesting 을 사용해보면 이렇게 적어줄 수 있다.
styles.scss
@import "_variables";
h2 {
color: $bg;
}
.box {
margin-top: 20px;
&:hover {
background-color: green;
}
h2 {
color: blue;
}
button {
color: red;
}
}box 에 마우스를 갖다대면...
잘 작동하는 걸 알 수 있다.
심지어 Nesting 된 자식 요소 안에 hover 를 쓸 수 있다.
styles.scss
@import "_variables";
h2 {
color: $bg;
}
.box {
margin-top: 20px;
&:hover {
background-color: green;
}
h2 {
color: blue;
&:hover {
color: red;
}
}
button {
color: red;
}
}
Another Title 에 마우스를 갖다대니, 폰트가 빨간색으로 바뀌었다.
끝으로 :
- 오늘은 SCSS 에 대해 알아보았다.
- variables 와 nesting 에 대해 알아보았는데 확실히 css 를 쓰는 것보다 편리하다!
