Front-End/SASS

[Sass] 1장 Sass란?

Tinkies 2025. 3. 9. 08:28

1. Sass란?

Sass(Syntactically Awesome Styles Sheets)는 CSS의 전처리기(preprocessor)로, CSS를 더욱 쉽게 작성하고 관리할 수 있는 라이브러리입니다. Sass의 기능으로 CSS를 더욱 확장하고, 코드의 재사용성을 높여 유지보수를 더욱 용이하게 해주며 프로젝트 최적화를 위해 사용해볼만한 라이브러리 입니다. Sass의 특징으로는 다음과 같습니다.

 

  • 변수 사용: 색상, 폰트, 크기 등을 변수로 정의해 재사용할 수 있음
  • 중첩(Nesting): CSS 선택자를 중첩해 구조를 더욱 명확하게 표현
  • 믹스인(Mixin): 반복되는 스타일을 재사용할 수 있도록 정의할 수 있음
  • 상속(Inhreitance): CSS 클래스 간의 상속을 통한 코드 중복을 줄일 수 있음
  • 함수: Sass에서 제공하는 다양한 내장 함수로 계산 및 조작이 가능 

2. Sass의 장단점

  • 장점
    • 코드의 가독성 및 유지보수를 향상
    • 재사용성이 높아짐
    • 복잡한 스타일을 더욱 쉽게 관리
  • 단점
    • 추가적인 학습 곡선이 존재함
    • Sass를 직접 컴파일해서 CSS로 변환작업을 거쳐야함
    • Sass에 의존하게 될 수 있음

3. Sass vs CSS 코드 비교

Sass와 CSS의 코드 형식은 다음과 같습니다. 기본 적으로 css는 class 선택자 안에 class를 스타일 할 시 class 선택자와 그 안에 class를 다시 명시해야합니다. 하지만 sass는 선택자 안에 class만 명시하면 됩니다.

 

  • CSS 코드 예시
.container {
  width:100%;
  max-width: 1200px;
  margin: auto;
  padding-bottom: 10px;
}

.container .wrapper {
   display:flex;
   flex-direction: column; 
}
  • Sass 코드 예시:
.container {
  width:100%;
  max-width: 1200px;
  margin: auto;
  padding-bottom: 10px;
 
  .wrapper {
   display:flex;
   flex-direction: column; 
   }
}

4. Sass 설치법

먼저 Sass를 설치하기 위해 Node.js를 기본적으로 설치해야합니다. 아래 Node.js 포스팅에 Node.js 설치법이 있으니 참고해서 Node.js를 먼저 설치해 줍니다.

 

[NodeJS] 1장 Node.js의 탄생

2009년 5월 27일 라이언 라인하트 달(Ryan Linenhart Dahl)은 크로스플랫폼 오픈소스 자바스크립트 런타입 환경으로 윈도우, 리눅스, macOS를 지원하는 Node.js를 발표합니다. 자바스크립트 V8 엔진을 지원

thinky.tistory.com

 

Node.js 설치가 완료되었다면 프로젝트 폴더로가서 명령 프롬프트 창을 열고 아래와 같은 명령어를 입력해줍니다.

npm install -g sass

 

sass를 설치했다면 프로젝트 디렉토리에 .scss 확장자를 가진 Sass 파일을 만들어줍니다(ex. style.scss) 그리고 html에서 테스트 하기위해 index.html을 만들고 먼저 html부터 구성해줍니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scss</title>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="wrapper-center">컨테이너1</div>
        <div class="wrapper-center">컨테이너2</div>
        <div class="wrapper-center">컨테이너3</div>
      </div>
    </div>
  </body>
</html>

 

다음 style.scss 파일로 가서 다음과 같이 css처리를 해줍니다.

$primary-color: #fcc;

.container {
  width: 100%;
  height: 100%;
  .wrapper {
    margin: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background-color: #fcc;

    .wrapper-center {
      padding: 20px;
      border: 1px solid blue;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
    }
  }
}

 

다음 아래 명령어로 Sass 명령어를 CSS로 컴파일해줍니다.

sass style.scss style.css

 

명령어를 실행 시 프로젝트 폴더에 style.css와 style.css.map 파일이 생성됩니다. 이제 이 파일을 html 파일에 연결해줍니다.

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

 

css 변경 사항을 자동으로 감지하고 컴파일하려면 다음 명령어를 사용합니다.

sass --watch style.scss:style.css

 

 

GitHub - Koras02/sass-bloging: https://thinky.tistory.com/category/Front-End/SASS

https://thinky.tistory.com/category/Front-End/SASS - Koras02/sass-bloging

github.com

 

LIST