사용자 정의 CSS 변수에 SASS 확장을 사용하는 방법

페이지에 CSS 규칙을 자주 작성하고 일부 규칙을 한 파일에서 다른 파일로 복사해야 합니까?이 문제를 해결하는 데 도움이 되는 SASS 확장에 대해서는 아직 들어보지 못했을 수도 있습니다.

SASS란 무엇입니까?

SASS는 CSS 확장으로 이런 형식의 간단한 언어에 강력한 기능과 우아한 스타일을 제공한다.SASS를 사용하면 변수, 중첩 규칙, 혼합, 내연 가져오기 등을 사용할 수 있습니다. 이 모든 문법은 CSS에 완전히 부합됩니다.
본고의 실질은 SASS가 서로 다른 상황에서 작동하는 원리를 이해하고 필요한지 결정하는 것입니다.

문법

SASS의 경우 SASS 및 SCSS 두 가지 유형의 구문이 있습니다.
SASS는 보다 간결하게 CSS를 사용할 수 있는 방법을 제공합니다.이것은 선택기 첨부 파일을 구분하기 위해 대괄호 대신 들여쓰기를 사용하고 세미콜론 대신 줄을 바꾸어 속성을 구분합니다.문법은 SCS와 같은 기능을 가지고 있다.이 구문을 사용하는 파일에는 .sass 확장자가 있습니다.
이 문서에서 사용하는 SCSS(Sassy-CSS)는 고급 CSS 구문입니다.이것은 모든 유효한 CSS 스타일시트가 같은 논리를 가진 유효한 SCSS 파일임을 의미합니다.이 구문을 사용하는 파일에는 .scss 확장자가 있습니다.
sass convert 명령을 사용하여 파일을 한 형식에서 다른 형식으로 자동으로 변환할 수 있습니다.

# Convert SCSS to SASS
$ sass-convert style.scss style.sass
# Convert Sass to SCSS
$ sass-convert style.sass style.scss

선택기

body {
  color: #ddd;
}

body main {
  color: #fff;
}

이것이 바로 SCSS에서 위의 CSS 글을 작성하는 방법입니다.

body {
      color: #ddd;

      .main {
    color: #fff;
      }
    }

SCSS 구조는 DOM 구조와 유사합니다.이것은 더욱 효율적인 방식으로 CSS를 작성하는 데 도움이 된다.
상위 선택기를 참조할 수 있습니다.

.main {
  color: #fff;

  &:hover {
    color: #aaa;
  }
}

부모 선택기로 대체되며 다음과 같이 컴파일됩니다.

.main {
  color: #fff;
}

.main:hover {
  color: #aaa;
}  

SASS 변수 및 CSS 사용자 정의 속성

CSS 변수
네이티브 CSS 변수의 가장 큰 장점 중 하나는 최신 브라우저에 존재한다는 것이다(2015년 브라우저부터 귀여운 IE 9/10:D는 지원되지 않는다).그것들은 완전히 접근할 수 있다.그것들을 확인할 수 있습니다. 아마도 가장 중요한 것은 자바스크립트를 사용해서 그것들을 조작할 수 있다는 것입니다.
속성

:root {
  --font-family: Roboto;
  --text-size: 1rem;
  --font-color: #000;
}  

SCSS 변수
SCSS 변수는 $ 문자로 시작됩니다.

$width: 30px;
$color: #fff;
body h1 {
  width: $width;
  color: $color;
}

다음과 같이 컴파일됩니다.

body h1 {
  width: 10px;
  color: red;
}

SCSS 변수는 중첩된 선택기 레벨에서만 사용할 수 있습니다.범위 밖에서 변수를 사용할 수 있도록 하려면 !global 속성을 추가해야 합니다.

body {
  $width: 5rem !global;
  width: $width;
}

footer {
  width: $width;
}

SCSS 및 CSS 변수

:root {
  --font-family: Roboto;
  --text-size: 1rem;
  --font-color: #000;
  --width: 30px;
}

$font-size: var(--text-size);
$width: var(--width);
body {
  font-size: $font-size;
  width: $width;
}

footer {
  width: $width;
}

삽입: #{}#{}를 사용하여 이름과 값의 속성에 변수를 사용할 수 있습니다.

$name: bar;
$attr: background;
main.#{$name} {
  #{$attr}-color: #fff;
}

여기에는 다음이 포함됩니다.

main.bar {
  background-color: #fff;
}

수입하다

@import "foo.css”; //import foo.css
@import "foo” screen; //import foo.scss
@import "foo.scss" screen; //import foo.scss
@import "foo","bar" screen; //import foo.scss и bar scss

추가 가져오기foo.scss에 다음과 같은 내용이 포함되어 있는 경우

.title {
  color: #aaa;
}

그런 다음 파일을 다른 SCSS 구조로 가져올 수 있습니다.

body {
  background-color: #fff;

  main {
    color: #000;

    @import "foo";
  }
}

다음과 같이 컴파일됩니다.

body {
  background-color: #fff;
}

body main {
  color: #000;
}

body main .title {
  color: #aaa;
}

혼합물
mixin은 전체 스타일시트에서 다시 사용할 수 있는 스타일을 정의할 수 있습니다.mixin을 다른 프로그래밍 언어의 함수로 볼 수 있습니다.다른 프로그래밍 언어에서 변수와 함수를 전달할 수 있습니다.SASS에서 mixin은 CSS 규칙 세트를 반환합니다.다음 구문을 사용할 수 있습니다. @include 명령어 mixin에 의해 정의된 구문 이름은 다음 예제를 보십시오.

@mixin default-color {
  color: #1a0dab;
}

