scss 개념 및 사용법

변수: SCSS에서는 변수를 사용하여 색상, 글꼴 크기 등과 같은 값을 저장할 수 있으므로 전체 스타일 시트에서 이러한 값을 균일하게 조정하는 것이 더 편리하고 유지 관리가 쉽습니다.
중첩 규칙: SCSS에서 중첩 규칙을 사용하면 스타일을 구성하여 코드 구조를 더 명확하게 만들 수 있습니다. 예를 들어 요소의 의사 클래스 스타일을 여러 위치에 작성하는 대신 상위 요소의 스타일 블록에 작성할 수 있습니다.
믹스인: 믹스인은 일련의 스타일 속성을 재사용 가능한 블록으로 결합하는 방법입니다. 이렇게 하면 동일한 스타일 코드를 반복적으로 작성하는 것을 방지하고 코드 재사용성과 가독성이 향상됩니다.
가져오기(인라인 가져오기): @import 규칙을 통해 여러 SCSS 파일을 하나의 파일로 병합할 수 있습니다. 이 접근 방식은 스타일 시트를 논리 단위로 분할하는 데 도움이 되며 필요에 따라 유연하게 구성하고 관리할 수 있습니다.
상속(확장): SCSS는 @extend 키워드를 통해 스타일 상속을 지원하므로 스타일 시트를 더욱 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다.
연산: SCSS는 스타일 시트에서 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 수학적 연산을 허용하며 이는 일부 동적 스타일 계산을 처리하는 데 도움이 됩니다.
모듈성: SCSS의 특성으로 인해 스타일 시트가 더욱 모듈화되고 구조화되어 특히 대규모 프로젝트에서 스타일을 더 잘 관리하고 유지할 수 있습니다.

요약하자면, SCSS는 CSS의 모든 기능을 유지할 뿐만 아니라 변수, 중첩, 혼합, 가져오기 등과 같은 고급 기능도 도입합니다. 이러한 기능을 통해 개발자는 스타일 시트를 보다 효율적으로 작성하고 관리할 수 있으며 현대 프론트엔드에서 일반적으로 사용됩니다. 도구 중 하나를 종료합니다.

scss와 css의 비교

문법:

CSS: 기본 계단식 스타일 시트 구문, 규칙은 선택기, 속성 및 값을 통해 정의됩니다.
SCSS: SCSS는 CSS용 전처리기 언어로, 스타일 시트 작성을 더욱 유연하고 효율적으로 만드는 변수, 중첩 규칙, 믹스인, 가져오기 등과 같은 더 많은 기능과 구문을 제공합니다.

가독성 및 유지 관리성:

CSS: 대규모 프로젝트에서 CSS 파일은 구조화된 모듈식 기능이 부족하기 때문에 매우 장황해지고 유지 관리가 어려워질 수 있습니다.
SCSS: SCSS는 변수와 중첩 규칙을 지원하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. 변수와 믹스인을 사용하면 반복적인 코드 작성을 줄일 수 있고, 중첩된 규칙은 HTML 구조의 계층적 관계를 보다 명확하게 표현할 수 있습니다.

기능 확장:

CSS: 표준 CSS는 기본 스타일 정의 및 선택기 일치만 수행할 수 있습니다.
SCSS: SCSS는 혼합, 상속, 계산과 같은 고급 기능을 도입하여 스타일 시트를 더욱 유연하고 강력하게 만들고 복잡한 스타일 요구 사항에 더 잘 대처할 수 있습니다.

호환성:

CSS: 브라우저는 CSS를 직접 지원하므로 추가 컴파일 단계가 필요하지 않습니다.
SCSS: SCSS는 브라우저에서 이해되고 적용되기 전에 컴파일러에 의해 일반 CSS 파일로 변환되어야 합니다.

학습 곡선:

CSS: CSS를 배우는 것은 상대적으로 간단합니다. 선택기, 속성 및 값의 기본 조합을 이해하면 됩니다.
SCSS: SCSS를 학습하려면 변수, 혼합, 중첩 등과 같은 고유한 구문과 기능을 마스터해야 하며, 이를 위해서는 특정 학습 및 적응 프로세스가 필요합니다.

