簡化少CSS如果「功能」

我很努力去理解如何保護表達式（從一個不同的主題，我認爲這些是如果函數的LESS平等）可以用來設置單個屬性。雖然下面的作品看起來有點超過了頂端，但它確實讓我做我需要做的事情。這是最好的方法嗎？如果不是將會如此考慮？簡化少CSS如果「功能」

.cover() { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.cover(@property, @value) when (@property = "top") { 
    position: fixed; 
    top: @value; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.cover(@property, @value) when (@property = "bottom") { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: @value; 
    left: 0; 
} 

.cover(@property, @value) when (@property = "left") { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: @value; 
} 

.cover(@property, @value) when (@property = "right") { 
    position: fixed; 
    top: 0; 
    right: @value; 
    bottom: 0; 
    left: 0; 
}

這讓我的例如型...

#cover{ 
    .cover("left", 55px); 
}

如果使用得少版本> = 1.6，則可以使用動態屬性，它呈現爲

#cover{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 55px; 
}

來源

2014-04-02 Matt Skeldon

名稱，這會減少您的代碼：

.cover(@property: left, @value: 0) { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    @{property}: @value; 
} 
#cover { 
    .cover(left, 55px); 
}

來源

2014-04-02 12:55:32 mingos

當我使用這裏面的Visual Studio 2013與最新的Web基礎（使用較少的編譯器1.6.3）我得到以下錯誤... HTTPS： //www.dropbox.com/s/kox2yiua5r4342t/Message.png –

這些錯誤是來自lessc還是來自VS？你得到的錯誤是否會阻止實際編譯.less文件？ – mingos

Visual Studio中的警告，但只要我使用.cover（left，55px）mixin LESS Files不會編譯，並且出現以下錯誤。「SyntaxError：expected'）'got'：'」有趣的是@ 7-phase-max解決方案似乎可行，儘管看起來非常相似。 –

除了@mingos答案，一個優化的impl。（即在沒有輸出redudant屬性）可能看起來像：

.cover(@property: top, @value: 0) { 
    position: fixed; 
    top: @t; 
    right: @r; 
    bottom: @b; 
    left: @l; 

    .-(@property); 
    .-(...) {@t: 0; @r: 0; @b: 0; @l: 0} 
    .-(top) {@t: @value} 
    .-(right) {@r: @value} 
    .-(bottom) {@b: @value} 
    .-(left) {@l: @value} 
} 

// usage: 
.a {.cover(left, 55px)} 
.b {.cover(right, 33px)}

來源

2014-04-02 12:58:22

工作起來就像一個魅力。不得不添加默認屬性值，以確保我可以將其稱爲空，但除此之外（和愚蠢的視覺工作室警告）完美:) –

我已經用默認值更新它。 –

我使用了@「@property」，這樣我就可以調用.cover（），它將覆蓋整個區域，但是這就是訣竅:) –

簡化少CSS如果「功能」

回答

相關問題