1. data type

• 프로퍼티 값으로 사용할 수 있는 값에는 7가지 데이터 타입
  • 숫자형
    • 1.2, 12, 10px...
  • 컬러
    • black, #fff, rgba(255, 123, 0, 0.1)
  • 문자형
    • "Noto Sans KR",'https://fonts.google.com/', sans-serif
    • 따옴표를 사용하는 경우, 사용하지 않는 경우가 있는데 트랜스파일링 후 css 파일에는 sass에서 사용한 문자열이 삽입됨
  • boolean
    • true & false
  • null
    • 프로퍼티값의 값이 null인 변수가 지정된 경우 해당 룰셋은 트랜스파일링 되지 않음
  • list
    • margin 또는 padding 프로퍼티값 지정에 사용되는 0 auto 와 font-family 프로퍼티값 지정에 사용되는 "Noto Sans KR", sans-serif 등은 공백 또는 콤마로 구분된 값의 list
  • map
    • 객체와 유사한 방식으로 map-get 함수를 사용하여 원하는 값은 추출할 수 있음

// scss
$bgcolor: (
  bgred: #f00,
  bggreen: #0f0,
  bgblue: #00f,
);

body {
  background-color: map-get($bgcolor, bgblue);
}

// css
body {
  background-color: #00f;
}

2. 변수

• 문자열, 숫자, 컬러등을 변수에 지정하고 필요할 때 사용할 수 있다.
• 변수명은 $로 시작.

// scss
$bgcolor: #f00;
$max_width: 375px;
$font_noto: "Noto Sans KR", sans-serif;

body {
  background-color: $bgcolor;
  font-family: $font_noto;
  max-width: $max_width;
}

// css
body {
  background-color: #f00;
  font-family: "Noto Sans KR", sans-serif;
  max-width: 375px;
}

2.1 변수의 scope

// scss
$width: 375px; // 전역 변수

.container {
  width: $width;
}

.container {
  $color: #ccc; // 지역변수
  nav {
    width: $width;
  }
  ul {
    color: $color;
    li {
      color: $color;
    }
  }
}

footer {
  width: $width;
  color: $color; // Error: Undefined variable.
}

• 코드 블록 내에서 선언한 지역변수를 전역 변수로 바꾸는 방법

.container {
  $color: #ccc !global; // 전역변수
  nav {
	...

3. 연산자

3.1 숫자 연산자

연산자	설명
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지
==	동등
!=	부등

// scss
$width: 375px;

.container {
  width: $width + 10;
}

.container2 {
  width: $width + 5in;
}

.container3 {
  width: $width + 5cm;
}

// css
.container {
  width: 385px;
}

.container2 {
  width: 855px;
}

.container3 {
  width: 563.9763779528px;
}

• 변수 width 값 375px에 10, 5in, 5cm와 같이 다른 단위의 값을 연산하여도 에러 없이 수행됨.

$width: 375px;

.box {
  width: $width + 2rem;	// Error: 375px and 2rem have incompatible units.
}

• %, em, rem, vh, vw, vmin, vmax과 같이 상대적인 값의 결과 값은 브라우저는 알지만 Sass는 알지 못함.

.box {
  width: 10% + 5%;
}

• CSS3의 calc()를 이용하여 문제를 해결

.box{
  width: cals(100% - 50px);
}

• CSS에서 /는 나눗셈의 의미가 아닌 값을 구분

span {
  font: italic bold 12px/30px Noto Sans KR, serif;
}
// font: font-style font-variant font-weight font-size/line-height font-family

• 따라서 Scss에서 / 연산자를 사용하기 위해서는
  • 변수에 대해 사용
  • 괄호 내에서 사용
  • 다른 연산의 일부로 사용

// scss
$width: 100px;
$font-size: 24px;
$line-height: 30px;

div {
  width: $width / 2;			// 변수에 대해 사용
  height: (500px / 2);			// 괄호 내에서 사용
  margin: 10px + 20px / 2px;	// 다른 연산의 일부로 사용
  font: #{$font-size}/#{$line-height};
}

//css
div {
  width: 50px;
  height: 250px;
  margin: 20px;
  font: 24px/30px;
}

3.2 color 연산자

• color function 참조

3.3 문자열 연산자

• + 연산자는 자바스크립트와 같이 문자열을 연결

// scss
button {
  cursor: poin + ter;
}

// css
button {
  cursor: pointer;
}

• 따옴표가 있는 문자열과 없는 문자열을 함께 사용하는 경우 좌항의 문자열을 기준으로 따옴표를 처리

// scss
p:before {
  content: "Sc" + ss;
  font-family: se + "rif";
}

// css
p:before {
  content: "Scss";
  font-family: serif;
}

3.4 boolean 연산자

연산자	설명
&&	and
||	or
!	not

• built-in if() 참조
• @if…@else 참조

3.5 list 연산자

• list functions 참조

4. function

• Sass Built-in Functions 참조

5. Interpolation: #{}

• 인터폴레이션은 변수의 값을 문자열 그대로 삽입
• 인터폴레이션에 의해 삽입된 문자열은 연산의 대상으로 취급되지 않음
• 변수는 프로퍼티값으로만 사용할 수 있으나 인터폴레이션을 사용하면 프로퍼티값은 물론 셀렉터와 프로퍼티명에도 사용할 수 있음

// scss
$name: hello;
$attr: background;

p {
  $font-size: 24px;
  $line-height: 15px;
  font: #{$font-size} / #{$line-height}; // 연산 대상이 아님
}

p .#{$name} {
  #{$attr}: blue;
}

// css
p {
  font: 24px/15px;
}

p .hello {
  background: blue;
}

6. Ampersand(&)

• 부모 요소 참조

// scss
button {
  color: #000;

  &.white {
    color: #fff;
  }

  &:hover {
    background-color: red;
  }

  + span {
    counter-reset: green;
  }

  > span {
    color: blue;
  }

  span {
    color: yellow;
  }
}

// css
button {
  color: #000;
}
button.white {
  color: #fff;
}
button:hover {
  background-color: red;
}
button + span {
  counter-reset: green;
}
button > span {
  color: blue;
}
button span {
  color: yellow;
}

7. !default

• !default flag는 할당되지 않은 변수의 초기값을 설정
• 2개의 scss 파일 "_font.scss", "main.scss"을 생성 후 각각의 파일에 아래와 같이 작성

// _font.scss
$font-size: 16px !default;
$line-height: 1.5 !default;
$font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif !default;

body {
  font: #{$font-size}/ $line-height $font-family;
}

// main.scss
$font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;

@import "font"; // main.scss은 내부에서 _font.scss을 import

• 위의 트랜스파일링 결과는 아래와 같다

// main.css
body {
  font: 16px/1.5 "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

• !default는 변수에 값이 할당되지 않았을 때 사용할 기본값을 지정할 때 사용한다.
• 따라서 main.scss에서 변수에 값을 할당하였기 때문에 !default와 같이 사용한 변수값은 무력화된다.
• 만약 font.scss의 $font-family 변수에 !default 설정이 없었다면 후위에 선언된 font.scss의 $font-family 변수값이 적용돠어 아래와 같은 결과가 생성

// mian.css
body {
  font: 16px/1.5 "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

참조 : poiemaweb