SASS를 사용하여 사이트 스타일

Sep 12, 2025

어떻게

당신은 CSS로 많은 것을 할 수 있습니다 - 아마도 당신이 생각할 수있는 것 이상 - 유한 스타일 시트 언어는 제한 사항이 있습니다. NPM 모듈, JavaScript Frameworks, ES6 등을 가진 현대적인 웹 프로젝트에서는 바닐라 CSS를 작성하기 위해 다소 나사 드립 리닉스를 느낄 수 있습니다.

다행히도 CSS로 컴파일하는 다른 언어를 사용할 수있는 옵션이 있습니다. '전처리 프로그램'이라고하는이 도구는 웹 빌드 프로세스에 통합되어 선택한 확장 언어에서 사용할 수있는 스타일 시트를 생성합니다.

Sass (Syntactically Awesome Style Sheets)는 이러한 옵션에서 가장 인기있는 가장 인기있는 것 중 하나입니다 - 가이드를 통해 더 많은 것을 읽으십시오. Sass 란 무엇입니까? Sass는 사이트 및 앱을보다 유지 보수가 가능하게하는 데 도움이되는 CSS에서 사용 가능한 많은 귀중한 새로운 언어 기능을 추가합니다. 여기에는 믹스와 제어 지시문과 같은 것들이 포함되어 있지만 실제로는 매우 간단합니다. 우리는이 튜토리얼에서 이것을 볼 것입니다. 사물을 더 간단하게 유지하려면 사용자가 웹 사이트 빌더 ...에

멋진 CSS 애니메이션을 재현합니다

실제로 .scss 파일 확장명을 사용하는 Sass에는 실제로 두 개의 서로 다른 구문이 있으며 .sass를 사용하는 것입니다. 전자는 CSS (실제로 모든 .css 파일이 유효한 .scs 파일)와 더 많이 보입니다. 후자는 들여 쓰기와 뉴라인에 찬성하여 CSS의 브래킷과 세미콜론을 제거합니다. 우리는 .scss에 초점을 맞추 겠지만, 선택은 단순히 개인적인 취향에 빠지게됩니다. 사이트 업그레이드? 너의 확인을 확인하십시오 웹 호스팅 서비스는 당신이 필요로하는 것을하고, 클라우드 스토리지 오른쪽.

여기 에서이 자습서의 파일을 다운로드하십시오 (문제 282)

Sass website screenshot — Sass 웹 사이트에는 많은 유용한 문서가 있습니다

01. 컴파일러를 설정하십시오

SASS를 사용하여 기본적으로 컴파일러가 필요합니다. 이것을하는 가장 간단한 방법은 명령 줄에있을 것입니다. 홈 브리프를 사용하여 그렇게 할 수 있습니다. SASS 컴파일러는 여러 언어로 구현되며 홈 브레이는 빠른 다트 버전을 설치합니다.

brew install sass/sass/sass

02. SASS 파일을 만듭니다

컴파일러를 조치로 보려면 간단한 SASS 파일을 만들어 보겠습니다. Sass에서 가장 간단한 개념 중 하나는 변수이며, 이는 한 번에 한 번 지정할 수 있습니다. $ 접두사를 사용하여 코드 전체에서 사용했습니다. 우리는 만들 것입니다 sass-input.scss. ...에

 $ text-color : #cccccc;
몸 {
    색상 : $ text-color;
}

03. 명령 줄 컴파일

이제는 명령 줄에서 SASS 컴파일러를 실행하여 .SCSS 파일을 CSS 출력으로 변환 할 수 있습니다. 변수가 사라지고 브라우저가 사용할 수있는 표준 CSS 구문으로 방금 남아있는 출력 파일을 알 수 있습니다.

 SASS SASS-INPUT.SCS CSS-OUTPUT.CSS

04. 빌드를 자동화하십시오

이것은 훌륭하지만 변경할 때마다 Sass 컴파일러를 수동으로 실행하고 싶지 않습니다. 하나의 옵션은 디렉토리의 파일의 변경 사항을 수신하고 다른 디렉토리 (파일 이름 보존 상태)로 자동 재 컴파일하는 것입니다. 이렇게하면 효과적으로 Source .scss 파일을 기본 CSS에서 분리 할 수 있습니다.

 mkdir src.
mkdir src / sass.
mkdir public.
mkdir public / css.
SASS --watch src / sass / : public / css /

05. Sass Styling으로 플레이하십시오

이제 Sass 스타일링으로 놀기 위해 사용할 수있는 간단한 초보 사이트를 살펴 보겠습니다. 우리는 unsyled 예제 사이트를 복제하여 시작할 수 있습니다. 주목해야 할 핵심 사항은 우리의 HTML 페이지가 Sass에 대해 아무것도 알지 못하는 것입니다. 단일 CSS 파일 진입 점이 있으며 다음으로 생성 할 수 있습니다.

 CD Public
