SCSS의 기본 사용법

1. 변수 $ 선언

변수 선언 기호 $

아래 그림의 왼쪽 절반은 scss의 구문이고, 오른쪽 절반은 컴파일된 CSS입니다. (이 글 전체에 걸쳐 사실입니다)

2. 기본 변수!default

sass의 기본 변수는 값 뒤에 !default만 추가하면 됩니다.

변수에 할당된 값에 !default 플래그가 추가되면 변수에 이미 값이 할당된 경우 해당 변수가 다시 할당되지 않지만 값이 할당되지 않은 경우 새 값이 할당됨을 의미합니다. 주어진 가치.

위의 예에서는 $color 변수에 666 값이 할당되었으므로 $666이므로\; 나중에\; 기본값을\; 할당해도\; 원래\; 값은\; 영향을\; 받지\; 않으며$ 색상 값은 여전히 ​​$666입니다.

3. 변수 호출

그냥 직접 전화하세요. 선언된 변수는 변수가 선언될 때 직접 호출될 수도 있습니다.

4. 지역변수와 전역변수

요소 내부에 정의된 변수는 다른 요소에 영향을 주지 않습니다.

5. 중첩

5.1, 선택자 중첩

Sass는 선택기 중첩 기능도 제공하지만 이것이 Sass에서의 중첩이 무제한이라는 의미는 아닙니다. 중첩이 깊어질수록 컴파일된 CSS 코드의 선택기 수준이 높아지기 때문입니다. 보고 싶지 않아

그러한 구조가 있는 경우:

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

헤더에서 a 태그를 선택하려면 다음과 같이 CSS를 작성하세요.

nav a {
  color:red;
}

header nav a {
  color:green;
}

그런 다음 Sass에서 선택기 중첩을 사용하여 다음을 달성할 수 있습니다.

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

5.2 속성 중첩

Sass는 또한 속성 중첩을 제공합니다. CSS에는 접두사는 같지만 접미사가 다른 일부 속성(예: border-top/border-right)과 여백, 패딩 및 글꼴과 같은 유사한 속성이 있습니다. 스타일이 다음을 사용한다고 가정합니다.

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

Sass에서는 다음과 같이 작성할 수 있습니다.

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

5.3 의사 클래스 중첩

와 함께 &

6. 하이브리드 매크로

전체 웹 사이트에 색상, 글꼴 등과 같은 유사한 작은 스타일이 여러 개 있는 경우 변수를 사용하여 Sass에서 이를 균일하게 처리할 수 있으므로 이 선택은 여전히 ​​좋습니다. 그러나 스타일이 점점 더 복잡해지고 스타일의 큰 부분을 재사용해야 하는 경우 변수를 사용하면 목적을 달성할 수 없습니다. 이때 Sass의 mixin 매크로는 매우 의미 있게 됩니다.

6.1 선언

6.1.1 매개변수가 없는 하이브리드 매크로

Sass에서는 " @mixin "을 사용하여 믹스인 매크로를 선언합니다. 좋다:

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

그 중 @mixin은 혼합 매크로를 선언하는 데 사용되는 키워드로 CSS의 @media, @font-face와 유사합니다. border-radius는 믹스인 매크로의 이름입니다. 중괄호 안에는 재사용된 스타일 코드가 있습니다.

6.1.2 매개변수가 있는 하이브리드 매크로

매개변수 없이 믹스인 매크로를 선언하는 것 외에도 다음과 같이 매개변수가 있는 믹스인 매크로를 정의할 수도 있습니다.

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

6.2 호출

Sass에서는 @mixin 키워드를 통해 혼합 매크로를 선언하므로, 실제 호출에서는 "@include" 키워드를 매칭하여 선언된 혼합 매크로를 호출합니다. 예를 들어 스타일에서 둥근 모서리 혼합 "border-radius"를 정의합니다.

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

버튼에서 정의된 믹스인 "border-radius"를 호출하려면 다음과 같이 사용할 수 있습니다.

button {
    @include border-radius;
}

현재 컴파일된 CSS는 다음과 같습니다.

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

