[F-Lab 모각코 챌린지 35일차] CSS, SASS, SCSS

Nami·2023년 7월 5일
CSSSasscss 전처리기scss스타일시트
0

66일 포스팅 챌린지

목록 보기
35/66
post-custom-banner

SCSS를 이전 회사에서 썼었는데 제대로 배우지 못하고 바로 쓰게 되어 아무런 지식이 없다. 추후에 입사하면 왜 쓰는지 말할 수 있게, 그리고 처음 세팅부터 제대로 할 수 있게 배워보려한다.

CSS Cascading Style Sheets

HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. CSS는 웹 페이지의 스타일과 레이아웃을 정의하기 위한 스타일시트 언어.

  • Open Web의 핵심 언어 중 하나.
  • 과거엔 CSS 명세의 다양한 부분을 순차적으로 개발, CSS1, CSS2, CSS3까지 버전이 올라옴

등장배경

  • 초기에는 HTML 문서에 스타일을 직접 작성. 웹의 발전과 함께 스타일의 복잡성이 증가하고 유지보수가 어려워짐
  • CSS는 디자인과 구조를 분리하여 웹 개발자가 스타일을 더욱 효율적으로 관리할 수 있게 해줌.
  • HTML에서 스타일 요소를 분리하여 스타일 시트에 작성하면서 웹 개발의 유연성과 확장성이 향상됨.

CSS Preprocessor 전처리기

스타일 시트는 점점 커지고, 복잡해지고 어려워졌다.
중첩, 혼합, 상속 및 편리하고 유지보수가 용이한 CSS를 작성하게 도와주는 전처리기 SASS(SCSS)가 등장했다.

SASS 또는 SCSS로 작성한 스타일 코드를 컴파일하면 최종적으로 일반 CSS 파일로 생성하여 웹 페이지에 적용할 수 있다.

SASS Syntactically Awesome Stylesheets

SASS에는 두 가지 구문이 있다.

Sassy CSS, SCSS

  • .scss
  • 가장 일반적으로 사용된다. SCSS는 CSS의 상위 집합.
  • SASS의 기능을 모두 포함하면서 CSS와의 호환성을 유지하기 위해 만들어졌다.
  • SCSS는 CSS와 거의 동일한 구문을 사용하여 기존의 CSS 코드를 쉽게 포함할 수 있다.
  • SASS와 SCSS는 문법적인 차이만 있을 뿐, 기능적으로는 동일하게 동작
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

들여쓰기 구문

  • .sass
  • 중괄호 대신 들여쓰기를 사용하여 문을 중첩하고 세미콜론 대신 개행으로 구분하는 좀 더 특이한 구문이다.
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

위 코드들이 컴파일되어 일반 CSS 코드로 변환되면 이렇게 된다.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting 중첩

CSS 스타일 규칙을 중첩 구조로 작성하는 기능.
HTML 요소의 계층 구조를 반영하여 직관적으로 표현, 스타일을 적용할 수 있다.
가독성이 향상되고 스타일 규칙 간의 관계를 명확하게 파악할 수 있다.

/* CSS */
.container {
  width: 100%;
}

.container .heading {
  font-size: 24px;
  color: #333;
}

.container .content {
  padding: 10px;
  background-color: #f5f5f5;
}
/* SCSS */
.container {
  width: 100%;

  .heading {
    font-size: 24px;
    color: #333;
  }

  .content {
    padding: 10px;
    background-color: #f5f5f5;
  }
}

Partials

재사용 가능한 스타일 코드 조각을 나누어 작성하는 기능을 제공한다. 주로 스타일 시트 파일을 모듈화하고 관리하기 위해 사용됨.

  • _ (underscore)로 시작하는 SCSS 파일.
  • ex: _variables.scss, _mixins.scss와 같은 파일이 Partials. Partials 파일은 일반적으로 스타일 시트의 특정 부분에 관련된 스타일 코드를 담고 있다.
  • @import 문을 사용하여 다른 SCSS 파일에 포함시킨다. 이를 통해 스타일 시트를 필요한 부분별로 분리하여 구성할 수 있습니다
  • 스타일 시트 파일의 모듈화와 구조화에 사용

Module

