通过php定义CSS颜色

Question

I need a way of defining a css highlight colour as a php value and then using that as a class in my stylesheets.

I know that someone people do this as inline styles but I just have far too many elements using the class to put it inline. Ideally I need a way to echo the variable in the stylesheet (SASS?)

I can't find this anywhere, which seems odd!

Answer 1

At the moment you have 2 viable options.

Using Javascript

The first option is using some javascript inside your HTML file, in a script tag.

Define a variable with PHP and use it to target the desired elements.

var myVariable = "dodgerblue";

$(".el").css("background-color", myVariable);

body {
  counter-reset: example;
  display: flex;
  justify-content: space-around;
  height: 100vh;
  margin: 0;
}
div {
  flex: 0 0 10%;
  counter-increment: example;
}
div::after {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  content: counter(example);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>

---

Another option is like @cale_b suggests.

Using an internal stylesheet.

In your output (ideally in the section of your page), at some point after your stylesheet is referenced, cause PHP to do something like this: echo <style>.highlight_color {color: #ffff00;}</style>.

---

Using CSS is not possible at the moment.

Sadly there is not a CSS solution for this, yet.

Hopefully some day browsers will support the use of attr() CSS function in all property values, not just content.

div {
  background-color: attr(data-myvariable);
}
div::after {
  content: attr(data-myvariable);
}

<div data-myvariable="red">
  Example
</div>

</div>