h1 {
  @include default-color;
  padding: 10px;
}

여기에는 다음이 포함됩니다.

h1 {
  color: #1a0dab;
  padding: 10px;
}

다음과 같이 복합 혼합물을 사용할 수도 있습니다.

@mixin default-height {
  height: 20px;
}

@mixin default-width {
  width: 40px;
}

@mixin default-border {
  border: 2px dashed;
}

.small-container {
  @include default-width;
  @include default-height;
  @include default-border;
}

여기에는 다음이 포함됩니다.

.small-container {
  height: 20px;
  width: 40px;
  border: 2px dashed;
}

제어 명령

SASS 제어 명령에 익숙합니까?
이러한 제어 명령은 @if, @for, @each 및 @while 을 포함합니다.SASS에서는 어떻게 작동합니까?
@if 명령
표현식의 값이 false나null로 되돌아오지 않으면 @if 명령은 SASS 표현식을 받아들여 이 명령의 스타일 블록을 실행합니다.간단한 예로 이 점을 설명합시다.

p {
  @if (2+2 == 4) {
    color: #fff;
  }
  @if (true) {
    font-size: 16px;
  }
  @if (1 > 4) {
    color: $ff00ff;
  }
  @if (false) {
    font-size: 24px;
  }
}

그러면 다음과 같이 컴파일됩니다.

p {
  color: #fff;
  font-size: 16px;
}

앞의 두 표현식의 계산 결과는true이기 때문에 스타일을 추가했고, 다른 두 표현식의 계산 결과는false이기 때문에 스타일을 추가하지 않습니다.
표현식이 올바르지 않으면 @if 외에 다른 옵션이 있습니다.이 경우 @elseif와 @else 문장을 사용할 수 있다.따라서 @if문장이 실패하면 @elseif문장을 실행하여 한 문장이 성공하거나 @else에 도달할 때까지 실행합니다.

@mixin titleSetting($size) {
  @if ($size == large) {
    font-size: 32px;
  } @else if ($size == medium) {
    font-size: 24px;
  } @else if ($size == small) {
    font-size: 18px;
  } @else {
    font-size: 16px;
  }
}
h1 {
  @include titleSetting(large);
}

h2 {
  @include titleSetting(medium);
}

p {
  @include hetitleSettingading(hi);
}

그러면 다음과 같이 컴파일됩니다.

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

@ 명령의 경우@for 명령은 순환에서 스타일을 출력하는 데 사용됩니다.이 순환에는 시작 값과 끝 값이 있습니다.다음 예제에서는 이 점을 보다 명확하게 설명합니다.

@for $i from 1 through 5 {
  .legend-#{$i} {
    width: (10 * $i)px;
  }
}

그러면 다음과 같이 컴파일됩니다.

.legend-1 {
  width: 10px;
}

.legend-2 {
  width: 20px;
}

.legend-3 {
  width: 30px;
}

.legend-4 {
  width: 40px;
}

.legend-5 {
  width: 50px;
}

@ 각 명령@each 명령은 @for 명령의 시작 값과 끝 값이 아니라 순환에 사용됩니다.@each-$var의 문법, 그중$var은 모든 변수의 이름일 수 있다. 예를 들어$name.

@each $section in center, start, end {
  .section-#{$section} {
    display: grid;
    justify-content: #{$place};
  }
}

그러면 다음과 같이 컴파일됩니다.

.section-center {
  display: grid;
  justify-content: center;
}

.section-start {
 display: grid;
  justify-content: start;
}

.section-end {
  display: grid;
  justify-content: end;
}

@while 명령@while 명령은 표현식의 계산 결과가false가 아니라면 삽입된 스타일 블록을 받아들인다.이것은 @for 명령과 유사하지만, @for 명령이 실행할 수 있는 순환보다 더 복잡한 순환을 실행하는 데 사용할 수 있다.@while 명령을 적용하면 값의 범위가 아니라 설정된 변수를 사용합니다.@for 반복 @while 명령 예제를 사용합니다.

$i: 1;
@while $i < 5 {
  .legend-#{$i} {
    width: (10 * $i)px;
  }
  $i: $i + 1;
}

"변수$1가 5보다 크지 않을 때 끼워 넣은 스타일 블록을 실행합니다."이 값은 더 이상 5보다 작지 않을 때까지 중첩된 스타일 블록에 추가됩니다. 이것은false를 되돌려주는 조건입니다. 그리고 멈추십시오.
그러면 다음과 같이 컴파일됩니다.

.legend-1 {
  width: 10px;
}

.legend-2 {
  width: 20px;
}

.legend-3 {
  width: 30px;
}

.legend-4 {
  width: 40px;
}

메모@while 명령을 사용할 때, 고장 조건을 제공하지 않으면 순환이 영원히 실행된다는 것을 기억하십시오.우리의 예시에서 우리는 $i 의 값을 반복적으로 증가시켰기 때문에, 어떤 점에서 조건은false로 되돌아오는 것으로 설정되었다.

결론

SASS 확장을 사용하면 많은 시간을 절약하고 일상적인 업무를 자동화하며 사용자 정의 규칙을 여러 번 다시 사용할 수 있습니다.
본고에서 기술한 지령을 이해하면 당신의 규칙을 더욱 간결하게 하고 다른 개발자(그리고 당신 자신!)가 이해하기 쉬운 명확한 스타일을 가지게 될 것입니다.
SASS는 어떻게 설치합니까?
를 사용하여 SASS 문서에 액세스합니다.
SAS의 소스는 사용할 수 있습니다this link.
CSS의 변수here를 찾을 수 있습니다.
here
이전 발표