SASS : 클래스 이름의 숫자를 기반으로 속성을 계산하는 방법이 있습니까?

Question

각도 격자를 사용하고 있습니다. 데이터가 행에 중첩되고 중첩 된 행 수준의 수는 주어진 시간의 데이터에 따라 달라지는 데이터 표가 있습니다.

.ag 행 레벨 1

.ag 행 레벨 -2-

.ag 행 레벨 -3-

그러므로, I와 같은 CSS 클래스를 가지고 등

나는 많은 잠재적 인 행 수준이 얼마나 앞서 항목 모른다, 나는 행 수준에 따라 패딩을 적용하고 싶습니다. 이 같은 뭔가를 SCSS/SASS에, 가능 :

.ag 행 - 레벨 - $ 수준 { 패딩 왼쪽 : $ 수준 * 20 픽셀 } 셀렉터의 모든 클래스를 식별

그 .ag-row-level- 및 padding-left는 클래스 이름의 실제 행 수준을 기반으로 계산됩니다.

감사합니다.

Answer 1

정확하게는 아닙니다. 이 같은 작동 방식 :

...를 지원할 최대 개수로 바꿉니다. 이 예제와 관련하여 원하는 모든 작업을 수행하려면이 작업이 실제로 충분해야합니다.

이 기능이 SASS에없는 이유는 무엇입니까?

글쎄 SASS는 CSS 프리 프로세서입니다. 아니 더. 이는 Sass 컴파일러가 올바른 CSS를 생성하고 CSS에 해당 기능이 없다는 것을 의미합니다. 이 컴파일러는 HTML에 대해 전혀 알지 못하기 때문에 HTML 생성 기술이 많기 때문에 실제로 필요한 모든 CSS를 생성 할 수는 없습니다.

는하지만이

그럼 당신은 자바 스크립트를 사용하여 문제를 회피 할 수는 충분하지 않습니다. 그것은 오히려 불필요한 내가 당신의 사건에 대한 첫 번째 예와 함께가는 것이 좋습니다,하지만 작동하지 않는 경우는 다음과 같이 수행 할 수 있습니다

function parseLevels() { 
 
    /* call this function whenever you need to update it */ 
 
    const paragraphs = document.getElementsByClassName('ag-row'); 
 
    for (let i = 0; i < paragraphs.length; ++i) { 
 
    paragraphs[i].style.paddingLeft = (20 * paragraphs[i].dataset.level) + "px"; 
 
    } 
 
} 
 

 
parseLevels();

<div class="ag-row" data-level="1">lorem</div> 
 
<div class="ag-row" data-level="2">lorem</div> 
 
<div class="ag-row" data-level="3">lorem</div> 
 
<div class="ag-row" data-level="4">lorem</div> 
 
<div class="ag-row" data-level="5">lorem</div> 
 
<div class="ag-row" data-level="4">lorem</div> 
 
<div class="ag-row" data-level="5">lorem</div> 
 
<div class="ag-row" data-level="3">lorem</div> 
 
<div class="ag-row" data-level="10">lorem</div>