CSS 속성 값을 SASS 혼합 매개변수로 사용하려면 어떻게 해야 합니까?

CSS 속성 값을 SASS 믹스인 매개변수로 사용

범용 여백/패딩 믹스인을 만들려고 할 때 설정과 관련된 문제가 발생했습니다. CSS 속성을 믹스인 값으로 사용합니다. 이 글은 SASS 믹스인에서 문자열 보간법의 사용을 탐구하여 이 문제를 해결하는 것을 목표로 합니다.

CSS 속성 값을 믹스인 값으로 설정하려면 문자열 보간법을 활용해야 합니다. 이 기술을 사용하면 믹스인 정의 내에 변수를 속성 이름으로 포함할 수 있습니다.

다음은 문자열 보간을 통합하는 코드의 업데이트된 버전입니다.

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

mixin 정의를 사용하면 CSS 속성 이름을 동적으로 설정할 수 있습니다.

참고:

• *="_m"과 같은 속성 선택기는 다음을 포함하는 요소에 적용될 수도 있습니다. 클래스 이름에는 "_mid"가 있습니다. 이는 명명 전략을 다시 생각하게 만들 수도 있습니다.
• 문자열 보간은 믹스인 정의 내에서 변수를 속성 이름으로 사용하는 데 중요합니다.

위 내용은 CSS 속성 값을 SASS 혼합 매개변수로 사용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!