개요

sass는 두가지 문법을 지원합니다.
각각 다른 하나를 로드할 수 있으므로 무엇을 고를지는 여러분의 선택에 달려 있습니다.

SCSS

scss 문법은 .scss 파일 확장자를 사용합니다.
몇 가지 예외를 제외하고, scss는 css의 상위 집합이며, 이것은 본질적으로 모든 유효한 css도 유효한 scss라는 것을 의미합니다.
scss는 css와 유사하기 때문에 쉽게 익숙해질 수 있고 가장 인기있는 문법입니다.

scss는 다음과 같습니다.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

The Indented Syntax(들여쓰기 문법)

들여쓰기 문법은 Sass 본래 문법이었기 때문에 .sass 파일 확장자를 사용합니다.
들여쓰기 문법은 이 확장자 때문에 종종 그냥 "Sass"라고 불립니다.
들여쓰기 문법은 scss와 동일한 특징을 모두 지원하지만 문서 형식을 설명하기위해 중괄호와 세미콜론 대신에 들여쓰기를 사용합니다.

일반적으로 css 또는 scss에서 중괄호를 사용할 때마다 들여쓰기 문법에서는 단지 한 번 들여쓰기를 할 수 있습니다.
그리고 들여쓰기는 줄이 끝날때마다 세미콜론처럼 계산됩니다.
참조 전반에 걸쳐 적힌 들여쓰기 문법에는 몇가지 차이점이 있습니다.

⚠️경고!
들여쓰기 문법은 여러줄에 걸쳐 적는 표현식은 지원하지 않습니다. 자세한 내용은 여기로

들여쓰기 문법은 다음과 같습니다.

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

---

스타일시트 분석

Sass 스타일시트는 유니코드 포인트의 시퀀스에서 분석됩니다.
먼저 토큰 스트림으로 변환되지 않고 직접 구문 분석됩니다.

입력 인코딩

호환성: Dart Sass X, LibSass O, Ruby Sass O
(Dart Sass는 현재 UTF-8 인코딩만 지원합니다. 따라서 모든 sass 스타일시트를 UTF-8로 인코딩하는 것이 가장 안전합니다)

문서를 처음에는 바이트 시퀀스로만 사용할 수 있으며 유니코드로 디코딩해야 하는 경우가 종종 있습니다.
Sass는 다음과 같이 디코딩을 수행합니다.

• 바이트 시퀀스가 U+FEFF BYTE ORDER MARK의 UTF-8 또는 UTF-16 인코딩으로 시작되면 해당 인코딩이 사용됩니다.
• 바이트 시퀀스가 일반 ASCII 문자열 @charset으로 시작된다면, Sass는 fallback 인코딩을 결정하기 위한 CSS 알고리즘의 2단계를 사용하여 인코딩을 결정합니다.
• 그렇지 않으면 UTF-8이 사용됩니다.

에러 분석

Sass가 스타일시트에서 잘못된 구문을 맞닥뜨리면 구문 분석이 실패하고 잘못된 구문의 위치와 잘못된 이유에 대한 오류가 사용자에게 표시됩니다.

Sass는 즉시 실패하는 대신 대부분의 오류로부터 복구하는 방법을 명시하는 CSS와는 다르다는 것을 주목하세요.
이것은 SCSS가 엄밀하게 CSS의 상위집합이 아닌 몇 안 되는 경우 중 하나입니다.
그러나 이것은 CSS 출력물로 오류를 전달하는 것보다 오류를 즉시 볼 수 있기 때문에 Sass 사용자에게 더 유용합니다.

구문 분석 오류의 위치는 구현별 API를 통해 액세스할 수 있습니다. 예를 들어 Dart Sass에서는 SassException.span 에 액세스할 수 있으며 Node Sass 및 Dart Sass에서는 파일, 줄 및 열 속성 에 액세스할 수 있습니다.

---

스타일시트의 구조

css와 마찬가지로 대부분의 sass 스타일시트는 주로 속성 선언을 포함하는 스타일 규칙으로 구성됩니다.
하지만 sass 스타일시트는 이것들과 함께 존재할 수 있는 더 많은 특징들을 가지고 있습니다.

문

sass 스타일시트는 결과 css를 구축하기위해 평가되는 일련의 문으로 구성되어 있습니다.
일부 문은 다른 문을 포함하는 { 와 }를 사용하여 정의된 블록 을 가질 수 있습니다.
예를 들어, 스타일 규칙은 블록이 있는 문입니다.
그 블록은 속성 선언과 같은 다른 문을 포함합니다.

scss에서는 문은 세미콜론으로 분리됩니다.(문이 블록을 사용한다면 선택사항)
들여쓰기 문법에서 문은 새로운 줄로 분리됩니다.