curl -o index.html https : // raw.
githubusercontent.com/simon-a-j/sass-
지도 시간/
마스터 / public / index.html

06. 주요 스타일 시트

우리는 나중에 다른 모듈을 가져 오는 데 사용할 주요 CSS 진입 점으로 스타일을 사용하고 있습니다. 즉, SASS 에이 파일을 생성하도록 SASS에 알려야 함을 의미하므로 SRC / SASS 폴더에 Styles.scss 파일을 만들어야합니다. 당신이 달리면 Sass-Watch. 이전과 같이 이것은 자동으로 CSS로 컴파일됩니다. 공개 / CSS. 폴더 및 사이트 새로 고침은 변경 사항이 표시됩니다. 브라우저에서 HTML 페이지를 몇 가지 수정하고 새로 고침하십시오.

 // styles.scss.
몸 {
  글꼴 - 가족 : SANS-Serif;
  텍스트 - 정렬 : 센터;
}

07. 색 구성표를 관리합니다

Sass website with a colour scheme of blue — 이제는 Sass 부분 덕분에 색 구성표가 있습니다.

Sass가 사이트의 색 구성표를 관리하는 데 도움이되는 방법을 살펴 보겠습니다. 웹 페이지에 대해 5 ~ 6 색의 팔레트가있는 것이 일반적입니다. 우리는 이들을 방출 할 수 있습니다 _colours.scss. ...에 밑줄 접두사는 SASS를 새로운 HTML 파일 ( '부분')으로 컴파일하지 않도록합니다. 그러나 우리는 그것을 약간 다른 방식으로 사용할 수 있습니다.

 // _colours.scss.
$ color-primary : # 231651;
$ color-secondary : # 2374ab;
$ 컬러 라이트 : # D6FFF6;
$ color-highlight1 : # 4DCCBD;
$ color-highlight2 : # FF8484;

08. 색 변수를 사용하십시오

이러한 색상 변수를 사용하려면 방금 설정하면 Sass에게 콘텐츠를 가져올 수 있습니다. _colours.scss. 우리의 주요 스타일 시트에. 우리는 AN을 사용 하여이 작업을 수행합니다 @수입 성명서. 이 작업을 수행하면 변수가 출력 CSS 파일 내에서 어떻게 해결되는지 확인하십시오.

 // styles.scss.
@import "_colours.scss";
몸 {
  글꼴 - 가족 : SANS-Serif;
  텍스트 - 정렬 : 센터;
  배경 : 선형 - 그라디언트 (155DEG,
$ color-primary 70 %, $ color-secondary
70 %);
  색상 : $ color-light;
  최소 - 높이 : 100VH;
}
H1 {
    색상 : $ color-highlight1;
}
H2 {
  색상 : $ color-highlight2;
}

09. 둥지 스타일

Sass의 또 다른 유용한 기능은 스타일을 둥지시키는 능력입니다. 즉, 해당 요소가 상위 요소 내에서 발생하는 경우에만 적용되는 요소의 스타일을 지정할 수 있습니다. 이것을 사용하여 헤더 나 시체에 나타든지 여부에 따라 링크의 스타일링을 구별합시다.

 a {
  색상 : $ color-standing;
}
.profile-header {
  ㅏ {
    글꼴 크기 : 16px;
    마진 왼쪽 : 10px;
    마진 오른쪽 : 10px;
    패딩 : 10px;
    국경 반경 : 5px;
    색상 : $ color-light;
    배경색 : $ color-candion;
  }
}

10. 응답 성 그리드를 만드십시오

Sass site with grid — 반응 형 그리드는 Sass 변수 및 중첩으로 관리하기가 더 쉽습니다.

이제 우리의 콘텐츠를 반응 형 그리드 형식으로 정렬합시다. Sass에는이를 훨씬 쉽게 관리 할 수 있도록 몇 가지 기능이 있습니다. 우리의 중단 점을 지정하기 위해 변수를 사용하는 것뿐만 아니라, 우리는 중첩 할 수 있습니다. @미디어 다른 스타일 내의 쿼리로 스크린 크기와 훨씬 더 읽을 수있는 동작을 만듭니다.

 $ 중단 점 : 800px;
.profile-body {
  디스플레이 : 플렉스;
  정렬 항목 : 스트레치;
  정당화 내용 : 우주 주위;
  마진 탑 : 32px;
  마진 왼쪽 : 10VW;
  마진 오른쪽 : 10Vw;
  @media 화면 및 (최대 너비 :
$ braypoint) {
      플렉스 방향 : 컬럼;
  }
}
.profile-section {
  배경색 : $ color-highlight1;
  색상 : $ color-primary;
  마진 : 16px;
  국경 반경 : 10px;
  너비 : 340px;
  .profile-content {
    패딩 : 20px;
  }
  @media 화면 및 (최대 너비 :
$ braypoint) {
    너비 : 100 %;
  }
}

