Я не уверен, что называть это, но в принципе скажу, что у меня есть стиль, который я использую много,
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
но иногда я хочу изменить font-size и цвет для border. Можно ли рассматривать этот код как библиотеку, где я могу установить стиль в div
<div class="somepattern">Text</div>
но все же управляйте 16px и red, как мы делаем с функциями?
Вы не можете программно управлять CSS из вашей разметки, но вы можете использовать одно из многих расширений CSS, чтобы сделать CSS более похожим на скомпилированный язык.
Если бы мы написали ваш пример в LESS, мы получили бы что-то вроде этого:
.somepattern(@color: red, @size: 16px) {
font-size:@size;
font-weight:bold;
border:2px solid @color;
}
И тогда вы можете использовать его в своем файле LESS следующим образом:
.myclass {
.somepattern(green, 20px);
}
Я знаю, что опаздываю на вечеринку, но выбранный ответ НЕ является правильным ответом, поскольку он откладывает его на препроцессоры CSS.
Чтобы ответить на конкретный вопрос "Существуют ли функции CSS?", Ответ: Да.
Однако функции CSS работают совершенно иначе, чем изначально концепция OP.
Cuixiping ответ кажется наиболее правильным ответом.
Примеры функций CSS:
url()attr()calc()rotate()scale()linear-gradient()sepia()grayscale()translate()Подробные подробные списки можно найти здесь:
CSS функции на MDN Обновленная ссылка 8/8/18
Неа. Нет таких функций CSS, как вам. По крайней мере, не напрямую.
Но для вас есть как минимум два довольно общих пути:
Конечно, вы можете объединить столько классов, сколько захотите, в любом элементе, например:
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
и вы бы определили CSS:
.heading {
color: #999;
font-size: 16pt;
font-weight: bold;
border-bottom: 2px solid red;
display: block;
margin: 1.5em 0 .5em;
}
.run-in {
display: inline;
margin: 0;
font-size: 1em;
}
И, конечно, LESS CSS project, который позволяет вам определять переменные (а также другие сахара) и использовать их в других классах.
LESS расширяет CSS с динамическим поведением, таким как переменные, mixins, операции и функции. LESS работает как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js.
Если ваша серверная платформа есть .net, там DotLessCSS с библиотекой в .net. И там также T4 template от Phil Haack.
Помните, что есть много препроцессоров/усилителей CSS, таких как LESS CSS:
И, вероятно, некоторые другие, о которых я не упоминал. Некоторая поддержка вложенных селекторов CSS3, а также других нет. Некоторые из них нацелены на определенные серверные технологии, некоторые нет. Поэтому выбирайте разумно.
вы можете переопределить стиль, добавив тег стиля в свой HTML:
<div class="somepattern" style="font-size:5px">Text</div>
или путем применения нескольких классов, таких как class= "somepattern small".
HTML
<div class="somepattern small"> Text </div>
CSS
.small {
font-size:5px;
}
класс small будет применяться после класса somepattern и поэтому переопределит любые свойства, установленные в классе some pattern.
То, что вы описали, действительно выполняется с атрибутом style.
<div class="somepattern" style="font-size:10px;">Text</div>
Я думаю, это именно то, что вы хотите. И это не рекомендуется, потому что это нарушает обычный (хороший) образец плюющего контента и его визуального стиля. (Хотя, честно говоря, я использую его много. -))
его класс css. Он не может использоваться как функции, если это то, что вы просите. Нет библиотеки кода, поскольку она не скомпилирована. CSS - это просто семантика представления (форматирование) документа, написанного на языке разметки. Вы можете включить все классы css в файл .css и использовать его там, где захотите.
Посмотрите на функцию var() в css.
Это может быть полезно https://www.w3schools.com/cssref/func_var.asp
Вы имеете в виду встроенные стили? <div class="somepattern" style="border-color:green">Text</div>
Я понял через комментарии других, что это решение скомпрометирует проблему. Это решение работает, но есть более простые и лучшие альтернативы, которые не зависят от сценариев на стороне сервера.
Фактически вы можете управлять своей таблицей стилей, если вы делаете ее php файлом stylesheet.php?fontsize=16, а затем внутри своей таблицы стилей вы можете получить переменную
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}