CSS에서 그리드의 무언가를 생성하는. 믹스 인을하는 방법?

Question

10 x 10 같은 그리드에 대한 .cX.rY 선택자의 형태로 CSS 선택기의 행렬을 생성하고 싶습니다. 그러나이 방법을 사용할 수있는 방법을 보지 못했습니다. 적게). 나는 DotLess도 사용하고 있습니다. 그래서 아마도 거기에 몇 가지 기본 제한이 있습니다. 나는 그 앞에서 확실히 모른다.

@col-width: -24px; 
@row-width: -24px; 


.img-pos(@col, @row) { 
    background-position: 
     (((@col - 1) * @col-width) - 1) 
     (((@row - 1) * @row-width) - 1); 
} 

.c2.r1 { .img-pos(2, 1); } 
.c2.r2 { .img-pos(2, 2); } 
.c2.r3 { .img-pos(2, 3); } 
.c2.r4 { .img-pos(2, 4); } 
.c2.r5 { .img-pos(2, 5); } 
.c2.r6 { .img-pos(2, 6); } 
.c2.r7 { .img-pos(2, 7); } 
... 


... 
.cX.rY { .img-pos(2, 7); } 

이것이 가능합니까? 그렇다면 어떻게?

Answer 1

최대 열과 행을 설정하고 선택적으로 시작 열과 행 번호 (기본값 : 1)를 설정하고 선택적으로 클래스 표시기를 기본값 ("c"및 "아르 자형"). 그것은 자동으로 코드를 생성하기 위해 LESS에서 루핑 기법을 사용합니다.

적은 코드

@col-width: -24px; 
@row-width: -24px; 

.img-pos(@col, @row) { 
    background-position: 
     (((@col - 1) * @col-width) - 1) 
     (((@row - 1) * @row-width) - 1); 
} 

.generateGridSelectors(@maxCols, @maxRows, @colStart: 1, @rowStart: 1, @colSel: "c", @rowSel: "r") when (@maxCols > 0) and (@colStart < @maxCols) and (@maxRows > 0) and (@rowStart < @maxRows) { 

    @colStop: @maxCols + 1; 
    @rowStop: @maxRows + 1; 

    .makeGrid(@c: @colStart) when (@c < (@maxCols + 1)) { 

    .setRow(@r: @rowStart) when (@r < (@maxRows + 1)) {  

    //generate selector and position 
    (~".@{colSel}@{c}.@{rowSel}@{r}") { 
    .img-pos(@c, @r); 
    } 

    //interate next row 
    .setRow(@r + 1); 
    } 
    //end row loop 
    .setRow(@rowStop) {} 

    //start row loop 
    .setRow(); 

    //iterate next column 
    .makeGrid(@c + 1); 

    } 
    //end column loop 
    .makeGrid(@colStop) {} 

    //start grid loops 
    .makeGrid(); 
} //end generateGridSelectors 

//call your build (not sure how well it will handle real large numbers) 
.generateGridSelectors(10, 10); 

CSS 출력

.c1.r1 { 
    background-position: -1px -1px; 
} 
.c1.r2 { 
    background-position: -1px -25px; 
} 
.c1.r3 { 
    background-position: -1px -49px; 
} 
... 
... 
.c10.r8 { 
    background-position: -217px -169px; 
} 
.c10.r9 { 
    background-position: -217px -193px; 
} 
.c10.r10 { 
    background-position: -217px -217px; 
}