SASS 함수를 사용하여 컨테이너의 자식 수를 결정할 수 있습니까?

Question

SASS 함수를 사용하여 컨테이너의 자식 수를 결정할 수 있습니까? 이 컨테이너

<div class="columns columns_3"> 
     <div class="column"></div> 
     <div class="column"></div> 
     <div class="column"></div> 
    </div> 

, 내가 +columns_3 있는 믹스 인을 구현하려는 그러나 컨테이너가 아이들의 n 번째 숫자가있는 경우, 믹스 인이 될 것입니다 :

예를 들어, 내가 3 열이 용기가있다 +columns_n

Answer 1

당신이 원하는 것은 많은 차일 요소를 가진 사람들 방법을 알고 그것에 적절한 클래스를 설정하는 것입니다. 하위, HTML 및 CSS 수를 검색하려면 Javascript가 필요합니다.

당신이 당신의 문제와 무엇을 달성하는 데 필요한 설명하지만 만약 내가 알고 있어요하지 않는 것이 SCSS

.element { 
    $width: 100%; 
    width: $width; 

    div { 
    height: 100px; 
    float: left; 
    border:1px solid #000; 
    box-sizing: border-box; 
    } 

    @for $i from 1 through 12 { 
    &--#{$i} div { 
     width: $width/$i; 
    } 
    } 
} 

var element = document.getElementsByClassName('element')[0]; 
 
var childs = element.childElementCount; 
 
element.classList.add("element--"+childs);

.element { 
 
    width: 100%; 
 
} 
 
.element div { 
 
    height: 100px; 
 
    float: left; 
 
    border: 1px solid #000; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} 
 

 
.element--4 div { 
 
    width: 25%; 
 
}

<div class="element"> 
 
    <!-- childs --> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

난 당신이 할 수 있다고 생각 :

@function number(val) { @return val }; 
 

 

 
@mixins +columns_#{number(10)} { 
 

 
    // Your code; 
 

 
}

나는 당신이 설명하는 것을 이해하는지 모르겠다.

Answer 3

범위가 있다면 잠재적으로 for 루프를 사용할 수 있습니다. 필요한 작업에 따라 달라질 수 있습니다. 예를 들어 :

$gridWidth = 100%; 
@for $numItems from 1 through 12 { 
    .columns_#{$numItems} { 
    .column { 
     width: $gridWidth/$numItems; 
    } 
    } 
}