SCSS 모듈은 스타일 코드를 논리적으로 구성하고 재사용 가능한 스타일 모듈을 생성하는 방법을 제공.
파일 단위의 스타일 코드 구성 방식.

  • @use 지시문을 사용하여 다른 SCSS 파일에서 모듈을 임포트함.
  • 모듈을 임포트할 때, 네임스페이스를 지정하여 모듈 간의 충돌을 방지.
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins

SCSS에서 재사용 가능한 코드 조각을 정의하고 호출하는 기능.

  • CSS 스타일 규칙을 생성하는데 사용되며, 코드의 중복을 피하고 유지보수성을 향상시킴.
  • @mixin 키워드 사용
  • 일련의 스타일 규칙을 포함하는 블록으로 구성
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

Extend 확장/상속

기존의 스타일 규칙을 재사용하고 확장하는 기능.

  • 스타일 규칙을 상속할 때, 상속된 스타일은 새로운 선택자에 적용되며, 중첩 구조는 유지
  • 사용할 때 주의해야 할 점
    • 상속된 스타일은 그 자체로 복제되는 것이 아니라, 기존 스타일 규칙에 새로운 선택자가 추가되는 방식으로 동작
    • CSS의 선택자 우선순위와 관련된 문제가 발생할 수 있음.
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

외에 연산자 기능도 있으나 제외함.

세팅 방법

SCSS를 초기에 세팅하는 방법

  1. 프로젝트 폴더 생성: SCSS 파일을 저장할 프로젝트 폴더를 생성합니다.

  2. Node.js 및 npm 설치

  • Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됨.
  • Node.js는 SCSS를 CSS로 컴파일하는 도구인 Sass를 사용하기 위해 필요합니다.
  • Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치하기.
  1. 프로젝트 초기화
  • 명령 프롬프트 또는 터미널에서 프로젝트 폴더로 이동한 후,
    다음 명령을 실행하여 프로젝트를 초기화
npm init

프로젝트를 위한 package.json 파일을 생성. 프로젝트 설정과 의존성 패키지 정보를 기록한다. 필요한 정보를 입력하거나 기본값을 사용할 수 있음.

  1. Sass 패키지 설치
    SCSS를 CSS로 변환하기 위해 Sass 패키지를 설치해야 한다.
    다음 명령을 사용하여 Sass 패키지를 설치한다.
npm install sass --save-dev

위 명령은 sass 패키지를 프로젝트의 개발 의존성(dependencies)으로 설치함.
--save-dev 옵션은 개발 의존성으로 설치하라는 의미.
(프로젝트의 실행에 필요한 패키지와 개발 과정에서 필요한 패키지를 분리하여 관리)

  1. SCSS 파일 작성

SCSS 파일을 프로젝트 폴더에 생성하고 작성한다.
일반적으로 .scss 확장자를 사용.
예를 들어, styles.scss 파일을 생성하여 스타일 코드 작성하기.

  1. SCSS 컴파일

작성한 SCSS 파일을 CSS로 컴파일해야 함. 이를 위해 명령 프롬프트 또는 터미널에서 다음 명령을 실행한다

npx sass input.scss output.css

위 명령에서 input.scss는 컴파일할 SCSS 파일의 경로를 나타내며, output.css는 컴파일된 CSS 파일의 경로를 나타냄. 경로를 필요에 맞게 수정하여 사용.

  1. 자동 컴파일 (Optional)
    개발 중에 SCSS 파일의 변경사항을 자동으로 감지하고 CSS로 컴파일하는 것이 편리하다.
    이를 위해 --watch 옵션을 사용하여 Sass를 실행.
    예를 들어, 다음 명령을 사용하면 SCSS 파일이 변경될 때마다 자동으로 CSS로 컴파일된다.
npx sass --watch input.scss

 output.css

SCSS의 사용법도 제대로 모르는 상태로 접했어서 항상 아쉬웠다. 이번 기회에 잘 알게 되어서 추후에 프로젝트시 꼭 스스로 세팅해서 사용해보겠다.

참조 ✅

profile
Nami
이전 포스트

[F-Lab 모각코 챌린지 34일차] Rendering Performance

다음 포스트

[F-Lab 모각코 챌린지 36일차] HTTP의 진화

post-custom-banner

0개의 댓글