찾다
웹 프론트엔드CSS 튜토리얼Sass에서 책임감있게 @error를 사용합니다

Using @error responsibly in Sass 키 포인트

SASS의

지침은 문제가 발생할 때 저자 입력을 제어하고 오류를 던지는 강력한 도구이며, 이는 컴파일러 고장을 허용하는 것보다 더 효과적입니다.
    를 지원하지 않는 이전 버전의 SASS의 경우 대신
  • 지시문을 사용할 수 있습니다. 오류가 발생하면 컴파일러가 여전히 충돌하는지 확인하기 위해 하이브리드 매크로를 생성하여 경고 후 컴파일 오류를 트리거 할 수 있습니다. @error
  • 기능은
  • 가 지원되는지 확인하는 데 사용될 수 있습니다. 지원되지 않으면 @error 지시문을 사용한 다음 문이없는 함수를 사용하여 컴파일러를 충돌시킵니다. @warn 기능은 다른 기능 내에서 사용할 수 있으며
  • 하이브리드 매크로는 다른 곳에서 사용될 수 있으므로 책임감있게 오류를 던질 수 있습니다. 이를 통해 다양한 버전의 SASS에 대한 효율적인 오류 관리가 가능합니다.
  • feature-exists('at-error') Ruby Sass 3.4 및 Libsass 3.1 이후 지침을 사용할 수 있습니다. 이 지침은 @error와 유사하며 실행 프로세스를 종료하고 현재 출력 스트림 (아마도 콘솔)에 사용자 정의 메시지를 표시하도록 설계되었습니다. @warn 말할 필요도없이,이 기능은 저자의 입력을 제어하고 문제가 발생할 때 오류를 던지기 위해 SASS 논리를 포함하는 기능과 혼합 매크로를 구축 할 때 매우 유용합니다. 이것이 컴파일러가 실패하게하는 것보다 낫다는 것을 인정해야합니까? @return <.> 모든 것이 좋습니다. SASS 3.3을 제외하고는 여전히 널리 사용됩니다. Sass 3.2는 일부 장소에서도 사용됩니다. 특히 대규모 프로젝트에서 SASS를 업데이트하는 것은 쉽지 않습니다. 때로는 제대로 작동하는 것을 업데이트하기 위해 시간과 예산을 소비하는 것이 불가능합니다. 이러한 이전 버전의 경우
  • 는 의미가 없으며 사용자 정의
  • 로 간주되며, 이는 전진 호환성 이유로 SASS에서 완전히 허용됩니다. log 글쎄, 이것은 우리가 최신 SASS 엔진 만 지원하기로 결정하지 않으면 log를 사용할 수 없다는 것을 의미합니까? 글쎄, 당신은 방법이 있다고 상상할 수 있습니다.
아이디어는 무엇입니까?

아이디어는 간단합니다. @error를 지원하면 사용하겠습니다. 그렇지 않으면 를 사용합니다. @warn는 컴파일러가 계속 실행되는 것을 막지 않지만 경고 후 컴파일 오류를 트리거하여 컴파일러가 완전히 충돌하도록 할 수 있습니다. 즐기십시오, 당신은 종종 끊임없는 것을 파괴 할 필요가 없습니다.

이것은 혼합 매크로로 전체 내용을 래핑해야한다는 것을 의미합니다. 우리는 이것을 다음과 같이 사용할 수 있습니다 :

당신은 인정해야합니다. 멋지다, 그렇지 않습니까? 좋아, 충분히 자랑스러워.

빌드 로거 @error
따라서 우리의 하이브리드 매크로는 래퍼 일 뿐이므로 또는 와 정확히 동일한 방식으로 작동합니다. 따라서 하나의 매개 변수 만 있으면됩니다. at-directive

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
당신은 우리가 어떻게

지원을 확인할 것인지 스스로에게 물어볼 수 있습니다. 처음에, 나는 버전 스니핑과 관련된 서투른 솔루션을 생각해 냈지만 그것은 끔찍했습니다. 또한 Sass Core 디자이너가 모든 것을 고려하여 @error 열쇠를 feature-exists(...) 함수에 소개 한 똑똑한 사람들이라는 사실을 완전히 간과하여 함수가 지원되는지 여부를 반환합니다. at-error

패치 설명 리더 인 경우 함수가 SASS 3.3에만 소개된다는 것을 알고있을 것입니다. Sass 3.2를 다루지 않습니다! 좋아, 그것의 일부는 사실이다. SASS 3.2에서
<code>@mixin log($message) { ... }</code>

진실 feature-exists(...) 문자열로 평가됩니다. feature-exists('at-error')를 추가함으로써 SASS 3.2 가이 조건을 입력하지 않고 버전으로 이동해야합니다. 지금까지 모든 것이 잘되었습니다. 경고 후 컴파일 오류를 트리거해야하지만. 우리는 이것을 어떻게 할 것인가? Sass를 충돌시키는 방법에는 여러 가지가 있지만 이상적으로는 인식 할 수있는 무언가를 얻고 싶습니다. 에릭 수잔 (Eric Suzanne)은 전에 아이디어를 내놓았다. 이 모드는 종종 noop , 즉 == true 작동 없음 라고합니다. 기본적으로 이것은 아무것도하지 않는 빈 함수입니다. Sass의 작동 방식으로 인해 컴파일러가 충돌합니다. 이것은 아주 좋습니다! @warn

