SASS를 사용하여 조건부로 CSS 규칙을 무시할 수 있습니까?

display 속성을 inline-block으로 설정하는 믹스 인을 아직 정의하지 않은 경우 block으로 정의하고 싶습니다.SASS를 사용하여 조건부로 CSS 규칙을 무시할 수 있습니까?

여기에 가상의 예입니다 (나는 unless 부분이 유효 SASS하지 않습니다 실현, 즉 I 대해 부탁 해요 기능) :

@mixin padded 
    padding: $default-padding-y $default-padding-x 
    display: inline-block unless(block)

이 가능합니까?

출처

2013-08-14 Dan Tao

자연스러운 블록 수준의 요소를이 동작 자체에 대한 오버라이드없이 남겨 두어야한다고 가정하고 싶습니다. – Wrikken

@Wrikken : 나도 모르겠다. 마치 트레이드 오프와 관련이 있고 문서화 된 결정 중 하나 일뿐입니다. 즉, SASS 컴파일러가 미리 * 다른 * 스타일 시트가로드되었는지는 알 수 없기 때문에 현재 스타일 시트에만 기반하거나 일부 "현명한"추측을 할 수 있습니다 (예 : div, p, h1 등). 아마 * 블록). –

예, 여기서 문제는 실제로 문서의 실제 지식이 필요하다는 것입니다. TAG @ 패딩을 다시 설정하기 위해 전체 재설정 목록을 끝내기를 원하지 않는 한, 아마도 멀리있는 다리 일 것입니다. 믹스 인을 추가 할 때 이미 이것을 고려해야한다면 ...이 경우에는 한 개의 패딩 블록과 한 개의 패딩 된 인라인 (또는 무엇이든)이 가능한 중첩 믹스 인을 사용할 수 있다고 말하고 싶습니다. – Wrikken

다음은 내가 상황에 접근하는 방법입니다. CSS 속성의 순서가 중요하다는 사실을 이용하십시오. 따라서 믹스 인에서 디스플레이를 인라인 블록으로 정의하십시오. 요소에서 호출하십시오. 그런 다음 그 호출 아래에 디스플레이가 차단되도록 설정하여 믹스 인을 덮어 씁니다.

@mixin padded 
    padding: $default-padding-y $default-padding-x 
    display: inline-block 

.element 
    @include padded 
    display: block

이 때문에 나는 보통 믹스 인 (또는 확장)을 룰셋의 맨 위에서 호출합니다.

또는 인라인 블록 스타일을 동적으로 추가하려는 경우 JavaScript를 사용하여 요소의 표시 속성을 확인한 다음 이에 따라 새 클래스를 적용 할 수 있습니다. 이것은 Sass mixin이 필요하지 않습니다.

출처

2013-08-15 03:20:17 davidtheclark

SASS를 사용하여 조건부로 CSS 규칙을 무시할 수 있습니까?

답변

관련 문제