sass
변수

통사론

• $ variable_name : 값 ;

Sass

변수는 한 번 값을 저장하는 데 사용되며 Sass 문서 전체에서 여러 번 사용됩니다.

글꼴 및 색상과 같은 것들을 제어하는 ​​데 주로 사용되지만 모든 속성 값에 사용할 수 있습니다.

Sass는 $ 기호를 사용하여 무언가를 변수로 만듭니다.

$font-stack: Helvetica, sans-serif
$primary-color: #000000

body
  font-family: $font-stack
  color: $primary-color

SCSS

Sass와 마찬가지로 SCSS 변수는 SCSS 문서 전체에서 여러 번 사용되는 값을 저장하는 데 사용됩니다.

변수는 주로 자주 사용되는 속성 값 (예 : 글꼴 및 색상)을 저장하는 데 사용되지만 모든 속성 값에 사용할 수 있습니다.

SCSS는 $ 기호를 사용하여 변수를 선언합니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #000000;

body {
  font-family: $font-stack;
  color: $primary-color;
}

아직 할당되지 않은 경우에만이 변수에 새 값을 할당하려면 변수를 선언 할 때 !default 를 사용할 수 있습니다.

$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green;        // And now it's green.

가변 범위

변수는 자바 스크립트에서와 같이 특정 범위 내에 존재합니다.

블록 외부에서 변수를 선언하면 시트 전체에서 변수를 사용할 수 있습니다.

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

블록 내에서 변수를 선언하면 해당 블록에서만 변수를 사용할 수 있습니다.

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

시트 레벨에서 선언 된 변수 (블록 외부)는 가져온 경우 다른 시트에서도 사용할 수 있습니다.

@ at-root 지시문을 사용하여 변수 지역화

@ at-root 지시문은 변수를 지역화하는 데 사용할 수 있습니다.

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

컴파일 대상은 다음과 같습니다.

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

보간법

문자열 보간에서 변수를 사용할 수 있습니다. 이를 통해 셀렉터, 속성 및 값을 동적으로 생성 할 수 있습니다. 변수를 작성하는 구문은 #{$variable} 입니다.

$className: widget;
$content: 'a widget';
$prop: content;

.#{$className}-class {
  #{content}: 'This is #{$content}';
}
// Compiles to

.widget-class {
  content: "This is a widget";
}

그러나 믹스 인 또는 함수의 이름을 동적으로 생성하는 데 사용할 수는 없습니다.

SCSS의 변수

SCSS에서 변수는 $ sign로 시작하며 CSS 속성처럼 설정됩니다.

$label-color: #eee;

정의 된 중첩 된 선택기에서만 사용할 수 있습니다.

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

중첩 된 선택자의 외부에서 정의 된 경우 모든 곳에서 사용할 수 있습니다.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

또한 !global 플래그로 정의 할 수 있습니다.이 경우 !global 플래그도 사용할 수 있습니다.

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

변수 이름에는 하이픈과 밑줄을 혼용하여 사용할 수 있습니다. 예를 들어 $label-width 라는 변수를 정의하면 $label_width 로 액세스 할 수 있고 그 반대도 마찬가지입니다.