11. 믹스를 소개합니다

Sass with mixin — 믹스가 회전과 같은 CSS 변환을 사용할 때 구형 브라우저와의 역 호환성을 유지하는 데 도움이됩니다.

Mixins는 재사용 가능한 스타일 시트 함수를 정의하는 방법으로 생각할 수있는 또 다른 강력한 SASS 기능입니다. MixIn은 한 번 정의되며 매개 변수를 취할 수 있으며 SASS 코드에서 어디에서나 호출 할 수 있습니다. 이 사용 사례는 공급 업체 접두사를 처리하는 것입니다. CSS 변환이 이전 브라우저에서 작업하기를 원한다면이 작업은 --webkit. 예를 들어 크롬 및 사파리의 접두사. 우리를 위해 이것을 처리하는 믹스를 정의합시다.

12. 믹스 및 변수

우리는 또한 여러 매개 변수와 함께 MixIn을 사용하여 정의한 일부 변수와 함께 페이지의 다양한 부분의 스타일링을보다 우아하게 처리합니다. 전경색 및 배경색을 정의하는 믹스를 만들면 스타일 변수의 유한 목록에서 다른 섹션에 대한 모양을 선택할 수 있습니다.

 $ style1 : (전경 : $ color-light,
배경 : $ color-2 차);
$ style2 : (전경 : $ color-primary,
배경 : $ color-highlight1);
$ style3 : (전경 : $ color-primary,
배경 : $ color-highlight2);
@mixin 콘텐츠 스타일 ($ Foreground,
$ 배경) {
  색상 : $ Foreground;
  배경색 : $ 배경;
}

13. 새로운 믹스를 사용하십시오

 .profile-header {
  ㅏ {
    @include 콘텐츠 스타일 ($ style1 ...);
    // ...
  }
}
.profile-section {
    @include 콘텐츠 스타일 ($ style2 ...);
  // ...
}

14. 상속 이해

Sass의 또 다른 매우 강력한 기능은 상속입니다. 지금 당장 우리는 페이지에서 링크에 대한 두 가지 스타일을 가지고 있습니다. CSS를 복사 및 붙여 넣기보다는 두 가지 공통 스타일을 사용하고자하는 경우, '%'로 표시되는 자리 표시 자 클래스를 사용하는 이유는 둘 다만큼 확장 될 수있게 해주는 이유는 스타일을 상속받을 수 있습니까?

 % Link-Shared {
  글꼴 크기 : 16px;
  마진 왼쪽 : 10px;
  마진 오른쪽 : 10px;
  패딩 : 10px;
  국경 반경 : 10px;
}

15. 수업 확장

이제 우리는 링크 공유 클래스를 확장하여 사이트 전역의 링크 스타일링을 정의 할 수 있습니다. 이것은 꽤 우아하게 보이기 시작합니다. 우리는 링크가 한 번만 한 번만 보이는 것을 정의하고 전체적으로 재사용하고 믹스를 사용하여 각 링크의 팔레트에서 색상을 지정합니다.

 .profile-header {
  ㅏ {
    @extend % 링크 공유;
    @include 콘텐츠 스타일 ($ style1 ...);
  }
}
ㅏ {
  @extend % 링크 공유;
  @include 콘텐츠 스타일 ($ style3 ...);
}

16. 테마 수정

이제 우리 사이트의 주제를 수정하는 데 쉬운 Sass가 얼마나 쉬운지를 살펴 보겠습니다. 현재 색상은 완벽하지 않을 수 있습니다. 우리는 색상 변수 만 수정할 수 없지만 일부 SASS 기능을 사용하여 선택한 선택의 기본 색상과 일치하는 색상을 생성 할 수도 있습니다.

 // _colours.scss.
$ color-primary : # 2E1F27;
$ color-secondary : lighten ($ color-primary,
25 %);
$ color-light : 밝게 ($ color-primary,
75 %);
$ color-highlight1 :
밝게 (보체 ($ color-primary), 50 %);
$ color-highlight2 :
밝게 (보체 ($ color-candion), 50 %);

17. 새로운 색상 세트를 선택하십시오

이제는 새로운 색상 기본값을 지정하여 사이트의 전체 색 구성표를 수정할 수 있습니다. _colours.scss. 파일. 대체 색상을 실험하여 시도해보십시오. 우리는 또한 rass 무작위를 가질 수 있습니다 (그러나 이것은 런타임이 아닌 사이트가 빌드되지 않은 지점을 의미합니다). 우리가 사용하고있는 논리를 조정하여 기본 색상을 기본 색상으로 조정할 수도 있습니다.

 $ RED : 무작위 (255);