6.3 하이브리드 매크로의 매개변수

Sass mixin 매크로는 매개변수를 전달하는 강력한 기능을 가지고 있으므로 Sass에서 매개변수를 전달하는 경우 주로 다음과 같은 상황이 있습니다.

6.3.1 값 없이 매개변수 전달하기

믹스인에서는 값 없이 매개변수를 전달할 수 있습니다. 예를 들면 다음과 같습니다.

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

값이 없는 '$radius' 매개변수가 mixin 'border-radius'에 정의되었습니다.

이 믹스인 매크로를 호출할 때 매개변수 값을 전달할 수 있습니다.

.box {
  @include border-radius(3px);
}

여기서는 "3px"의 "border-radius" 값이 혼합 매크로에 전달된다는 의미입니다.

컴파일된 CSS:

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

6.3.2 값과 함께 매개변수 전달하기

Sass 믹스인 매크로에서는 믹스인 매크로의 매개변수에 기본값을 전달할 수도 있습니다. 예를 들면 다음과 같습니다.

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

혼합 매크로 "border-radius"에서는 "$radius" 매개변수가 전달되고 이 매개변수에는 기본값 "3px"가 할당됩니다.

이와 같은 혼합 매크로를 호출할 때 추가 기회가 있을 것입니다. 페이지의 둥근 모서리가 여러 곳에서 "3px" 둥근 모서리라고 가정하면 이때 기본 혼합 매크로 "border-radius"만 호출하면 됩니다. :

.btn {
  @include border-radius;
}

컴파일된 CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

그러나 때로는 페이지의 일부 요소에 다른 필렛 값이 있으므로 다음과 같이 혼합 매크로에 값을 무작위로 전달할 수 있습니다.

.box {
  @include border-radius(50%);
}

컴파일된 CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

6.4 하이브리드 매크로의 부족

하이브리드 매크로는 실제 코딩 시, 특히 반복되는 코드 블록을 재사용할 때 많은 편의성을 제공합니다. 그러나 가장 큰 단점은 중복된 코드 블록을 생성한다는 것입니다. 예를 들어, 다른 장소에서 동일한 믹스인 매크로를 호출하는 경우입니다. 좋다:

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

이 예에서는 ".box"와 ".btn" 모두에서 정의된 "border-radius" 믹스인을 호출합니다. 먼저 컴파일된 CSS를 살펴보세요.

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

위의 예에서 Sass가 동일한 믹스인 매크로를 호출하면 동일한 스타일 코드 블록을 지능적으로 결합할 수 없다는 것이 분명해졌습니다. 이것이 바로 Sass의 믹스인이 최악인 부분입니다.

7. 확장/상속

Sass에서는 코드 상속을 실현하기 위해 "@extend" 키워드를 사용하여 기존 클래스 스타일 블록을 상속합니다. 다음과 같이:

// SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

컴파일 후:

// CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
} // 合并到了一起

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

샘플 코드에서 볼 수 있듯이 Sass의 상속은 클래스 스타일 블록의 모든 스타일 코드를 상속할 수 있으며, 컴파일된 CSS는 선택기를 병합하여 결합된 선택기를 형성합니다.

8. 자리 표시자 % 자리 표시자

이는 CSS의 기본 클래스로 인해 발생하는 코드 중복의 이전 상황을 대체할 수 있습니다. %placeholder로 선언된 코드는 @extend로 호출되지 않으면 코드를 생성하지 않기 때문입니다. 데모를 확인하세요:

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

이 코드는 @extend에 의해 호출되지 않으며 코드 블록을 생성하지 않으며 SCSS 파일 중 하나에 조용히 위치합니다. @extend를 통한 호출만 코드를 생성합니다.

// SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

컴파일된 CSS

// CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

컴파일된 CSS 코드에서 볼 수 있듯이 컴파일된 코드는 @extend라는 자리 표시자를 통해 동일한 코드를 함께 병합합니다. 이는 우리가 보고 싶은 효과이기도 하며 코드를 더욱 깔끔하게 만들어줍니다.