CSS 속성을 SASS 혼합 값으로 사용하는 방법: 문자열 보간 가이드

CSS 속성을 SASS 믹스인 값으로 사용

다용도의 여백/패딩 믹스인을 만들려고 할 때 SASS에서 문제가 발생했습니다. 설명하신 문제를 자세히 살펴보고 해결책을 함께 찾아보세요.

믹스인에서 CSS 속성 설정

귀하의 코드는 SASS 믹스인 값 내에서 CSS 속성(여백 및 패딩)을 설정하려고 시도합니다. 그러나 중요한 문제가 있습니다. CSS 속성을 믹스인 값으로 직접 사용할 수 없습니다. 대신 "문자열 보간"이라는 기술을 사용하여 변수를 속성 이름으로 포함해야 합니다.

문자열 보간 사용

문자열 보간을 사용하면 #{$ 변수} 구문. 이는 믹스인 내의 변수를 기반으로 CSS 속성을 동적으로 설정하는 데 도움이 됩니다.

문자열 보간법을 활용하도록 코드를 수정하는 방법은 다음과 같습니다.

<code class="sass">[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);
  }
}</code>

속성 선택기에 대한 참고 사항

사용 중인 속성 선택기(*="_m")도 클래스 이름에 "_mid"가 있는 요소와 일치한다는 점에 유의하는 것이 중요합니다. 이는 의도한 동작이 아닐 수도 있으므로 이에 따라 속성 선택기를 수정하는 것이 좋습니다.

위 내용은 CSS 속성을 SASS 혼합 값으로 사용하는 방법: 문자열 보간 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!