요약하면 일반 CSS와 비교하여 SCSS는 스타일 시트 작성 및 유지 관리를 단순화하는 더 많은 도구와 기능을 제공하며 특히 크고 복잡한 프로젝트 개발에 적합합니다. 그러나 소규모 프로젝트나 간단한 스타일 요구 사항의 경우 일반 CSS가 더 간단하고 편리할 수 있습니다.

scss 사용

scss를 배우기 전 먼저 vscode에 두 개의 플러그인을 설치해 scss를 일반 CSS 파일로 변환해 후속 학습을 해보세요!

플러그인 스토어에서 sass를 검색하고 다음 두 플러그인을 다운로드한 후 vscode를 다시 시작하세요!

변수 선언

SCSS에서 변수를 선언하는 것은 매우 간단합니다. $ 기호를 사용하여 변수를 정의할 수 있습니다.

다음은 SCSS에서 변수를 선언하고 사용하는 방법을 보여주는 간단한 예입니다.


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

위의 예에서는 기본 색상과 보조 색상을 각각 저장하기 위해 $primary-color 및 $secondary-color라는 두 개의 변수를 정의했습니다. 그런 다음 스타일 규칙에서 이러한 변수를 사용하여 스타일 시트 전체에서 색상을 일관되게 유지하고 쉽게 수정할 수 있습니다.

SCSS 파일이 일반 CSS 파일로 컴파일되면 모든 변수가 해당 값으로 대체되므로 최종 생성된 CSS 파일에는 변수 선언이 포함되지 않습니다.

기본 변수 구별

SCSS에서는 기본 변수를 사용하여 변수가 정의되지 않은 경우 대체 값을 갖도록 할 수 있습니다. 이는 테마 작업이나 스타일 구성 작업을 할 때 특히 유용합니다.

다음은 기본 변수를 선언하고 사용하는 방법의 예입니다.


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

