CSSクラス名のパラメータは？

Question

は、これらの（非常に似て/反復）CSSクラスを宣言して使用して、より効率的な方法があります：

div.rounded20 
{ 
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
} 

div.rounded15 
{ 
    -webkit-border-radius:15px; 
    -moz-border-radius:15px; 
} 

セイ多分の線に沿って何かを持つ：

div.rounded(@Y) 
{ 
    -webkit-border-radius:@Ypx; 
    -moz-border-radius:@Ypx; 
} 

そして、実際のクラスの使用法

<div class="rounded(15)" ...> 

ている任意の提案は...

01 jqueryのか、別のスタイリング方法を使用することを含む、歓迎されています

Answer 1

あなたはそれを正確に行うように設計されたsass/compassソリューションを見てください。彼らはまた算術演算と変数と色のサポートを持っています。

Answer 2

私はそれが静的であるので、まっすぐなCSSでそれをする方法はないと信じています。しかし、jqueryでそれを行う方法は間違いありません。もし、という名前の関数を設定しSetRoundedCorners（要素、半径）を言うと、このような何かを行うことができます。

function SetRoundedCorners (element, radius) { 
    $(element).css("-webkit-border-radius:" + radius +"; 
-moz-border-radius:" + radius +";"); 
} 

$("#myelement").click(function(){ 
    SetRoundedCorners(this, someRadius); 
}); 

はそれをテストしていませんが、これらの線に沿って何か作業をする必要があります。がんばろう！

EDIT：あなたは角を丸めるために使用することができますjqueryの機能もあります：

ここで見つけることができます

$(document).ready(function(){ 
$("#box1").corner(); 
}); 

：http://www.malsup.com/jquery/corner/

Answer 3

たぶん、このような何か...

HTML：

jQuery：

$("div.rounded").each 
(
    function() 
    { 
     // Calculate the radius as the number at the end of the class name. 
     var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1"); 

     // Set both CSS properties to the calculated radius. 
     $(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"}); 
    } 
); 

Answer 4

私はCSSコンパイラを使用しています。これは基本的にCSSファイルを生成します。ループ、（あなたは筋金入りの場合）などの乗算だけでなく、/加算/減算ダイナミックカラーpalletesを構築し、私が使用するものは、独自のですが、それはあなたが変数を定義することができますコンパイラを使用することによりthis one (PHP)

と非常によく似ていますあなたの "知られている"色のRGBを操作することによって.. 10％明るく、50％暗く、逆になる色が必要な場合。