Angular Material에서 테마를 만들고 싶었습니다.
SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다.

공식 사이트 htps : // 어서 - g. 코m/

문법

SCSS의 문법은 CSS를 확장한 형태로 되어 있다.
CSS 그대로도 SCSS로 해석됩니다.

변수

SCSS에서는 변수를 선언하고 참조할 수 있습니다.

선언과 참조 방법

.myclass {
  $mywidth: 100%;
  width: $mywidth;
}

머리에 $를 붙여 값과 :로 구분하십시오.

변수의 범위

변수의 범위는 선언을 포함하는 {} 안으로 제한됩니다.
{} 외부에서 선언하면 전역 범위가 됩니다.
{} 안에서도 !global를 붙이면 글로벌 범위가 됩니다.

글로벌 스코프

$myglobal: blue;

.myclass {
  $alsoglobal: lightblue !global;
}

변수 유형

금형
설명
예


수치
숫자입니다.
1.5 , 8px
문자열
문자열입니다. 따옴표는 있거나 없을 수 있습니다.
foo , "bar"
칼라
RGB 값과 색상의 이름입니다.
#4ff , blue
진위값
true 또는 false입니다.true
null
null입니다.null
리스트
공백이나 쉼표로 구분된 값입니다.
1 1 auto , Helvetica,Sans
지도
키와 값의 쌍입니다. 언어에 따라서는 연상 배열이나 해시라고도 합니다.(key1:value1, key2:value2)
함수에 대한 참조
함수에 대한 참조입니다. call에서 호출할 수 있습니다.$ref = get-function("関数名")

@로 시작하는 지시문

@import

외부 파일을 읽고 전체를 하나의 CSS 파일로 만듭니다.

@mixin 및 @include

변수는 값을 사용하기 위한 메커니즘이었습니다.
mixin은 전체 스타일을 사용하기위한 메커니즘입니다.

mixin 선언

@mixin 強調 {
  font-size: 1.4em;
  font-weight: bold;
}

mixin으로 정의한 스타일은 @include로 호출할 수 있습니다.

mixin 사용

.my-em {
  @include 強調;
}

mixin은 인수로 선언할 수도 있습니다.

인수가 있는 mixin

@mixin 色付き枠($color) {
  border-style: solid;
  border-width: 1px;
  border-color: $color;
}

사용할 때는 인수를 전달합니다.

인수가 있는 mixin 사용

@include 色付き枠(green);

@function

함수를 선언할 수 있습니다.

기능

다양한 유용한 함수가 정의됩니다.

rgb($red, $green, $blue) RGB 값을 색상으로 설정합니다.

map_get($map, $key) 맵으로부터 지정된 키에 대응하는 값을 돌려줍니다.

그 외는 이쪽 함수 목록

조금

좋아