일반적인 문

다음 유형의 문들은 sass 스타일시트의 모든 곳에서 사용할 수 있습니다

• 변수 선언: $var: value
• 흐름 제어 @-규칙: @if와 @each
• @error, @warn, @debug 규칙들

css 문

이러한 문들은 CSS를 생성합니다.
@function을 제외한 모든 곳에서 사용할 수 있습니다.

• h1 {/*...*/}과 같은 스타일 규칙
• @media와 @font-face와 같은 css @-규칙
• @include를 사용하는 mixin 사용
• @at-root 규칙

최상위 레벨 문

이러한 문들은 스타일시트의 최상위 레벨에서만 사용할 수 있으며, 최상위 레벨의 CSS 문에 중첩될 수 있습니다.

• @use를 사용하는 모듈 로드
• @import를 사용하는 불러오기
• @mixin을 사용하는 mixin 정의
• @function을 사용하는 함수 정의

다른 문

• width: 100px과 같은 속성 선언은 스타일 규칙과 일부 CSS at-rules 내에서만 사용될 수 있습니다.
• @extend 규칙은 스타일 규칙 내에서만 사용할 수 있습니다.

표현식

표현식은 속성 또는 변수 선언의 오른쪽에 들어가는 모든 것입니다.
각 표현식은 값을 생성합니다.
유효한 CSS 속성 값도 Sass 표현식이지만 Sass 표현식은 일반 CSS 값보다 훨씬 강력합니다.
그것들은 mixin과 함수에 인수로 전달되고, @if 규칙으로 흐름을 제어하기 위해 사용되며, 연산을 사용하며 조작됩니다.
우리는 Sass의 표현식을 SassScript라고 부릅니다.

리터럴

가장 간단한 표현식은 정적 값만 나타냅니다.

• 12 또는 100px과 같이 단위를 가질 수도 있고 갖지 않을 수도 있는 숫자,
• "Helvetica Neue 또는 bold와 같이 따옴표를 가질 수도 있고 갖지 않을 수도 있는 문자열
• #c6538c 또는 blue와 같이 16진수 표현 또는 이름으로 참조될 수 있는 색
• true 또는 false인 불리언 리터럴
• 싱글톤 null
• 1.5em 1em 02em, Helvetica, Arial, sans-serif 또는 [col1-start]와 같이 공백 또는 쉼표로 구분되고 대괄호로 묶이거나 대괄호가 전혀 없는 Lists of values(값 목록)
• ("background": red, "forground": pink) 와 같이 키와 값을 연결하는 Maps(맵)

연산

Sass는 수많은 연산에 대한 문법을 정의합니다.

• == and !=는 두 값이 동일한지 확인하기위해 사용됩니다.
• +, -, *, /, 및 %는 과학 수학에서 단위를 사용하는 것과 일치하는 단위에 대한 특별한 행동을 가지고 숫자에 대한 일반적인 수학적 의미를 갖습니다.
• <, <=, >, 및 >=는 두 값이 다른 하나보다 큰지 작은지 확인합니다.
• and, or 및 not은 일반적인 불리언 행동을 갖지 않습니다. Sass는 false와 null을 제외한 모든 값을 "true"로 간주합니다.
• +, -, 및 /는 문자열을 연결하는 데 사용될 수 있습니다.
• ( 및 )은 연산의 우선 순서를 명시적으로 제어하는 데 사용될 수 있습니다.

다른 표현식

