Sass 이론부터 프로젝트 실전까지

hoon·2023년 2월 15일

Sass

Sass란 ?

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다. 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.

Sass의 특징

브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 한다.
웹업계에서 실제 많이 사용하는 전처리기이다.
CSS보다 조금 더 높은 자유도를 부여한다
VS code 익스텐션 Live Sass Compiler설치가 필요하다.
보통 웹팩이나 노드를 통해서 컴파일 한다.
scss문법으로 작성하면 .css 형태로 만들어 준다.
.scss에서 작성하고 .css파일을 index.html에 링크해준다.

Sass nesting 구조

nesting이란 중첩해서 사용하는 것을 말한다.
- body안에 div태그 선택하기
```
body {
	div {
		color : red;
	}
}
```

중첩 3개 이상은 장려하지X 3개 이상이 될 경우 새로운 클래스를 작명하는 것이 좋다.(재사용성을 염두해야 하기 때문에)

Sass에서 다루는 CSS 기초문법

&(앤퍼센트)연산자를 통해서 부모 선택자를 선택할 수 있다!

body {
	.box {
			width: 100%;
			background-color: red;
			&:hover{
					background-color: white;
		}	
	}
}

Sass에서 다루는 변수

변수 : 변하는 수(모든 것)
기호 + 작명 : 저장할 내용

extend로 CSS 템플릿 구성하기

스타일 확장하고자 할때

똑같은 내용을 복붙 대신 extend를 통해서 스타일 확장

.btn {
	border: 1px solid white;
}

.btn-1 {
		@extend .btn; // .btn의 스타일을 가져옴
		border: 1px solid red; // 수정하고 싶은 스타일만 바꿔주면 됨 
}

% → 임시 클래스

%btn {
	border: 1px solid white;
}

.btn-1 {
		@extend %btn;
		border: 1px solid red;
}

mixin

@mixin 선택자() {} → 보낼 선택자
클래스명 { @include 선택자()} → 선택자 받을 때

@mixin 버튼() {
	border: 1px solid white;
}

.btn-1 {
		@include 버튼(); 
		border: 1px solid red;
}

mixin은 extend와 차이가 있다.
- 인자를 받아서 extend보다 유연하게 확장 가능하다. 이때, 반드시 인자 개수만큼 적어주어야 한다.

	@mixin 버튼($테두리, $글자색) {
	border: 1px solid $테두리;
	color : $글자색;
}

.btn-1 {
		@include 버튼(red, red); 
}

.btn-1 {
		@include 버튼(blue, blue); 
}

Sass 기본

npm 설치

node.js를 설치하면 자동적으로 npm도 설치된다. 홈페이지(http://www.nodejs.org)에서 다운로드 받을 수 있다.

터미널에서 -y를 써서 질문 없이 기본세팅한다.

npm init -y

node-sass 설치

npm i node-sass

→ node_modules와 package-lock.json이 생성된다.

→ git commit을 할 경우, node_modules와 package-lock.json 파일은 .gitignore파일안에 작성하여 git commit에서 제외시켜야 한다.

package.json안 "scripts"부분에 밑에 내용을 작성하여 컴파일할 파일과 컴파일될 파일명을 작성해야한다.

"sass": "node-sass -w -r scss/input.scss src/output.css "

나의 프로젝트에서

"sass": "node-sass -w -r scss/style.scss src/style.css "

sass 실행하는 소스이다.

npm run sass

터미널에서 npm run sass를 입력하게 되면 아래와 같이 해당경로의 파일로 컴파일 된 것을 볼 수 있다.

node-sass -w -r scss/style.scss src/style.css

Sass 아키텍쳐

Sass 프로젝트를 구성하는 방법중 가장 대중적인 방식은 7-1 패턴이다.

즉 7개의 폴더에 속한 파일들을 단 하나의 파일 통해서 사용한다는 뜻이다. 하지만 프로젝트의 규모상 vendors와 themes 폴더를 제외하여 5-1 패턴을 프로젝트에 적용해 보고자 한다.

Sass 폴더구조

scss/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– base/
|   |– _reset.scss        # Reset
|   |– _font.scss   # Typography rules
|		|- _base.scss   # Base
|– layout/
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|		|- _main.scss         # main
|
|– components/
|   |– _buttons.scss      # Buttons
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _login.scss      # Login specific styles
|
 – style.scss              # Main Sass input file

1. abstracts

abstracts 폴더는 프로젝트 전체에 사용되는 모든 Sass 도구와 도우미를 담고 있다.

ex) 모든 전역 변수, 함수, mixin 및 표시자

_variables.scss

// color
$main-color: #59362f;
$light-gray-color: #f5f5f5;
$gray-color: #bdbdbd;
$dark-gray-color: #828282;
$white-color: #ffffff;
$red-color: #C03615;
$black-color: #000000;
$kakao-color: #f2c94c;

// font
$base-font: "Archivo", sans-serif;
$font-weights: (
  "regular": 400,
  "medium": 600,
  "bold": 700,
);

_mixins.scss

@mixin space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin center-xy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. base

프로젝트의 상용구 코드를 담고 있다. 사이트 전반에 사용될 폰트, 디폴트 스타일이 해당된다.

_base.scss (HTML 요소 - html, body 등 디폴트)

body {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  margin: 0 auto;
}

_reset.scss (브라우저 기본 CSS 초기화)

_font.scss (폰트)

@import url("https://fonts.googleapis.com/css2?family=Archivo&family=Noto+Sans+KR:wght@400;700;900&family=Roboto&display=swap");

_animations.scss (@keyframes를 포함한 애니메이션)

4. layout

사이트 구조에 해당하는 레이아웃을 담고 있다.

_grid.scss

@media screen and (max-width: 1127px) {
  main {
    .posts {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media screen and (max-width: 949px) {
  main {
    .posts {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media screen and (max-width: 549px) {
  main {
    .posts {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  }
}

_header.scss

header {
  position: fixed;
  z-index: 20;
  width: 100%;
  background-color: $white-color;
}

_footer.scss

footer {
  position: fixed;
  width: 100vw;
  padding: 30px 30px 15px;
  bottom: 0;
  background: $light-gray-color;
  z-index: 10;
  border-top: 1px solid $gray-color;
}

_main.scss

main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 170px 40px 0;
}

5. components

layout보다 더 작은 구성요소를 담고 있으며 사이트 내에서 재사용이 가능한 부분들을 의미한다.

Ex) button, slider, loader …

_buttons.scss

#app {
  .button-switch {
    position: fixed;
    bottom: 200px;
    right: 100px;
    width: 120px;
    height: 40px;
    padding: 10px;
    border-radius: 20px;
    background-color: $main-color;
    color: $white-color;
    z-index: 20;
  }
}

6. pages

페이지 고유의 스타일이 있는 경우 페이지 이름을 딴 파일을 만들어 사용한다.

_home.scss
_login.scss

style.scss

위와 같이 각 폴더 기준에 따라 scss 파일들을 분류했다면, 이 모든 파일들을 단 하나의 파일로 모아서 사용한다. 해당 파일은 직접적으로 스타일을 정의하지 않고 단지 import만 담당하는 파일이다.

ex)

@import "./abstracts/mixins";
@import "./abstracts/variables";

@import "./base/base";
@import "./base/font";
@import "./base/reset";

@import "./components/buttons";

@import "./layout/footer";
@import "./layout/grid";
@import "./layout/header";
@import "./layout/main";

@import "./pages/home.scss";
@import "./pages/login.scss";