SASS 소개

사스는 무엇입니까?

웹사이트에는 "Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가용 CSS 확장 언어입니다"라고 나와 있습니다.

모든 버전의 CSS와 완벽하게 호환됩니다.

Sass를 사용하면 코드를 논리적이고 체계적으로 작성할 수 있어 코드 재사용성이 향상됩니다.

.scss 파일 확장자를 사용합니다.

변수:

실제 값으로 직접 변환되는 변수를 생성합니다. css 파일에 루트를 생성하지 않습니다.

javascript와 마찬가지로 변수를 생성할 수 있으며 달러 기호를 사용하여 변수를 생성할 수 있습니다.

색상 값을 유지하기 쉽고 한 곳에서만 쉽게 값을 변경할 수 있습니다.
-예:
.sass

    $primaryColorBtn: green;

    .card {
        color: $primaryColorBtn;
    }

.css

 .card {
    color: green
 }

지도:

js가 지도에 있는 것처럼 scss는 동일한 기능을 제공합니다.

구문은 map-get("지도 이름", "키 이름")입니다.

키의 이름을 통해 맵을 통해 값을 얻습니다.

$font-sizes: (
    "regular": 0.875rem,
    "medium": 1rem,
    "large": 1.2rem
)

.card {
    font-size: map-get($font-sizes, large);
}

이 스니펫에서는 먼저 font-sizes 맵에서 "large"키를 찾아 값을 가져옵니다.

둥지 키워드:

CSS에서 하위 클래스에 CSS 속성을 할당하기 위해 ".parent .children {}"구문을 사용합니다

.

sass에서 중첩을 사용하여 부모 isentifier를 반복하지 않고 이를 달성할 수 있습니다.

.form-horizontal {
    display: flex;
    .btn {
        color: $primaryBtnColor;
    }
} 

결과는 ".form-horizontal .btn {color: green }"입니다.

이렇게 하면 "form-horizontal"부모의 자식에만 기본 btn 색상이 할당됩니다.

여전히 프로젝트에서 과도한 중첩을 사용하지 않도록 주의하십시오.

중첩을 사용하는 것보다 재사용 가능한 클래스를 만드는 것이 좋습니다.

부분 파일:

sass에서 작은 css 코드 블록이 포함된 부분 sass 파일을 만들어 코드를 모듈식으로 만들 수 있습니다.

접두사로 _(밑줄)을 사용하여 만들 수 있습니다.

컴파일러가 이러한 부분 파일을 별도의 파일로 만들지 않습니다.

이러한 부분 파일을 가져오는 대상 파일,

컴파일 후 대상 파일의 CSS에 모든 부분 파일의 코드를 생성합니다

.

및 믹스인:

sass를 사용하면 재사용 가능성을 높이기 위해 함수를 믹스인으로 만들 수 있습니다.

보다 동적으로 만들기 위해 매개변수가 있는 믹스인을 만들 수 있습니다.

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text;
  color: yellow;
}

include는 다른 클래스의 믹스인에 액세스하는 데 사용됩니다.
매개변수와 혼합:

@mixin important-text($color) {
  color: $color;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text(yellow);
}

@확장:

extend 키워드는 클래스의 속성을 다른 클래스로 확장하는 데 사용됩니다.

.text-basic  {
  border: none;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.text-warning {
  @extend .text-basic;
  color: yellow;
}

.text-error {
  @extend .text-basic;
  color: red;
}

.text-success {
  @extend .text-basic;
  color: green;
}

수학 계산:

sass를 사용하면 "calc"키워드를 사용하지 않고 수학 계산을 할 수 있습니다.

"+", "-", "*", "/"연산을 지원합니다.

동일한 단위로만 산술 연산을 수행할 수 있습니다.
같은,

80% - 20% valid
100vh - 78vh valid
30% + 10vh not-valid

수입:

파일을 가져오기 위해 css에서 "import("./abc.css")를 사용합니다.

sass에서 "@import './abc'"를 사용하십시오.