Существуют ли функции CSS?

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

.somepattern{
    font-size:16px;
    font-weight:bold;
    border:2px solid red;
}

но иногда я хочу изменить font-size и цвет для border. Можно ли рассматривать этот код как библиотеку, где я могу установить стиль в div

<div class="somepattern">Text</div>

но все же управляйте 16px и red, как мы делаем с функциями?

Ответы

Ответ 1

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

http://lesscss.org/

http://sass-lang.com/

Если бы мы написали ваш пример в LESS, мы получили бы что-то вроде этого:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

И тогда вы можете использовать его в своем файле LESS следующим образом:

.myclass {
    .somepattern(green, 20px);
}

Ответ 2

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

Чтобы ответить на конкретный вопрос "Существуют ли функции CSS?", Ответ: Да.

Однако функции CSS работают совершенно иначе, чем изначально концепция OP.

Cuixiping ответ кажется наиболее правильным ответом.

Примеры функций CSS:

  • url()
  • attr()
  • calc()
  • rotate()
  • scale()
  • linear-gradient()
  • sepia()
  • grayscale()
  • translate()

Подробные подробные списки можно найти здесь:

CSS функции на MDN Обновленная ссылка 8/8/18

CSS функции на WebPlatform.org 404

Ответ 3

Неа. Нет таких функций 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;
}

МЕНЬШЕ CSS

И, конечно, LESS CSS project, который позволяет вам определять переменные (а также другие сахара) и использовать их в других классах.

LESS расширяет CSS с динамическим поведением, таким как переменные, mixins, операции и функции. LESS работает как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js.

Если ваша серверная платформа есть .net, там DotLessCSS с библиотекой в ​​.net. И там также T4 template от Phil Haack.

Помните, что есть много препроцессоров/усилителей CSS, таких как LESS CSS:

И, вероятно, некоторые другие, о которых я не упоминал. Некоторая поддержка вложенных селекторов CSS3, а также других нет. Некоторые из них нацелены на определенные серверные технологии, некоторые нет. Поэтому выбирайте разумно.

Ответ 4

вы можете переопределить стиль, добавив тег стиля в свой 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.

Ответ 5

То, что вы описали, действительно выполняется с атрибутом style.

<div class="somepattern" style="font-size:10px;">Text</div>

Я думаю, это именно то, что вы хотите. И это не рекомендуется, потому что это нарушает обычный (хороший) образец плюющего контента и его визуального стиля. (Хотя, честно говоря, я использую его много. -))

Ответ 6

его класс css. Он не может использоваться как функции, если это то, что вы просите. Нет библиотеки кода, поскольку она не скомпилирована. CSS - это просто семантика представления (форматирование) документа, написанного на языке разметки. Вы можете включить все классы css в файл .css и использовать его там, где захотите.

Ответ 8

Вы имеете в виду встроенные стили? <div class="somepattern" style="border-color:green">Text</div>

Ответ 9

Я понял через комментарии других, что это решение скомпрометирует проблему. Это решение работает, но есть более простые и лучшие альтернативы, которые не зависят от сценариев на стороне сервера.

Фактически вы можете управлять своей таблицей стилей, если вы делаете ее php файлом stylesheet.php?fontsize=16, а затем внутри своей таблицы стилей вы можете получить переменную

  <?php
     header("Content-type: text/css");
     $fontsize=16;
  ?>

 .somepattern{
   font-size: $fontsize;
   font-weight:bold;
   border:2px solid red;
   }