5일차: 과소평가된 SASS

Feynman 기술은 어떤 과목을 가르치는 것이 당신을 더 잘하게 만든다고 말합니다. 이것이 제가 여기서 하려고 하는 것입니다. 이 게시물에서 실수를 본 경우 저를 수정할 수 있습니다.

SASS와 は何ですか❓

SASS(또는 Syntactically Awesome Style Sheet)는 기본적으로 우리의 숙적인 CSS의 확장입니다. 그것은 중첩(드디어!), 논리, 심지어 이상한 for , each 및 while 루프를 가지고 있습니다! 그것이 무엇을 할 수 있는지 보자...

변수

글쎄, 나는 이것에 대해 많이 말하지 않을 것입니다. CSS에는 이미 변수 시스템이 있습니다.

$main-color: white;

중첩 🐣

CSS에서 부모 요소의 자식을 선택하는 방법은 적어도 나에게는 다소 직관적이지 않습니다.

그래서 SASS가 중첩을 사용하여 실제로 요소의 중첩을 논리적인 방식으로 표시한다는 사실을 알게 되어 기쁩니다.

#container {
  background-color: black;

  p {
    color: yellow;
  }
}

믹스인 🙆‍♀️

@mixin는 많은 스타일을 단일 라이너에 담을 수 있는 기능입니다. 브라우저 접두사를 다루는 데 특히 유용합니다.

@mixin rad-bod($val) {
  -webkit-border-radius: $val;
  -moz-border-radius: $val;
  -ms-border-radius: $val;
  border-radius: $val;
} 

예, 변수도 지원합니다.

논리적 추론

if 문은 SASS에 존재하며 @mixin와 결합하여 자세한 구문을 생성합니다.

@mixin border($thicc) {
  @if $thicc == thin {
    border: 1px solid black
  }
  @else if $thicc == thick {
    border: 3px solid black
  }
  @else {
    border: none
  }
}

루프

HTML 파일에서 해당 ID를 타겟팅하는 데 지치셨습니까? for 루프를 사용하여 숫자 ID를 반복할 수 있습니다.

@for $index from 1 to 10 {
  .text-#{$index} {
    background-color: rgba(0, 255, 255, 0.1 * $index);
  }
}

#{$index} 표기법에 유의하십시오. CSS로 평가되는 문자열로 사용할 $index value를 캐스팅하므로 .text-1 , .text-2 등이 될 수 있습니다. 또한 to 키워드는 마지막 숫자를 제외합니다. 포함하려면 through 를 사용하십시오.

다음으로 @each 루프:

@each $box in column, row {
  #{$box}-flexbox {
    flex-direction: $box;
  }
}

지도와 함께 사용할 수도 있습니다.

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

물론 @while 루프는 다음과 같습니다.

$x: 1;
@while $x < 10 {
  .row-#{$x} { height: 100%/12 * $x;}
  $x: $x + 1;
}

부분 가져오기

부분은 다른 파일로 가져올 수 있는 SASS 파일입니다(Python의 모듈을 생각해 보십시오). 부분 파일에는 접두사로 밑줄을 붙여야 합니다.

가져오려면:

@import 'text_part'

SASS 컴파일러가 이를 이해하므로 밑줄을 다시 작성할 필요가 없습니다.

스타일을 다른 요소로 확장하세요!

요소 간에 반복 가능한 스타일이 있는 경우 다른 요소에 대한 스타일을 '차용'할 수 있습니다.

p {
  color: white;
  font-family: Robota;
}

h2 {
  @extend p;
  background-color: cyan;
}

후기

좋아요, 저는 FreeCodeCamp가 단 9개의 레슨으로 얼마나 많은 지식을 담을 수 있는지 분명히 과소평가했습니다. TBH 이번 포스팅이 가장 긴 것 같아요. 그래서 좀 쉬다가 드디어 리액트☄를 만나러 갑니다.

참고로 저는 이전에 SASS를 사용해 본 적이 있지만 중첩 및 혼합 기능만 사용하기 때문에 기본 사항을 이해하는 데 눈을 뜨게 할 것입니다.

그건 그렇고, 저는 SCSS 파일을 CSS로 컴파일하기 위해 Linux(또는 Win10의 WSL)에서 sassc 컴파일러를 사용합니다. 또한 직접 컴파일하고 Github에 게시하는 경우 .gitignore에 두는 것을 잊지 마십시오.

좋아, 내일 보자! 👋

Github에서 저를 팔로우하세요!
또한 !