Sass를 사용하려면 먼저 프로젝트에서 설정해야 합니다. 여기에서 찾아보고 싶다면 먼저 Sass를 설치하는 것이 좋습니다.
전처리
CSS 는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. Sass에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 유용한 기능과 같이 아직 CSS 에는 존재하지 않는 기능이 있습니다 .
Sass를 수정하기 시작하면 사전 처리된 Sass 파일을 웹사이트에서 사용할 수 있는 일반 CSS 파일로 저장합니다.
이것을 가능하게 하는 가장 직접적인 방법은 터미널에서 하는 것입니다. Sass가 설치되면 명령 을 사용하여 Sass를 CSS 로 컴파일할 수 있습니다 . sass빌드할 파일과 CSS 를 출력할 위치를 Sass에 알려야 합니다. 예를 들어, sass input.scss output.css터미널에서 실행하면 단일 Sass 파일, input.scss, 그리고 그 파일을 output.css.
--watch플래그 를 사용하여 개별 파일 또는 디렉토리를 볼 수도 있습니다 . watch 플래그는 소스 파일의 변경 사항을 감시하고 Sass를 저장할 때마다 CSS 를 다시 컴파일하도록 SASS에 지시합니다. (수동으로 빌드하는 대신) input.scss파일을 보고 싶다면 다음과 같이 watch 플래그를 명령에 추가하면 됩니다.
sass --watch input.scss output.css
폴더 경로를 입력 및 출력으로 사용하고 콜론으로 구분하여 디렉토리를 보고 출력할 수 있습니다. 이 예에서:
sass --watch app/sass:public/stylesheets
Sass는 변경 사항에 대해 폴더의 모든 파일을 감시하고 CSS 를 폴더로 app/sass컴파일 합니다.public/stylesheets
변수
변수를 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각하십시오. 색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 같은 항목을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 변수를 만듭니다. 다음은 예입니다.
SCSS 구문
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sass가 처리될 때 $font-stack및 에 대해 정의한 변수를 사용 하고 CSS에 배치된 변수 값과 함께 $primary-color일반 CSS 를 출력합니다 . 이것은 브랜드 색상으로 작업하고 사이트 전체에서 일관성을 유지할 때 매우 강력할 수 있습니다.
중첩
HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알아차렸을 것입니다. 반면 CSS 는 그렇지 않습니다.
Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기를 중첩할 수 있습니다. 지나치게 중첩된 규칙은 유지 관리가 어려울 수 있고 일반적으로 나쁜 습관으로 간주 되는 과도하게 규정된 CSS 를 초래합니다.
이를 염두에 두고 다음은 사이트 탐색에 대한 몇 가지 일반적인 스타일의 예입니다.
SCSS 구문
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
ul, li, 및 a선택기가 선택기 내부에 중첩되어 있음을 알 수 nav있습니다. 이것은 CSS 를 구성 하고 더 읽기 쉽게 만드는 좋은 방법입니다.
부분
다른 Sass 파일에 포함할 수 있는 CSS 의 작은 조각이 포함된 부분 Sass 파일을 생성 할 수 있습니다. 이것은 CSS 를 모듈화 하고 유지 관리를 더 쉽게 유지하는 데 도움이 되는 좋은 방법입니다. 부분 파일은 앞에 밑줄이 붙은 이름의 Sass 파일입니다. 와 같은 이름을 지정할 수 있습니다 _partial.scss. 밑줄을 사용하면 파일이 부분 파일일 뿐이며 CSS 파일 로 생성되어서는 안 된다는 것을 Sass가 알 수 있습니다 . Sass 부분은 @use 규칙과 함께 사용됩니다.
모듈
단일 파일에 모든 Sass를 작성할 필요는 없습니다. @use규칙 에 따라 원하는 대로 분할할 수 있습니다 . 이 규칙은 다른 Sass 파일을 모듈 로 로드합니다. 즉 , 파일 이름을 기반으로 하는 네임스페이스를 사용하여 Sass 파일 의 변수, mixins 및 함수 를 참조할 수 있습니다 . 파일을 사용하면 컴파일된 출력에 생성 하는 CSS 도 포함됩니다 !
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;
}
파일에서 사용 @use 'base';하고 styles.scss있습니다. 파일을 사용할 때 파일 확장자를 포함할 필요가 없습니다. Sass는 똑똑하고 당신을 위해 알아낼 것입니다.
믹신
CSS 의 일부 항목 은 작성하기가 약간 지루합니다. 특히 CSS3 및 존재하는 많은 공급업체 접두어에서 그렇습니다. mixin을 사용하면 사이트 전체에서 재사용하려는 CSS 선언 그룹을 만들 수 있습니다. Sass를 매우 건조하게 유지하는 데 도움이 됩니다. 믹스인을 보다 유연하게 만들기 위해 값을 전달할 수도 있습니다. 다음은 에 대한 예입니다 theme.
SCSS 구문
@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);
}
믹스인을 생성하려면 @mixin지시문을 사용하고 이름을 지정합니다. 우리는 mixin의 이름을 지정 theme했습니다. 우리는 또한 우리 가 원하는 것을 $theme전달할 수 있도록 괄호 안에 변수를 사용하고 있습니다. theme믹스인을 생성한 후 로 시작하는 CSS 선언으로 @include믹스인 이름을 사용할 수 있습니다.
확장/상속
를 사용 하면 한 선택기에서 다른 선택기로 CSS@extend 속성 집합을 공유할 수 있습니다 . 이 예에서는 확장 자리 표시자 클래스와 함께 사용되는 또 다른 기능을 사용하여 오류, 경고 및 성공에 대한 간단한 일련의 메시징을 만들 것입니다. 자리 표시자 클래스는 확장될 때만 인쇄하는 특수 유형의 클래스이며 컴파일된 CSS 를 깔끔하고 깨끗하게 유지하는 데 도움이 될 수 있습니다.
SCSS 구문
/* 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;
}
위의 코드가 하는 일은 .message, .success, .error및 .warning에게 처럼 동작하도록 하는 것 %message-shared입니다. 즉 , , , , &%message-shared 가 표시되는 곳이면 어디든지 표시됩니다 . 마법은 생성된 CSS 에서 발생합니다 . 여기서 이러한 각 클래스는 와 동일한 CSS 속성을 갖게 됩니다 . 이렇게 하면 HTML 요소 에 여러 클래스 이름을 작성하지 않아도 됩니다 ..message.success.error .warning%message-shared
Sass의 자리 표시자 클래스 외에 대부분의 간단한 CSS 선택기를 확장할 수 있지만 자리 표시자를 사용하는 것이 스타일의 다른 곳에 중첩된 클래스를 확장하지 않도록 하는 가장 쉬운 방법입니다 .
CSS 는 확장 되지 %equal-heights않으므로 생성되지 않습니다 %equal-heights.
연산자
CSS 에서 수학을 하는 것은 매우 도움이 됩니다. +Sass에는 , -, *, math.div()및 와 같은 소수의 표준 수학 연산자가 %있습니다. 우리의 예에서 우리는 article 및 의 너비를 계산하기 위해 몇 가지 간단한 수학을 할 것 aside입니다.
SCSS 구문
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
960px를 기반으로 하는 매우 간단한 유동 격자를 만들었습니다. Sass의 연산을 사용하면 픽셀 값을 가져와 많은 번거로움 없이 백분율로 변환하는 것과 같은 작업을 수행할 수 있습니다.
댓글