CSS 속성을 SASS 믹스인 값으로 어떻게 사용할 수 있나요?

SASS 믹스인 값으로서의 CSS 속성

SASS에서 범용 여백/패딩 믹스인을 생성할 때 CSS 속성을 다음과 같이 설정하는 것에 대한 우려가 발생할 수 있습니다. 값을 혼합합니다. 제공된 코드 조각은 이 작업을 수행하기 위한 시도입니다. 그러나 완전히 작동하려면 특정 수정이 필요합니다.

해결책:

이 문제를 해결하는 열쇠는 문자열 보간에 있습니다. #{$var} 표기법을 활용하면 변수를 속성 이름으로 사용할 수 있습니다.

수정 코드:

[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);
  }
}

DEMO:

이 수정을 통해 CSS 속성(여백 또는 패딩)이 mixin의 매개변수에 따라 동적으로 설정될 수 있습니다.

참고:

속성 선택기 ...*="_m"인 경우, 이 선택기는 "_mid"가 있는 요소를 포함하여 클래스 이름에 "_m"이 포함된 모든 요소에 적용된다는 점을 고려해 볼 가치가 있습니다. 따라서 원하는 특이성을 달성하려면 약간의 재평가와 조정이 필요할 수 있습니다.

위 내용은 CSS 속성을 SASS 믹스인 값으로 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!