위의 예에서는 !default 태그를 사용하여 기본값을 정의했습니다. 이는 $primary-color 또는 $secondary-color가 해당 SCSS 파일에 도입되기 전에 다른 곳에서 정의되지 않은 경우 지정된 기본값(#3498db 및 #2ecc71)을 사용함을 의미합니다. 파일을 가져오기 전에 이러한 변수를 정의한 경우 기본값은 무시됩니다.

기본 변수를 사용하면 이미 정의된 변수를 덮어쓰지 않고도 변수에 대한 대체 값을 제공할 수 있다는 이점이 있습니다. 이는 테마를 생성하거나 여러 스타일 파일에서 변수를 공유하는 데 특히 유용합니다.

전역변수와 지역변수 구별

전역 변수: 전역 변수는 선택기 외부 또는 믹서/함수 외부에서 선언된 변수입니다. 스타일시트 전체에서 액세스할 수 있으며 동일한 전역 변수가 여러 파일에 정의된 경우 해당 값은 일관되게 유지됩니다.
지역 변수: 지역 변수는 선택기 내부 또는 믹서/함수 내부에서 정의된 변수입니다. 정의된 범위 내에서만 사용할 수 있으며 해당 범위 밖에서는 더 이상 유효하지 않습니다.

참고: 지역 변수는 전역 변수보다 우선합니다.

전역 변수와 같은 이름의 변수가 지역 범위에서 다시 선언되면 지역 변수가 전역 변수의 값을 덮어씁니다. 이를 통해 전역 상황에 영향을 주지 않고 특정 선택기 또는 믹서에 대해 다양한 변수 값을 정의할 수 있습니다.

!global 키워드를 사용하여 지역 변수를 전역 변수로 변환합니다.

SCSS는 지역 변수를 전역 변수로 명시적으로 선언하기 위해 !global 키워드를 제공합니다. 이로 인해 지역 변수의 값이 선언된 전역 범위로 승격되어 동일한 이름의 기존 전역 변수를 덮어씁니다.

예:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

첫 번째 예에서는 .button 선택기 내의 로컬 변수 $primary-color가 전역 변수의 값을 재정의합니다. 두 번째 예에서는 !global 키워드를 사용하여 .button 선택기 내부의 로컬 변수가 전역 변수로 변환되어 전역 범위의 변수 값에 영향을 줍니다.

중첩된 구문

선택기 중첩

기본 중첩

선택기 중첩을 사용하면 하위 선택자의 스타일 규칙을 상위 선택자 내에 중첩할 수 있습니다. 예를 들면 다음과 같습니다.


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

위 코드에서 .navbar 선택기에는 중첩된 ul, li 및 하위 선택기가 포함되어 있습니다. 이 중첩된 구조를 통해 스타일 규칙이 더욱 명확해지고 관리가 쉬워집니다.

중첩된 상위 선택기 참조(&)

SCSS에서 & 기호는 상위 선택자를 참조하는 데 사용되며, 특히 의사 클래스나 의사 요소의 경우 유용합니다. 예를 들어 &:hover를 사용하여 현재 선택기의 상위 선택기를 참조하고 :hover 상태 스타일을 추가합니다.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

중첩 고려사항

선택기 깊이: 지나치게 깊은 선택기 중첩을 피하세요. 스타일 우선순위가 높아져 스타일 재정의 및 유지 관리가 어려워질 수 있습니다.
가독성: 선택기 중첩을 사용할 때 코드를 읽기 쉽고 명확하게 유지하고 지나치게 복잡한 중첩 구조를 피하는 데 주의하세요.
성능: 중첩된 구조는 생성된 CSS 파일의 크기를 늘릴 수 있지만 일반적으로 적절한 스타일 구성 및 작성을 통해 최적화할 수 있습니다.

중첩 중첩

SCSS는 여러 수준의 선택기 중첩을 허용합니다. 예를 들면 다음과 같습니다.


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

속성 중첩

SCSS에는 선택기 중첩 외에도 스타일시트를 더 깔끔하고 관리하기 쉽게 만드는 또 다른 기능인 속성 중첩 기능도 있습니다. 속성 중첩을 사용하면 객체의 형식과 유사하게 관련 속성을 함께 구성할 수 있습니다.

기본 속성 중첩

속성 중첩을 사용하면 코드 블록 내에 관련 속성을 배치할 수 있습니다. 예를 들면 다음과 같습니다.


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

위의 예에서 글꼴, 여백 및 패딩 블록에는 관련 속성이 포함되어 있습니다. 이 구성은 각 블록 내의 속성을 더 명확하고 수정 및 유지 관리하기 쉽게 만듭니다.

중첩 고려사항

지원되는 속성: 모든 CSS 속성이 중첩을 지원하는 것은 아니며 일반적으로 글꼴, 여백, 패딩, 테두리 등과 같은 키-값 쌍을 허용할 수 있는 속성입니다.
가독성: 속성 중첩을 사용할 때 코드의 가독성과 명확성을 보장하고 과도한 중첩과 복잡한 구조를 피하세요.
중첩된 중첩: 속성 중첩 내에 다른 속성을 중첩하여 스타일을 추가로 구성하고 구조화할 수도 있습니다.

상속하다

SCSS에서 상속(확장)은 한 선택기가 다른 선택기의 스타일 규칙을 상속할 수 있도록 하는 매우 유용한 기능입니다. 이 기능은 중복된 CSS 코드를 줄이고 스타일시트를 더욱 모듈화하고 유지 관리하기 쉽게 만듭니다.

기본 사용법

선택기 상속은 @extend 키워드를 사용하여 달성할 수 있습니다. 예를 들어:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

위의 예에서 %message-shared는 공통 스타일 세트를 정의하는 자리 표시자 선택기입니다. .success-message 및 .error-message는 각각 %message-shared의 스타일을 상속하고 자체 배경색을 추가합니다.

상속에 관한 참고 사항

선택기 순서: 상속은 스타일 우선순위에 영향을 줄 수 있는 긴 선택기 목록을 생성할 수 있습니다. 불필요한 우선순위 문제를 방지하려면 @extend를 사용할 때 선택기의 순서와 위치가 올바른지 확인하세요.
제한사항: 상속된 선택자는 상속된 선택자 뒤에 나타나야 합니다. 즉, SCSS 파일에 선택기를 정의하고 @extend를 사용하여 후속 코드에서 해당 스타일을 상속하는 경우 이 상속은 정의된 후에만 적용됩니다.
자리 표시자 선택자 vs 클래스 선택자: %로 시작하는 자리 표시자 선택자는 컴파일 후 중복 선택자를 생성하지 않기 때문에 일반적으로 직접 클래스 선택자보다 상속 대상이 더 좋습니다. 반면에 클래스 선택기는 사용되는 모든 곳에서 중복된 스타일을 생성하여 파일 크기와 복잡성을 증가시킵니다.

애플리케이션 시나리오

상속은 버튼 구성 요소, 메시지 상자 등과 같은 공통 특성을 가진 선택기에 특히 적합합니다. 상속을 통해 코드를 깔끔하고 유지 관리 가능하게 유지하면서 다양한 시나리오에서 동일한 스타일 규칙을 재사용할 수 있습니다.

요약하자면, SCSS의 상속은 스타일 중복을 피하고 코드의 모듈성과 명확성을 유지하는 데 도움이 되는 강력한 도구입니다. 그러나 이를 사용할 때는 선택기의 순서와 위치, 합리적인 수준에 주의를 기울여야 합니다. 효과를 극대화하려면 자리 표시자를 사용하세요.

자리표시자%

자리 표시자 %는 상속될 수 있지만 실제 CSS 출력을 생성하지 않는 스타일 규칙을 정의하는 데 자주 사용되는 SCSS의 특수 선택기입니다. 구체적으로:

자리 표시자 정의


%placeholder-selector {
  // 样式规则
}

위의 예에서 %placeholder-selector는 %로 시작하는 자리 표시자 선택기입니다. 스타일 규칙 세트를 정의하지만 해당 선택기 이름은 컴파일된 CSS에 표시되지 않습니다.

상속 자리표시자


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

@extend 키워드를 사용하면 .some-class가 %placeholder-selector의 스타일을 상속받을 수 있습니다. 이는 .some-class가 %placeholder-selector에 정의된 모든 스타일 규칙을 적용하고 해당 CSS 출력을 생성한다는 것을 의미합니다.

장점 및 적용 가능한 시나리오

중복 감소: 자리 표시자 선택기를 사용하면 공통 스타일 규칙 세트를 정의하고 필요할 때 상속을 통해 재사용하여 코드 중복을 피할 수 있습니다.
모듈성: 자리 표시자 선택기는 특히 대규모 프로젝트에서 코드 모듈성과 유지 관리 가능성에 기여하고 스타일시트의 구조적 명확성을 향상시킬 수 있습니다.
중복 방지: 클래스 선택기를 사용하는 것과 비교하여 자리 표시자 선택기는 중복 선택기를 생성하지 않으므로 CSS 파일 크기가 줄어듭니다.

지침

순서 및 위치: @extend를 사용하여 자리 표시자 선택기를 상속하는 경우 상속된 자리 표시자 선택자는 해당 선택기를 사용하기 전에 정의해야 합니다. 그렇지 않으면 예기치 않은 스타일 계층 구조 문제가 발생할 수 있습니다.
혼합: 플레이스홀더 선택기와 일반 클래스 선택기를 결합할 수 있지만 예상치 못한 CSS 출력을 방지하려면 신중하게 처리해야 합니다.

요약하자면, 자리 표시자 선택기%는 개발자가 스타일 시트의 재사용성과 유지 관리성을 향상시키는 동시에 불필요한 CSS 중복성을 줄이는 데 도움이 되는 SCSS의 강력한 도구입니다.

믹스 @mixin

믹스인은 스타일 규칙 세트를 재사용 가능한 코드 블록에 캡슐화한 다음 필요할 때마다 참조할 수 있도록 하는 SCSS의 또 다른 매우 강력한 기능입니다. 플레이스홀더 선택기 %와 달리 믹스인은 CSS 출력을 직접 생성할 수 있으므로 동일한 스타일을 여러 곳에서 사용해야 하는 상황에 적합합니다.

믹스 정의


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

위의 예에서 @mixin 키워드는 여러 인수(필요한 경우)를 허용할 수 있는 mixin-name이라는 믹스인을 정의하고 그 안에 스타일 규칙 세트를 정의합니다.

통화 믹스


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

선택기에서 믹스인을 호출하고 매개변수를 전달하려면 @include 키워드를 사용하세요. 이런 식으로 .some-class는 믹스인에 정의된 스타일 규칙을 적용하고 전달된 매개변수 값을 해당 매개변수 변수에 적용합니다.

예


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

장점 및 적용 가능한 시나리오

유연성: 혼합을 사용하면 매개변수를 전달할 수 있고 필요에 따라 다양한 스타일 출력을 동적으로 생성할 수 있어 스타일을 더욱 유연하고 사용자 정의할 수 있습니다.
가독성: 일반적으로 사용되는 스타일 규칙을 믹스인에 캡슐화하면 코드의 가독성과 유지 관리성이 향상될 수 있습니다. 특히 여러 위치에서 동일한 스타일이 필요한 경우 더욱 그렇습니다.
재사용성: 스타일을 반복적으로 정의하지 않고 코드 양을 줄이기 위해 동일한 혼합을 다양한 선택기 및 파일에서 여러 번 호출할 수 있습니다.

지침

이름 충돌: 예상치 못한 스타일 재정의 또는 오류를 방지하려면 믹스인이 기존 CSS 클래스 이름이나 다른 믹스인과 충돌하지 않는지 확인하세요.
매개변수 전달: 믹스인을 호출할 때 전달된 매개변수 유형과 순서가 믹스인 정의 요구사항과 일치하는지 확인하여 컴파일 오류나 예상치 못한 동작을 방지하세요.
성능 영향: 믹스인을 광범위하게 사용하면 결과 CSS 파일의 크기가 증가할 수 있으므로 성능 영향에 주의하세요.

요약하자면, mix @mixin은 SCSS에서 스타일 규칙을 캡슐화하고 재사용하기 위한 강력한 도구로 CSS의 유지 관리성과 유연성을 크게 향상시킬 수 있으며 복잡하고 반복되는 다양한 스타일 요구 사항에 적합합니다.

SCSS는 조건문을 사용합니다.

SCSS에서 조건문을 사용하면 특정 조건에 따라 CSS 스타일을 동적으로 생성할 수 있습니다. SCSS의 조건문은 @if, @else if 및 @else를 포함한 다른 프로그래밍 언어의 조건문과 유사합니다.

@if 문

@if 문을 사용하면 조건에 따라 스타일을 생성할 수 있습니다. 구문은 다음과 같습니다.


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

위의 예에서 $use-rounded-corners 변수의 값이 true이면 border-radius: 4px;를 포함하여 .button 클래스의 스타일이 생성됩니다. 조건이 false이면 스타일의 이 부분이 생성되지 않습니다.

@else 및 @else if 문

@if 외에도 @else if 및 @else를 사용하여 조건부 분기를 더 추가할 수도 있습니다.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

이 예에서는 $button-size 변수의 값에 따라 .button 클래스에 적용할 패딩 값을 다르게 선택했습니다. 일치하는 조건이 없으면 @else의 코드 블록이 실행됩니다.

조건문 중첩

더 복잡한 논리를 처리하기 위해 조건문을 중첩할 수도 있습니다.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

이 예에서는 $button-style 및 $button-size 값에 따라 적용할 다양한 스타일을 선택했습니다. 이 중첩된 접근 방식을 사용하면 여러 조건을 기반으로 복잡한 스타일 규칙을 생성할 수 있습니다.

결론적으로

조건문을 사용하면 SCSS에서 보다 유연하고 동적인 스타일 정의를 달성하고 다양한 조건에 따라 다양한 CSS 규칙을 생성할 수 있으므로 스타일 시트의 유지 관리성과 확장성이 향상됩니다.

SCSS의 세 가지 유형의 루프

SCSS에는 반복되는 CSS 규칙을 생성하는 데 사용할 수 있는 세 가지 주요 반복 구문인 @for, @each 및 @while이 있습니다.

@for 루프

@for 루프는 특정 단계와 조건에 따라 스타일을 반복적으로 생성하는 데 사용됩니다.

기본 문법：


@for $i from <start> through <end> {
  // 循环体
}

~에서<start> ~을 통해<end> : 루프의 시작 값과 종료 값(종료 값 포함)을 지정합니다.
$i 변수는 루프 본문에서 현재 루프의 인덱스 값을 나타내는 데 사용될 수 있습니다.

예：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

위의 예에서는 너비가 각각 100px, 200px 및 300px로 설정된 세 가지 클래스 .item-1, .item-2 및 .item-3이 생성되었습니다.

@각 루프

@each 루프는 목록 또는 지도 유형 데이터를 탐색하고 각 요소에 대한 스타일을 생성하는 데 사용됩니다.

기본 문법：


@each $var in <list or map> {
  // 循环体
}

$var: 현재 루프의 변수를 나타냅니다.
<list or map>: 목록(예: $list: item1, item2, item3;) 또는 맵(키-값 쌍)일 수 있습니다.

예：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

이 예에서는 .text-red, .text-green 및 .text-blue라는 세 가지 클래스가 생성되고 해당 텍스트 색상이 해당 색상 값으로 설정됩니다.

@while 루프

@while 루프는 조건이 충족되지 않을 때까지 조건에 따라 스타일을 반복적으로 생성합니다.

기본 문법：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i: 루프 카운터 또는 조건 변수.
모든 SCSS 코드는 루프 본문에서 실행될 수 있습니다. 일반적으로 무한 루프를 방지하려면 루프 본문 끝에서 조건 변수를 업데이트해야 합니다.

예：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

이 코드는 .item-1, .item-2 및 .item-3의 세 가지 클래스를 생성하고 너비를 각각 100px, 200px 및 300px로 설정합니다.

요약하다

세 가지 SCSS 루프 구조 @for, @each 및 @while은 인덱스, 탐색 목록 또는 지도 유형 데이터를 기준으로 루프를 수행하고 각각 조건부 루프를 기반으로 스타일을 생성하는 데 사용됩니다. 이러한 루프 구조는 SCSS를 더욱 강력하고 유연하게 만들어 필요에 따라 복잡한 CSS 규칙을 생성할 수 있게 해줍니다.

사용자 정의 기능 및 사용법

SCSS에서는 매개변수를 허용하고 처리된 값을 반환하는 사용자 정의 함수를 사용하여 스타일 시트를 향상할 수 있습니다.

사용자 정의 함수 정의

SCSS에서는 @function 키워드를 사용하여 매개변수와 반환값을 가질 수 있는 함수를 정의합니다. 예를 들어 요소의 전체 상자 모델 너비를 계산하는 함수를 정의합니다.


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

위의 예에서:

총 너비는 함수의 이름입니다.
이 함수는 $padding, $border, $margin, $content-width의 네 가지 매개변수를 허용합니다.
@return 문은 계산된 값을 반환하는 데 사용됩니다.

맞춤 기능 사용

함수가 정의되면 스타일에서 이를 사용하여 필요한 값을 계산하고 생성할 수 있습니다. 예를 들어:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

이 예에서는 총 너비 함수가 10px, 1px, 5px 및 100px 매개변수를 사용하여 호출됩니다. 함수에서 반환된 결과(116px)는 .element의 width 속성에 적용됩니다.

지침

기능은 모든 SCSS 파일에 포함될 수 있으며 다른 스타일 규칙처럼 구성하고 가져올 수 있습니다.
제어문(@if, @for, @each, @while 등)과 내장 함수 등 SCSS의 모든 기능을 함수에서 사용할 수 있습니다.
함수의 매개변수는 숫자, 문자열, 색상 등을 포함한 모든 SCSS 데이터 유형이 될 수 있습니다.

숙제

SCSS를 사용하여 페이지의 흑백 테마 전환

HTML로


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

에스씨에스


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}

제이에스(js)


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

기술나눔