SASS : Classess 대 변수 확장

Question

최근에 Sass를 사용할 때 클래스를 변수로 대체했습니다. 예를 들어

는 :

변수 클래스 -Extending

을

$small-font: 12px 

p { 
font-size: $small-font 
} 

- 특수

.small-font { 
font-size:12px; 
} 

p { 
@extend .small-font; 
} 

클래스를 확장하는 이점이 용이하게 할 수 있다는 것이다 코드 응답. 예를 들어, 미디어 쿼리에 .small-font을 감쌀 수 있는데, 이는 변수로는 불가능합니다.

제 질문은 이런 식으로 확장 클래스를 사용하는 데 어떤 단점이 있습니까? 출력이 모든 클래스를 하나로 묶어서 (디버깅을 더 복잡하게 만들 수 있음) 알고 있지만 다른 잠재적 인 문제가 있습니까?

Answer 1

몇 가지 문제가 있습니다. 하나는 단순히 미친 미끄러운 슬로프 성격입니다. 이것은 유지 보수 문제로 당신을 물게 돌아올 것입니다. 클래스 당 속성은 코드 조직 체계로 이해되지 않습니다. 그것은 당신이 멀리 떨어져 있음을 의미하지 않습니다. @extend는 이런 이유로, 이유 안에서 굉장합니다.

이유가 핵심입니다. 그룹화는 그룹화로 이해해야합니다. html 스타일의 내용 의미 체계는 @extends와는 중요하지 않지만 의미 론적 조직감이 있어야합니다. 나는 이것을 위해 "시각적 의미"라는 용어가 떠오르는 것을 보았습니다. 귀하의 이름은 그 효과를 설명하는 것 이상으로 나아가 야하고 그 대신 시각적 인 이유를 설명해야합니다. 노란색이 아니라 % 강조 텍스트. % 빨간색은 아니지만 % 경고. 무엇이 아니라 왜.

다른 문제는 캐스케이드입니다. 출력 코드의 순서는 캐스케이드 (CSS의 필수 부분)에 영향을 미치기 때문에 매우 중요합니다. 이 방법을 사용하면 코드 순서를 제어하지 않기 때문에 정기적으로 캐스케이드에 맞서 싸울 수 있습니다. @extend는 넓고 단순한 기본 그룹핑에 적합하지만, 계단식 재정의 (cascade overrides)에는 좋지 않습니다.