SASS Tutorial에서 변수 사용

SASS는 스타일시트에 적용할 수 있는 기능과 함께 코드 작업의 많은 프로그램적 이점을 효과적으로 제공합니다.

다음 몇 개의 게시물에서 우리는 SASS의 기능에 대해 바로 알아볼 것입니다.

먼저 변수를 소개하겠습니다.

정의

변수는 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법입니다.

색상, 글꼴 또는 재사용하려는 CSS 값에 대한 값을 저장할 수 있습니다!

어떤 것을 변수로 만들고 싶을 때 $ 기호를 사용합니다.

예시

SCSS에서 색상 변수를 정의해 보겠습니다.

$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}

이것은 물론 background-color를 노란색으로 설정합니다. 그렇게 간단합니다!

참고: // 와 함께 Sass에서 한 줄 주석을 사용할 수 있습니다.

그런 다음 컴파일을 실행하면 다음 CSS가 출력됩니다.

body {
  color: #ffff00;
}

참고: 이 시리즈에서 컴파일 프로세스를 자세히 다룰 것입니다. 지금은 코드를 sass/main.scss에 저장하면 자동으로 css/style.css 파일로 컴파일된다는 것을 알아 두는 것이 좋습니다!

이는 대형 프로젝트를 작업할 때 매우 강력해집니다!

스타일시트 전체에서 사용되는 색상을 변경하려는 경우 색상이 한 위치에서 단일 변수로 정의되어 있으면 훨씬 간단하게 변경할 수 있습니다.

한 위치에서 정의된 한 변수의 값을 변경하는 대신 변경하려는 값에 대한 모든 참조를 찾아서 대체합니다. 특히 다른 색상이나 글꼴을 테스트하기 위해 빠른 변경을 구현하려는 경우 훨씬 더 지루한 작업입니다.

결론

이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen