Глобальные переменные CSS

Question

У меня есть файл css, который использует один цвет для разных элементов. Вместо использования jquery для динамического изменения каждого элемента я надеялся указать глобальную переменную (пример: $color1), которая установила бы цвет для меня.

Ниже приведен пример, где цвет # F54F36 используется во многих разных элементах. В настоящее время я использую jQuery для динамического изменения этих элементов, но я хотел бы узнать, есть ли способ определить глобальную переменную в CSS.

::selection { 
    background: #F54F36; 
    color: #fff; 
}::-moz - selection { 
    background: #F54F36; 
    color: #fff; 
}#jpreBar, .patern span, .red, .nav - button span, .inner - overlay, .skillbar - bar, .serviseslider h3 span, .icon - holder, .subscriptionForm input#submitButton, #loadingProgress, .sepcolor, .quote - icon, .skillbar - bar, #facts ul li h6, #closeProject a, #ajaxpage a.lanch - project, #clientlist, #contact_form textarea: focus, 
#contact_form input: focus, 
.owl - theme.owl - controls.owl - page.active span, 
.owl - theme.owl - controls.clickable.owl - page: hover span, 
.slides - pagination a.current, 
.slides - pagination a: hover, 
.submit_btn: hover, 
.resume - head, 
.resume - line, 
.resume - date, 
.download - resume { 
    background: #F54F36; 
}.ajl, 
.bigtext, 
.sections - head, 
.slides - container h1 span, 
.error, 
#options li: hover, 
#options li.actcat, 
.social - list ul li a: hover, 
.num, 
.project - description h3, 
.project - details h3, 
.subcribe div#error, 
.subcribe div#success, 
.smallicon: hover, 
.footer, 
.company - color { 
    color: #F54F36; 
}#team.content, 
#options li.back, 
#subscribe.content, 
#prices.content { 
    border - top: 2px solid#F54F36; 
}#facts ul li h6: before { 
    border - bottom - color: #F54F36; 
}#testimonials.content { 
    border - top: 2px solid#F54F36; 
    border - bottom: 2px solid#F54F36; 
}.actser: after { 
    border - top - color: #F54F36; 
}.inner a: hover, 
.inner li.current a { 
    color: #F54F36; 
    border - right: 2px solid#F54F36; 
}.customNavigation a.next - slide { 
    background: #F54F36 url(../images/pl - small.png) no - repeat center; 
}.customNavigation a.close { 
    background: #F54F36 url(../images/close - white.png) no - repeat center; 
}.customNavigation a.btn: hover { 
    box - shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 
    0 0 10px 10px#F54F36, 
    0 0 0 10px rgba(255, 255, 255, 0.5); 
}.triangle { 
    border - color: transparent#F54F36 transparent transparent; 
}.popup - gallery a span { 
    background: #F54F36 url(../images/pl - small.png) no - repeat center; 
}.social - list ul li.back { 
    border - top: 1px solid#F54F36; 
}.to - top: after { 
    border - bottom - color: #F54F36; 
}.flex - direction - nav.flex - next { 
    background: #F54F36 url(../images/project - next1.png) no - repeat center; 
}.flex - direction - nav.flex - prev { 
    background: #F54F36 url(../images/project - prev1.png) no - repeat center; 
}.right - date: before { 
    border - right - color: #F54F36; 
}.left - date: before { 
    border - left - color: #F54F36; 
}.resume - circle { 
    border: 2px solid#F54F36; 
}.resume - slider { 
    border - bottom: 10px solid#F54F36; 
} 

Answer 1

Вам необходимо изучить раздел Меньше или SASS precompiling.

Answer 2

Вы не можете создавать переменные в CSS прямо сейчас. Вы получаете эту функциональность в препроцессоре CSS, таком как SASS или LESS, но не во время выполнения (потому что это препроцессор). Вы должны продолжать использовать Javascript для достижения этого.

В будущем некоторые из преимуществ, предоставляемых SASS или LESS, могут быть реализованы в CSS4 .. до тех пор вы не сможете достичь этого в чистом CSS.

Вы не можете использовать Javascript, чтобы изменить атрибуты классов либо, к сожалению, но, в зависимости от ситуации, некоторые из скомпрометированных решений в этом вопросе может быть полезным: jQuery CSS: Dynamically change attributes of a class

Answer 3

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

Если это так, вам необходимо включить JavaScript в микс.

Настройте свои классы, чтобы у вас был класс, предназначенный только для определения этого цвета.

.userColor {/* put a default color here */} 

В вашем HTML, вы будете иметь:

<div class="class1 class2 userColor etc"></div> 

Затем вы можете использовать JQuery, чтобы изменить все элементы с этим классом, чтобы иметь цвет, который вы хотите:

var = yourColorVariable // up to you how to set a value for this 
$('.userColor').css('background',yourColorVariable) 

Если , с другой стороны, вы спрашиваете, как может клиент (скажем, кто-то, кто купил ваше программное обеспечение для его размещения), настроить свой собственный цвет (ala a 'template' для своего бизнеса), у вас есть несколько вариантов. Самый простой, чтобы позволить им определять свои собственные CSS для этого класса:

.userColor {/*let the customer modify this directly*/} 

Если вам нужно, чтобы сделать это только через какое-то админ инструментом, вы хотите использовать какой-то задний конец кода, чтобы написать, что переменная в вашем db или статический файл .css.

Answer 4

Вы можете использовать CSS, Нет необходимости в препроцессоре, таком как SASS или LESS. Теперь css поддерживает глобальную переменную. Простой пример показан ниже.

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
:root { 
 
    --bigfont:100px; 
 
} 
 
#test{ 
 
font-size:var(--bigfont); 
 
} 
 

 
</style> 
 
<body style="text-align:center;margin-top:60px"> 
 

 
<div id="test">Merbin Joe</div> 
 

 
</body> 
 
</html>