인라인 CSS 사용자 정의 특성을 사용하는 효율적인 무한 유틸리티 도우미 및 calc ()

최근에는 여러 패딩 및 마진 유틸리티 클래스를 출력하는 매우 기본적인 SASS 루프를 작성했습니다. 11 개의 간격 값이있는 Sass Map은 특별한 것이 없으며, 루프는 양쪽에 패딩과 여백을 만드는 데 사용됩니다. 우리가 볼 수 있듯이, 이것은 효과가 있지만 결국 상당한 양의 CS를 생산할 것입니다. CSS를 사용하여 속성을 사용자 정의하고 시스템을보다 간결하게 만들기 위해 리팩터링 할 것입니다.

원래 SASS 구현은 다음과 같습니다.

 <code>$space-stops: ( '0': 0, '1': 0.25rem, '2': 0.5rem, '3': 0.75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem, '7': 1.75rem, '8': 2rem, '9': 2.25rem, '10': 2.5rem, ); @each $key, $val in $space-stops { .p-#{$key} { padding: #{$val} !important; } .pt-#{$key} { padding-top: #{$val} !important; } .pr-#{$key} { padding-right: #{$val} !important; } .pb-#{$key} { padding-bottom: #{$val} !important; } .pl-#{$key} { padding-left: #{$val} !important; } .px-#{$key} { padding-right: #{$val} !important; padding-left: #{$val} !important; } .py-#{$key} { padding-top: #{$val} !important; padding-bottom: #{$val} !important; } .m-#{$key} { margin: #{$val} !important; } .mt-#{$key} { margin-top: #{$val} !important; } .mr-#{$key} { margin-right: #{$val} !important; } .mb-#{$key} { margin-bottom: #{$val} !important; } .ml-#{$key} { margin-left: #{$val} !important; } .mx-#{$key} { margin-right: #{$val} !important; margin-left: #{$val} !important; } .my-#{$key} { margin-top: #{$val} !important; margin-bottom: #{$val} !important; } }</code>

이 코드는 잘 작동하며 필요한 모든 유틸리티 클래스를 출력합니다. 그러나 빠르게 부풀어 질 수 있습니다. 제 경우에는 압축이없고 압축 후 1KB 미만의 경우 약 8.6KB입니다. (Brotli는 542 바이트이고 GZIP는 925 바이트입니다.)

그것들은 매우 반복적이기 때문에 압축은 훌륭하게 작동하지만 여전히 이러한 클래스가 중복된다는 느낌을 제거 할 수는 없습니다. 또한, 나는이 유형의 도우미 클래스에 대해 상당히 전형적인 소형/중간/큰 중단 점을 만들지도 않았습니다.

다음은 중소/중간/대형 클래스를 추가 한 후 반응 형 버전의 인공 예입니다. 이전에 정의 된 $ Space-Stops 맵을 재사용하고 중복 코드를 Mixin에 넣을 것입니다.

 <code>@mixin finite-spacing-utils($bp: '') { @each $key, $val in $space-stops { .p-#{$key}#{$bp} { padding: #{$val} !important; } .pt-#{$key}#{$bp} { padding-top: #{$val} !important; } .pr-#{$key}#{$bp} { padding-right: #{$val} !important; } .pb-#{$key}#{$bp} { padding-bottom: #{$val} !important; } .pl-#{$key}#{$bp} { padding-left: #{$val} !important; } .px-#{$key}#{$bp} { padding-right: #{$val} !important; padding-left: #{$val} !important; } .py-#{$key}#{$bp} { padding-top: #{$val} !important; padding-bottom: #{$val} !important; } .m-#{$key}#{$bp} { margin: #{$val} !important; } .mt-#{$key}#{$bp} { margin-top: #{$val} !important; } .mr-#{$key}#{$bp} { margin-right: #{$val} !important; } .mb-#{$key}#{$bp} { margin-bottom: #{$val} !important; } .ml-#{$key}#{$bp} { margin-left: #{$val} !important; } .mx-#{$key}#{$bp} { margin-right: #{$val} !important; margin-left: #{$val} !important; } .my-#{$key}#{$bp} { margin-top: #{$val} !important; margin-bottom: #{$val} !important; } } } @include finite-spacing-utils; @media (min-width: 544px) { @include finite-spacing-utils($bp: '_sm'); } @media (min-width: 768px) { @include finite-spacing-utils($bp: '_md'); } @media (min-width: 1024px) { @include finite-spacing-utils($bp: '_lg'); }</code>

압축되지 않은 경우 약 41.7KB입니다 (Brotli는 약 1KB이고 GZIP는 약 3KB입니다). 여전히 잘 압축되지만 조금 우스운 일입니다.

data-* 속성은 [attr() 함수를 사용하여 CSS에서 참조 할 수 있다는 것을 알고 있으므로 calc() 및 attr() 함께 사용할 수 있는지 궁금합니다. data-m="1" 또는 data-m="1@md" 를 통해 data-* 으로 계산 된 간격 유틸리티 헬퍼를 만들고 margin: calc(attr(data-m) * 0.25rem) ). 이것은 매우 강력 할 수 있습니다.

그러나 스토리의 끝은 다음과 같습니다. content 속성을 제외한 모든 속성과 함께 attr() 사용할 수 없습니다. 너무 나쁘다. 그러나 attr() 및 calc() 정보를 검색하는 동안 Simon Rigét의 Stack Overflow 에서이 흥미로운 의견을 찾았습니다. 이는 인라인 스타일 속성으로 CSS 변수를 직접 설정하는 것을 제안합니다. 아!

따라서 다음을 수행 할 수 있습니다.<div style="--p: 4;"> , 그런 다음 CSS에서 :<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;:root { --p: 0; } [style*='--p:'] { padding: calc(0.25rem * var(--p)) !important; }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> <code>style="--p: 4;" padding: 1rem !important;

… 이제 무한한 확장 가능한 간격 유틸리티 클래스 몬스터 어시스턴트가 있습니다.

CSS에서 보이는 것은 다음과 같습니다.

 <code>:root { --p: 0; --pt: 0; --pr: 0; --pb: 0; --pl: 0; --px: 0; --py: 0; --m: 0; --mt: 0; --mr: 0; --mb: 0; --ml: 0; --mx: 0; --my: 0; } [style*='--p:'] { padding: calc(0.25rem * var(--p)) !important; } [style*='--pt:'] { padding-top: calc(0.25rem * var(--pt)) !important; } [style*='--pr:'] { padding-right: calc(0.25rem * var(--pr)) !important; } [style*='--pb:'] { padding-bottom: calc(0.25rem * var(--pb)) !important; } [style*='--pl:'] { padding-left: calc(0.25rem * var(--pl)) !important; } [style*='--px:'] { padding-right: calc(0.25rem * var(--px)) !important; padding-left: calc(0.25rem * var(--px)) !important; } [style*='--py:'] { padding-top: calc(0.25rem * var(--py)) !important; padding-bottom: calc(0.25rem * var(--py)) !important; } [style*='--m:'] { margin: calc(0.25rem * var(--m)) !important; } [style*='--mt:'] { margin-top: calc(0.25rem * var(--mt)) !important; } [style*='--mr:'] { margin-right: calc(0.25rem * var(--mr)) !important; } [style*='--mb:'] { margin-bottom: calc(0.25rem * var(--mb)) !important; } [style*='--ml:'] { margin-left: calc(0.25rem * var(--ml)) !important; } [style*='--mx:'] { margin-right: calc(0.25rem * var(--mx)) !important; margin-left: calc(0.25rem * var(--mx)) !important; } [style*='--my:'] { margin-top: calc(0.25rem * var(--my)) !important; margin-bottom: calc(0.25rem * var(--my)) !important; }</code>

이것은 위의 첫 번째 Sass 루프와 매우 유사하지만 11 개의 루프는 없지만 무한합니다. 약 1.4KB, 비 압축, Brotli는 226 바이트이고 GZIP는 284 바이트입니다.

이것을 중단 점으로 확장하려면 불행한 메시지는 "@"문자를 CSS 변수 이름에 넣을 수 없다는 것입니다 (이상하게도 이모티콘 및 기타 UTF-8 문자를 사용할 수 있음). 따라서 p_sm 또는 sm_p와 같은 변수 이름을 설정할 수 있습니다. 이 모든 것을 처리하기 위해 추가 CSS 변수와 일부 미디어 쿼리를 추가해야하지만 루프 용 SASS를 사용하여 생성 된 기존 CSS 클래스 이름처럼 기하 급수적으로 성장하지는 않습니다.

다음은 동등한 응답 버전입니다. 우리는 Sass Mixin을 다시 사용하여 중복을 줄입니다.

 <code>:root { --p: 0; --pt: 0; --pr: 0; --pb: 0; --pl: 0; --px: 0; --py: 0; --m: 0; --mt: 0; --mr: 0; --mb: 0; --ml: 0; --mx: 0; --my: 0; } @mixin infinite-spacing-utils($bp: '') { [style*='--p#{$bp}:'] { padding: calc(0.25rem * var(--p#{$bp})) !important; } [style*='--pt#{$bp}:'] { padding-top: calc(0.25rem * var(--pt#{$bp})) !important; } [style*='--pr#{$bp}:'] { padding-right: calc(0.25rem * var(--pr#{$bp})) !important; } [style*='--pb#{$bp}:'] { padding-bottom: calc(0.25rem * var(--pb#{$bp})) !important; } [style*='--pl#{$bp}:'] { padding-left: calc(0.25rem * var(--pl#{$bp})) !important; } [style*='--px#{$bp}:'] { padding-right: calc(0.25rem * var(--px#{$bp})) !important; padding-left: calc(0.25rem * var(--px)#{$bp}) !important; } [style*='--py#{$bp}:'] { padding-top: calc(0.25rem * var(--py#{$bp})) !important; padding-bottom: calc(0.25rem * var(--py#{$bp})) !important; } [style*='--m#{$bp}:'] { margin: calc(0.25rem * var(--m#{$bp})) !important; } [style*='--mt#{$bp}:'] { margin-top: calc(0.25rem * var(--mt#{$bp})) !important; } [style*='--mr#{$bp}:'] { margin-right: calc(0.25rem * var(--mr#{$bp})) !important; } [style*='--mb#{$bp}:'] { margin-bottom: calc(0.25rem * var(--mb#{$bp})) !important; } [style*='--ml#{$bp}:'] { margin-left: calc(0.25rem * var(--ml#{$bp})) !important; } [style*='--mx#{$bp}:'] { margin-right: calc(0.25rem * var(--mx#{$bp})) !important; margin-left: calc(0.25rem * var(--mx#{$bp})) !important; } [style*='--my#{$bp}:'] { margin-top: calc(0.25rem * var(--my#{$bp})) !important; margin-bottom: calc(0.25rem * var(--my#{$bp})) !important; } } @include infinite-spacing-utils; @media (min-width: 544px) { @include infinite-spacing-utils($bp: '_sm'); } @media (min-width: 768px) { @include infinite-spacing-utils($bp: '_md'); } @media (min-width: 1024px) { @include infinite-spacing-utils($bp: '_lg'); }</code>

약 6.1kb는 압축되지 않고, Brotli는 428 바이트이고 GZIP는 563 바이트입니다.

나는 글을 쓰는 것 같아요<div style="--px:2; --my:4;"> 이 HTML은 눈에 쾌적하고 또는 훌륭한 개발자 인체 공학을 즐겁게하고 있습니까? 그러나이 접근법은 CSS가 거의 필요하지 않거나 외부 CSS 파일이 전혀 필요하지 않은 경우 어떤 경우에는 가능합니까? 예, 물론 가능하다고 생각합니다. 인라인 스타일로 할당 된 CSS 변수가 누출되지 않는다는 것이 여기서 지적 할 가치가 있습니다. 그들은 현재 요소에서만 작용하며 글로벌 변수의 값을 변경하지 않습니다. 감사합니다! 내가 지금까지 찾은 한 가지 이상한 점은 DevTools (적어도 Chrome, Firefox 및 Safari에서)는 컴퓨팅 스타일 탭 에서이 기술을 사용하여 스타일을보고하지 않는다는 것입니다.<p> 또한 전통적인 패딩 및 마진 특성과 -top, -right, -bottom 및 -left를 사용했지만 패딩 블록 및 패딩 인라인과 같은 동등한 논리적 특성을 사용할 수 있습니다. 논리적 및 전통적인 특성을 선택적으로 혼합하고 일치시킴으로써 몇 바이트를 줄일 수도 있습니다. 이런 식으로, 나는 Brotli를 400 바이트로, GZIP를 521 바이트로 압축 할 수있었습니다.</p> <h3> 다른 사용 사례</h3> <p> 이것은 선형 증분 비율에 가장 적합한 것으로 보이지만 (패딩과 마진이 좋은 사용 사례 인 것인데) 그리드 시스템에서 폭과 높이 (열 및/또는 너비)에 효과가있을 수 있음을 알 수 있습니다. <strong>어쩌면</strong> 그것은 타이포그래피에 효과적이지만 (어쩌면 그렇지 않을 수도 있습니다).</p> <p> 파일 크기에 대해 매우 걱정하지만 여기에는 생각하지 않은 다른 용도가있을 수 있습니다. 어쩌면이 방법으로 코드를 작성 <strong>하지는</strong> 않지만 중요한 CSS 도구는이 메소드를 사용하도록 코드를 리팩터링 할 수 있습니다.</p> <h3> 더 깊이 파헤쳐</h3> <p> 더 깊이 파고 들으면 Ahmad Graded가 <code>calc() 인라인 스타일, 특히 아바타 크기의 CSS 변수 할당과 혼합하는 것을 발견했습니다. 2019 년 Smashing Magazine에 관한 Miriam Suzanne의 기사는 calc() 사용하지 않지만 인라인 스타일의 가변 할당을 사용하여 달성 할 수있는 놀라운 기능을 공유합니다.