이 기능을 마지막 지점이라고 어떻게 부를까요? SASS 기능은 특정 위치에서만 호출 할 수 있습니다. 우리는 몇 가지 방법을 사용할 수 있습니다 :

@return 더미 변수 예를 들어 : 가상 속성 : 예를 들어 : 공허한 조건 : 예를 들어 : 이 기능을 호출하는 몇 가지 다른 방법을 찾을 수 있습니다.

SASS 라이브러리와 프레임 워크에서 일반적인 변수이기 때문에
<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
  }
}</code>
를 사용하지 말라고 경고하고 싶습니다. SASS 3.3에서는 문제가되지 않을 수 있지만 SASS 3.2에서는 글로벌 변수를 무시할 수 있으며, 경우에 따라 추적하기 어려운 문제가 발생할 수 있습니다.

noop

와 함께 사용할 때 의미가 있으므로 Null 조건을 사용해 봅시다. Noop 기능을위한 Noop 조건.
  • $_: noop() 좋아요! 이전 코드로 테스트 해 봅시다 :
  • 다음은 libsass입니다 : crash: noop() 다음은 SASS 3.4 : 입니다
  • 다음은 SASS 3.2와 3.3입니다 (터미널 에서이 버전을 쉽게 테스트 할 수 없으므로 출력은 대담한 추측입니다) :
  • @if noop() {} 이것은 작동하는 것 같습니다! 모든 엔진, 이전 엔진조차도 컴파일러가 종료됩니다.
  • 를 지원하는 엔진에서는 즉시 오류 메시지를 받게됩니다. 지원되지 않는 엔진에서는 메시지를 경고로받은 다음 Noop 기능으로 인해 컴파일을 충돌시킵니다.
  • 함수 내부에 로그를 녹음 할 수 있습니다 현재 설정의 유일한 문제는 하이브리드 매크로를 구축했기 때문에 기능 내부에서 오류를 던질 수 없다는 것입니다. 혼합 매크로는 함수 내에 포함될 수 없습니다 (SASS 기능과 관련이없는 CSS 코드를 인쇄 할 수 있기 때문에)!

    혼합 매크로를 먼저 함수로 변환하면 어떻게됩니까? 이 시점에서 이상한 일이 일어났습니다.

    는 Sass 3.3-에서 유효한 기능으로 인식되지 않으므로 비참하게 실패합니다.

    기능에는 변수 선언 및 제어 지침 만 포함 할 수 있습니다. @error at-directive <.> 공정하다. 이것은 우리가 더 이상 누프 해킹이 필요하지 않다는 것을 의미합니다. 지원되지 않는 엔진은 우리가 강제로 강제하지 않고 충돌하기 때문입니다. 비록 우리는 메시지가 충돌하기 전에 저자의 콘솔에 인쇄되도록 프로세스 위에

    지시를 넣어야합니다.

    그런 다음 더러운 널 조건과 더미 가변 해킹보다 더 친숙한 API를 얻기 위해 하이브리드 매크로를 제공 할 수 있습니다.

    최종 생각 @warn

    그게 다야! 이제 함수 내부의 함수 (제한으로 인해)를 사용할 수 있으며 다른 곳에서는 하이브리드 매크로를 사용하여 책임감있게 오류를 던질 수 있습니다. 매우 깔끔합니다!
    <code>@include log('哎呀,你刚才的操作出了问题!');</code>
    여기에 전체 코드는 다음과 같습니다. (여기에 전체 코드 예제가 제공되어야하지만 코드를 직접 실행할 수 없기 때문에 실행 가능한 코드 스 니펫을 제공 할 수는 없습니다)

    . Sassmeister 에서이 요점을 시도하십시오. (Sassmeister 링크가 여기에 제공되어야합니다) SASS의 고급 로깅 ​​시스템의 경우 "Build Logger Hybrid Macros"를 읽는 것이 좋습니다. 이전 버전의 SASS를 지원하는 것과 관련하여 여러 버전의 SASS를 지원하는시기 및 방법을 확인하는 것이 좋습니다.

    (SASS에서 책임있는 오류 사용에 대한 FAQ 섹션은 여기에 포함되어야하지만 공간 제한으로 인해 생략했습니다.)
    <code>@mixin log($message) { ... }</code>

위 내용은 Sass에서 책임감있게 @error를 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

이미지 맵 재 방문이미지 맵 재 방문May 07, 2025 am 09:40 AM

빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.

DEVS 상태 : 모든 개발자를위한 설문 조사DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AM

Devs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다. 

CSS 그리드는 무엇입니까?CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

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

mPDF

mPDF

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

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)