찾다
웹 프론트엔드CSS 튜토리얼CSS 속성을 SASS 혼합 값으로 사용하는 방법: 문자열 보간 가이드

How to Use CSS Properties as SASS Mixin Values: A Guide to String Interpolation

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 응용 프로그램에 CSS를 포함시키는 많은 방법JavaScript 응용 프로그램에 CSS를 포함시키는 많은 방법Apr 19, 2025 am 10:08 AM

프론트 엔드 개발의 땅에서 엄청나게 논란의 여지가있는 주제에 오신 것을 환영합니다! 이 글을 읽는 대다수가 당신의 박람회를 만났을 것입니다.

Netlify Analytics 소개Netlify Analytics 소개Apr 19, 2025 am 10:07 AM

당신은 사이드 프로젝트에서 잠시 일합니다. 당신은 그것을 꽤 멋지다고 생각합니다! 당신은 그것을 세상으로 풀기로 결정했습니다. 그리고… 잘 어울립니다. 아니면 잘되지 않습니다. 기다리다,

5 성급 등급을위한 5 가지 방법5 성급 등급을위한 5 가지 방법Apr 19, 2025 am 10:04 AM

좋아요와 소셜 통계의 세계에서 리뷰는 피드백을 남기는 데 매우 중요한 방법입니다. 사용자는 종종 전에 다른 사람의 의견을 알고 싶어합니다.

CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?Apr 19, 2025 am 09:56 AM

Peter-Paul 은이 질문을 게시했습니다.

클립 경로로 애니메이션클립 경로로 애니메이션Apr 19, 2025 am 09:52 AM

Clip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다

Gatsby와 함께 GraphQL 놀이터 사용Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM

나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로

유형 또는 테스트 : 왜 둘 다 안됩니까?유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM

때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"

git의 그래픽 사용자 인터페이스git의 그래픽 사용자 인터페이스Apr 19, 2025 am 09:46 AM

Lemme는 요즘 Git Guis의 주요 플레이어처럼 보이는 것을 마무리합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기