Less.css類之間的相對鏈接

我在寫一些CSS框架供個人使用，並且遇到了問題。如果你是一位經驗豐富的CSS作家，那麼我非常肯定你對LESS.CSS很熟悉。所以......Less.css類之間的相對鏈接

我存儲在LESS變量我自己的調色板，像這樣：

@color-red: #...; 
    @color-green: #...; 
    @color-blue: #...;

我分配給每個顏色到一個特定的類：

.bg-red { background: @color-red; } 
    .bg-green { background: @color-green; } 
    .bg-blue { background: @color-blue; }

然後，我有一個類所謂block：

.block { 
     display: block; 
     float: left; 
     padding: 10px; 
     margin: 10px; 
    }

的.block:hover東西的目的就是改變當前block元素的背景，並增加它 - 比如說 - ＃222。通常情況下，這看起來是這樣的：

.block:hover { 
     background: @background + #222; 
    }

我唯一的問題是，我們不知道@background做法是什麼，因爲我們與<div class="block bg-blue">創建的div其中bg-...部分可能是從調色板什麼。

所以我想我需要某種相對命名來定位當前背景。你能幫我解決這個問題嗎？

PS：如果你認爲我沒有正確地解釋它，試想如果這是PHP，我們在CSS中這樣做/ LESS：

$background += 222;

來源

2012-11-16 edgeofmystery

一旦編譯了LESS，就不能「讀取」實際顏色。但是，您可以使用顏色類而不是.block進行懸停，因爲這是您通過控制顏色的方式。 LESS讓一切變得簡單：

@color-red: #c00; 
@color-green: #0c0; 
@color-blue: #00c; 

.makeHover(@color) { 
    background: @color + #222; 
} 

.bg-red { 
    background: @color-red; 
    &:hover {.makeHover(@color-red)} 
} 
.bg-green { 
    background: @color-green; 
    &:hover {.makeHover(@color-green)} 
} 
.bg-blue { 
    background: @color-blue; 
    &:hover {.makeHover(@color-blue)} 
}

其中產量這個CSS：

.bg-red { 
    background: #cc0000; 
} 
.bg-red:hover { 
    background: #ee2222; 
} 
.bg-green { 
    background: #00cc00; 
} 
.bg-green:hover { 
    background: #22ee22; 
} 
.bg-blue { 
    background: #0000cc; 
} 
.bg-blue:hover { 
    background: #2222ee; 
}

你也可以use a built in color function for the darkening。

如果你真的想要更通用的CSS，然後做一些僞類like this fiddle demonstrates。如果只有CSS3瀏覽器是針對的，則可以刪除該小提琴中的:before元素，並在.block元素的background上使用rgba()顏色格式。

來源

2012-11-17 19:31:53 ScottS

這實際上是有幫助的。謝謝！ – edgeofmystery

從我的研究和使用較少的日常工作在這裏。我不相信有一種方法可以在元素被LESS處理後獲得一種顏色。我猜你將不得不使用Jquery或某種腳本來做到這一點。

這裏有一個插件，有很多工具來操縱顏色。 jQuery color plugin xcolor

您可能還需要其他功能將找到的RGB元素顏色轉換爲十六進制，以便可以將其他顏色添加到該元素。 Jquery convert RGB to HEX colour values

希望這可以幫助你。

來源

2012-11-16 15:46:26 Andrew

哦...謝謝，但現在它只是讓我更加煩惱。我的意思是，我不認爲這是一種罕見的情況。我認爲必須有一個解決方案。感謝您的評論，但不幸的是，jQuery和JavaScript對我來說都是胡言亂語，我之前從未使用過它們中的任何一個。 – edgeofmystery

我希望你找到你所需要的。如果確實發生了，請將其發回，所以我們使用它:) – Andrew

Less.css類之間的相對鏈接

回答

相關問題