How to Define Constants in CSS

Is it possible to define constants in CSS?

It is probably a better practice to define a CSS class and reuse it on each element you want to assign the color to rather than coding it to a specific element.

Like so:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size: 8pt;
}

It also helps to know that an element can have multiple classes applied, so you can break out your "Constant" element values into separate classes and apply more than one as needed.

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>

Avoiding repeated constants in CSS

Recently, variables have been added to the official CSS specs.

Variables allow you to so something like this :

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

How to define a constant/macro in CN1 CSS (theme.css)?

Example defining and using a CSS variable

#Constants {
    --main-bg-color: red;
}

MyContainer {
    background-color: var(--main-bg-color);
}

See the section 5.6 "CSS Variables" of the developer guide in PDF, page 164:
https://www.codenameone.com/files/developer-guide.pdf

Oddly, this section of the developer guide is currently missing in the html version of the developer guide, maybe there are not synchronized: https://www.codenameone.com/manual/css.html

Is it possible to define a variable in CSS?

You will need a SCSS Pre-Processor to use variables (or — using the term loosely — constants) in writing your stylesheets.

The two major players in the Pre-Processor area are:

• SASS (my personal favorite, especially when used with compass)

• Less

Some examples:

SASS (using scss syntax):

$mycolor: #000000;

h1 { color: $mycolor; }

LESS

@mycolor: #0000000;

h1 { color: @mycolor; }

To start out, my suggestion would be to play around with both in a Codepen or CSSDeck (which both offer SASS/LESS live compiling ) to get a feel for the syntax.

Pre Processors also provide you with more programatic things like mixins and control structures. Warning: Once you've started pre-processing, it is difficult to go back : )

is there a way to define constants for colors in CSS?

You can use a CSS processor such as LESS.

However, if you only want to use colours as constants, you could probably process your files with your server side language.

How to import css root constant from another css file

define your css variables in your constants.css

:root {
  --green: #119955;
}

then import it using @import './constants.css; in your main.css file.
and use your variables

@import './constants.css';

body {
  background-color: var(--green);
}

What is CSS constant() used for?

I believe constant() was a precursor to env() in the draft spec for environmental variables. You should just use env moving forward and disregard constant.

https://caniuse.com/css-env-function

---

I found these notes from the initial spec:

User Agent Properties

This specification defines an open-ended set of properties called User Agent properties, which, among other things, are used to define the substitution
value of constant() functions.

Name: (various)
Value:
Initial: (nothing, see prose)
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: all
Computed value: specified value with variables substituted (but see prose for "invalid variables")
Canonical order: per grammar
Animatable: no

A User Agent property is not specified in a style sheet. User Agent properties
instead define variables, referenced with the constant() notation.
For example, a page that wants to use the user's requested font sizing, and page
background:

:root {
  font-size: constant(user-font-size);
}

body {
  background-color: constant(user-background-color);
}

Unlike other CSS properties, User Agent property names are case-sensitive.

User Agent properties are not reset by the all property. If a style rule attempts to
define a value for a User Agent property, it is ignored.
Using Cascading User Agent Variables: the 'constant()' notation

The value of a User Agent property can be substituted into the value of another
property with the constant() function. The syntax of constant() is:

constant() = constant( <user-agent-property-name> [, <declaration-value> ]? )

The constant() function is used in the same manner, and follows the same rules,
as the var() function.

Source: https://github.com/w3c/csswg-drafts/issues/1693

Best way to share constants between Javascript & CSS

Is there a good way to have a "single place" for constants like this?

The stylesheet.

Then dynamically set class names.

(At least in many cases. We don't know the specifics of your problem)

---

Related Topics