Параметры имени класса CSS?

Есть ли более эффективный способ объявления и использования этих (очень похожи/повторяющиеся) классы CSS:Параметры имени класса 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)" ...>

Любые предложения приветствуются, в том числе с использованием JQuery или альтернативный метод укладки ...

источник

2009-06-11 Rodolfo G.

не с чистым CSS, но Ryan обеспечивает хороший ответ на фрейм – annakata

Ryan Oberoi делает отличное предложение, но это немного перехитрит для моего небольшого веб-приложения ASP.NET MVC. Мне нравится идея Lobstrosity, поскольку она может применяться к любому тегу класса и его короткому и простому ... только то, что мне нужно. Оба являются хорошими ответами, но один решает общий вопрос (с использованием рамки css), а другой решает мою конкретную потребность ... Думаю, я должен выбрать ответ Райана в качестве решения, поскольку он, вероятно, поможет другим ... какие-либо предложения? –

вы должны посмотреть на решения sass/compass, которые предназначены для этого. Они также имеют арифметические операции и поддержку переменных и цветов.

источник

2009-06-11 15:44:41

хороший, это новый на мне – annakata

Никогда не слышал об этом. http://wiki.github.com/chriseppstein/compass и http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html правильно? @Ryan было бы здорово, если бы вы добавили немного своего опыта, используя их. Интересный и новый для меня. – artlung

Sass and Haml были созданы для упрощения стиля html и css. В основном, из фона рельсов, где установлены плагины и/или драгоценные камни, автоматизировать генерацию html и css-файлов на лету.Компас - это структура, построенная на основе sass, которая упрощает интеграцию фреймворков CSS, таких как Blueprint. Вы можете использовать инструменты командной строки для генерации .css из .sass-файлов, если вы используете на других языках. –

Я не верю, что есть способ сделать это с помощью прямого 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/

источник

2009-06-11 15:46:56 Jason

Спасибо за предложение, но я попробовал каждое решение с закругленными углами jquery, которое я смог найти, и никто не смог решить эту ситуацию (округленный div с изображением фона поверх изображения): http://www.curvycorners.net/includes/ examples/demo2.html ... который, как вы можете видеть на этом примере, решается реализацией jv curvycorners.net, которая является решением, которое я, наконец, решил использовать. –

Может быть что-то вроде этого ...

HTML:

<div class="rounded 15"></div> 
<div class="rounded 45"></div>

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"}); 
    } 
);

источник

2009-06-11 15:58:52 Lobstrosity

Я использую компилятор CSS ... который в основном генерирует ваши файлы CSS для вас. Один я использую это собственность, но она работает очень похоже на this one (PHP)

С помощью компилятора можно определить переменные, циклы, добавить/вычесть/умножать и т.д., а также (если вы хардкорный) создавать динамические цветовые palletes манипулируя RGB своими «известными» цветами .. например если вы хотите, чтобы цвет был на 10% легче, на 50% темнее или наоборот.

источник

2009-06-11 16:30:52 scunliffe

Параметры имени класса CSS?

ответ

Смежные вопросы