創建mixin和n-child

我想在LESS，CSS中創建一個函數。功能應該在這個將要執行：創建mixin和n-child

.col{ 
    .run-the-function(); 
    }

的問題是：我想要的功能，影響例如每第三個孩子。

.test(@columns, @top-margin, @right-margin){ 
&:nth-child(@columns * n + 0){ 

} 
}

摘要：當beeing執行的功能，每一個第三，第二，第四個要素或者你設置的，該元素將得到一個紅色邊框。

你有什麼想法嗎？這甚至有可能嗎？

感謝

來源

2014-06-11 user256631

，我認爲這會工作

.test(@columns, @top-margin, @right-margin){ 
    &:nth-child(@{columns}n){ 

    } 
}

欲瞭解更多信息的n個子https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

來源

2014-06-11 16:15:45 Huangism

嗯......爲什麼你使用@columns兩次，是不是足夠多的有（@columns * N）？我不認爲它像星號：* 因爲我的程序將其標記爲紅色就像是在星號一個錯誤，我得到： ParseError：無法識別輸入所以我覺得*不在那裏工作：/ – user256631

這是時代的標誌，很少使用其他的東西，或者用數學或其他方式包裝它。如果你只是做列* N，則返回0，當n從0開始 – Huangism

@ user256631我已經編輯了答案糾正乘法部分 – Huangism

這工作...是基於各種交替行

輸出「 nth「值。我稍後會在此發佈圖片。

馬克 - 達：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" href="/Content/test.css" /> 
</head> 
<body> 
    <div class="alt-rows every-3rd"> 
     <div>Test 1</div> 
     <div>Test 2</div> 
     <div>Test 3</div> 
     <div>Test 4</div> 
     <div>Test 5</div> 
     <div>Test 6</div> 
    </div> 
    <br/> 
    <div class="alt-rows every-2nd"> 
     <div>Test 1</div> 
     <div>Test 2</div> 
     <div>Test 3</div> 
     <div>Test 4</div> 
     <div>Test 5</div> 
     <div>Test 6</div> 
    </div> 
</body> 
</html>

減：

@bg: white; 
@alt-bg: gray; 

.altRows(@nth-row) { 
    background-color: @bg; 
    div:nth-child(@{nth-row}n+1) { 
     background-color: @alt-bg; 
    } 
} 

.alt-rows { 
    &.every-2nd { 
     .altRows(2); 
    } 

    &.every-3rd { 
     .altRows(3); 
    } 
}

來源

2014-06-11 16:50:48

我的方式通過使用一個循環也能夠完成更少的完全乾燥。這擺脫了硬編碼的「每一秒」和「每三分鐘」課程。 –

創建mixin和n-child

回答

相關問題