$ GREEN : 무작위 (255);
$ Blue : 무작위 (255);
$ color-primary : rgb ($ 빨강, $ green, $ blue);

18. 라이브러리를 사용하십시오

Sass의 모듈 시스템은 최소한의 노력으로 최종 사용자에게 런타임 파일을 운송하지 않고 최소한의 노력으로 타사 라이브러리를 사용하는 것이 매우 간단합니다. 페이지의 객체에 대한 경 사진 가장자리를 만드는 데 사용할 수있는 각진 가장자리 라이브러리를 시도해 봅시다.

 git clone https://github.com/josephfusco/
각진 - 가장자리. src / sass / 각진 가장자리

19. 각진 가장자리 믹스

우리는 우리의 색 구성표 부분에 대해 우리가 한 것과 같은 방식으로 각진 가장자리를 가져올 수 있습니다. 그런 다음 라이브러리와 함께 제공되는 믹스를 통해 사용할 수 있습니다. 프로필 섹션 클래스에서 시도해 보겠습니다.

 @import "각진 - 가장자리 / _Angled-edges.scss";
.profile-section {
  @include 각도 가장자리 ( "바닥 바깥 쪽",
"오른쪽 아래", $ color-highlight1);
  @include 각진 가장자리 ( "바깥 쪽",
"상단", $ color-highlight1);
  여백 : 120px 16px 120px 16px;
  // ...
}

20. 출력 형식

출력 Sass가 생성하여 끝내자. 우리가 변경 한 것처럼 CSS 파일을 추적하면 꽤 읽을 수 있음을 알 수 있습니다. 그러나, 당신은 또한 인간이 읽을 수 있지만 여전히 배송 할 준비가 된 응축 된 CSS를 구축 할 수도 있습니다. 이를 사용 하여이 작업을 수행 할 수 있습니다 --스타일 명령 줄 플래그.

 SASS src / sass / : public / css / --style
압축

21. 더 많은 것을합니다

우리는 이제 Sass의 몇 가지 기능을 탐험했으며, 우리 사이트는 너무 나쁘지 않습니다. 희망을 갖기를 바랍니다 Sass가 우리가 더 많은 유지 보수 가능한 스타일 시트를 개발하는 데 어떻게 도움이되는지 알게되었습니다. 우리는 언어의 모든 기능을 다루지 않았습니다.이 기능은 여러 가지보다 많은 유용한 기능을 제공하며 Control 지시문과 같은 고급 기능이 있습니다 (예 : @만약 , @에 대한 과 @동안 ) 종종 복잡한 라이브러리 기능을 만드는 데 사용됩니다. 전반적으로, Sass는 완전히 스타일리즘 선호도를 기억하십시오. 당신이 원한다면 순수한 CSS로 보았던 모든 것을 할 수는 있지만, 작업이 더욱 복잡해집니다. 사전 처리에 대해 확실히 생각해야합니다.

이 기사는 원래 문제 282에서 출판되었습니다 웹 디자이너 ...에 구입 문제 282. 또는 여기를 구독하십시오 ...에

자세히보기 :

10 가지 놀라운 새로운 CSS 기술
오늘 시도 할 수있는 3 개의 빛나는 새로운 CSS 속성
훌륭한 시차 스크롤 웹 사이트

SASS를 사용하여 사이트 스타일

01. 컴파일러를 설정하십시오

02. SASS 파일을 만듭니다

03. 명령 줄 컴파일

04. 빌드를 자동화하십시오

05. Sass Styling으로 플레이하십시오

06. 주요 스타일 시트

07. 색 구성표를 관리합니다

08. 색 변수를 사용하십시오

09. 둥지 스타일

10. 응답 성 그리드를 만드십시오

11. 믹스를 소개합니다

12. 믹스 및 변수

13. 새로운 믹스를 사용하십시오

14. 상속 이해

15. 수업 확장

16. 테마 수정

17. 새로운 색상 세트를 선택하십시오

18. 라이브러리를 사용하십시오

19. 각진 가장자리 믹스

20. 출력 형식

21. 더 많은 것을합니다

어떻게 - 가장 인기있는 기사

Tiktok에서 비디오를 편집하는 방법

관점을 그리는 방법

Photoshop에서 Meme를 만드는 방법

미디어 쿼리없이 적응 형 레이아웃 빌드

Google 웹 도구 안내

친 화성 디자이너 : 그리드를 사용하는 방법

깃털을 그리는 방법

SVG 그라디언트가있는 차트 D3.js 차트

카테고리