• $var과 같은 변수
• nth($list, 1) 또는 var(--main-bg-color)와 같은 함수 호출은 Sass 코어 라이브러리 함수 혹은 사용자정의 함수를 호출하거나 CSS로 직접 컴파일될 수 있습니다.
• calc(1px + 100%) 또는 url(http://myapp.com/assets/logo.png)과 같은 특수 함수는 고유한 구문 분석 규칙을 갖습니다.
• 부모 선택자 &
• !important 값은 따옴표가 없는 문자열로 구문 분석됩니다.

---

주석

Sass 주석 방법은 SCSS와 들여쓰기 문법간의 상당히 다르게 작동합니다. 두 문법 모두 두가지 유형의 주석을 지원합니다.
/* */을 사용하여 정의하는 주석은 (보통) CSS로 컴파일되며 //을 사용하여 정의하는 주석은 컴파일되지 않습니다.

SCSS에서는

SCSS의 주석은 자바스크립트와 같은 다른 언어의 주석과 비슷하게 동작한다. 한 줄 주석은 //로 시작하여 줄 끝까지 이동합니다. 한 줄 주석의 어떤 것도 CSS로 방출되지 않습니다. 그것들은 또한 CSS를 생산하지 않기 때문에 조용한 주석이라고도 불립니다.

여러 줄 주석은 /*로 시작하여 다음 */로 끝납니다. 문이 허용된 곳에 여러 줄 주석이 작성되면 CSS 주석으로 컴파일됩니다. 조용한 주석과 대조적으로 시끄러운 주석이라고도 합니다. CSS로 컴파일되는 여러 줄 주석에는 보간이 포함될 수 있으며, 이는 주석이 컴파일되기 전에 평가됩니다.

기본적으로 여러 줄 주석들은 압축 모드에서 컴파일된 CSS에서 제거됩니다. 그러나 /*!로 시작되는 주석은은 항상 CSS 출력물에 포함될 것입니다.

Sass에서는

들여쓰기 문법의 주석은 다른 문법과 마찬가지로 들여쓰기 기반이라는 점에서 약간 다르게 작동합니다. SCSS처럼 //로 작성된 조용한 주석은 CSS로 출력되지 않지만 SCSS와는 달리 //로 시작하는 부분 아래에 들여쓰기된 모든 부분도 주석처리 됩니다.

/*로 시작하는 들여쓰기 문법 주석은 CSS로 컴파일된다는 점을 제외하고 들여쓰기와 동일한 방식으로 작동합니다. 주석의 확장은 들여쓰기를 기반으로 하므로 닫기 */는 선택 사항입니다. 또한 SCSS와 마찬가지로 /* 주석은 보간을 포함할 수 있으며 압축 모드에서 제거되는 것을 방지하기 위해 /*!로 시작할 수 있습니다.

주석은 들여쓰기 문법의의 표현식 내에서 사용될 수도 있습니다. 이 경우 SCSS와 동일한 문법을 사용합니다.

문서 주석

Sass를 사용하여 스타일 라이브러리를 작성할 때 주석을 사용하여 라이브러리와 라이브러리 자체뿐만 아니라 라이브러리가 제공하는 믹스인, 함수, 변수, placeholder 선택자를 문서화할 수 있습니다. 다음은 SassDoc 도구를 사용하여 아름다운 문서를 생성하는 주석입니다. Susy 그리드 엔진의 문서를 확인하여 실제 작동 상태를 확인하십시오!

문서 주석은 문서화하는 항목 바로 위에 슬래시 3개(////) 로 작성된 조용한 주석입니다. SassDoc은 주석의 텍스트를 Markdown으로 구문 분석하고, 이를 자세히 설명하기 위해 많은 유용한 annotations(주석)을 지원합니다.

---

특수 함수

CSS는 많은 함수를 정의하며, 대부분은 Sass의 일반 함수 문법에서 잘 작동합니다. 그것들은 함수 호출로 구문 분석되고, plain CSS 함수로 해결되며, 그대로 CSS로 컴파일됩니다. 그러나 SassScript 표현식으로만 구문 분석할 수 없는 특별한 문법을 가진 몇 가지 예외가 있습니다. 모든 특수 함수 호출은 따옴표로 묶이지 않은 문자열을 반환합니다.

url()

url() 함수는 CSS에서 일반적으로 사용되지만 문법은 다른 함수와는 다릅니다: 따옴표가 있거나 따옴표가 없는 URL을 모두 사용할 수 있습니다. 따옴표로 묶이지 않은 URL은 유효한 SassScript 식이 아니기 때문에, Sass는 그것을 구문 분석하기 위해 특별한 논리가 필요랍니다.

url()의 인수가 따옴표로 묶이지 않은 유효한 URL이면 SassScript 값을 삽입하는 데 보간이 사용될 수 있지만 SassScript는 그대로 해석합니다. 따옴표로 묶이지 않은 유효한 URL이 아닌 경우(예를 들어 변수나 함수 호출이 포함된 경우) plain CSS 함수 호출로 구문 분석됩니다.

element(), progid:...(), and expression()

element() 함수는 CSS 스펙에 정의되어 있으며, ID는 색으로 구문 분석할 수 있기 때문에 특별한 구문 분석이 필요하다.

expression() 및 progid로 시작하는 함수는 비표준 문법을 사용하는 레거시 Internet Explorer 기능입니다. 최신 브라우저에서 더 이상 지원되지 않지만 Sass는 하위 호환성을 위해 계속 구문 분석합니다.

Sass는 중첩 괄호를 포함하여 이러한 함수 호출의 모든 텍스트를 허용합니다. 동적 값을 주입하는 데 보간을 사용할 수 있다는 점을 제외하고는 SassScript 표현식으로 해석되는 것은 없습니다.

SCSS

$logo-element: logo-bg;

.logo {
  background: element(##{$logo-element});
}

CSS

.logo {
  background: element(#logo-bg);
}

원문은 여기로