Legend

Question

OT: css variables, (custom properties)

Forum|Forum|8 years ago
March 28, 2017
3 replies
3430 views

As you all know I am not a fan of pre/post-processors, but I can understand why people use them.

One of the main reasons given is the use of variables, which I will agree is an advantage, but now that Edge is implementing support for the W3C CSS Custom Properties module, that reason will greatly diminish over the next few years.

Microsoft has published an article describing the use of css variables, with an example of how to create fallback for those interested.

https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/#0m9wDZ4VAQAZdcsF.97

if your variable value is -

--primary: #0B61A4;

then the use with fallback would be -

body {

background: var(--primary, blue);

}

This topic has been closed for replies.

pziecinaAuthor

Legend

Just an update on css variables.

Microsoft Edge 15 now fully includes the feature, and the windows 10 dev edition shipped today, so it should be in the next major update for windows users.

B i r n o u

Legend

hello all, sorry I'm late on this thread... and sorry too if I didn't had time to read all this long thread... I just fly over... I will anyway digg further what have been said...

anyway, for much I red was about comparing sass and css custom properties,

well, FWIT, and at the risk of hearing some howling, it is like comparing what we call here in France, comparing canada dry and scotch...

Canada Dry is gilded like alcohol, its name sounds like an alcohol name ... but it's not alcohol.

wait... before going further... I'm a real Sass addict... and the next series of article to be publishe on creative pipeline is about sass... so don't take my word as argue...

first CSS CP is a w3c recommandation, so that do mean that in a next future all browser will understand it natively

second CSS CP is almost new...(I mean work on recommandation start years ago, but was'nt never took seriously... that's why preprocessor came out...) but now they just need to become stronger and complete... so applying them in IDE NOW is a real need as a first start...

third, currently one can do stuff with css CP that we can't with preprocessor... so that's a way to go... imagine what can do JavaScript above it.?...

to get what I mean... copy paste what's below and test it in a browser

<!doctype html>

<html>

<head>

<title>Document sans nom</title>

<style>

@media (max-width:25em){

body {

--couleur:red;

}

@media (min-width:25.0625em){

body {

--couleur:blue;

}

h1 {

color:var(--couleur);

}

</style>

</head>

<body>

<h1>Titre</h1>

</body>

</html>

O

osgood_

Legend

to get what I mean... copy paste what's below and test it in a browser
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style>
    @media (max-width:25em){
        body {
            --couleur:red;
        }
    }
    @media (min-width:25.0625em){
        body {
            --couleur:blue;
        }
    }
    h1 {
        color:var(--couleur);
    }
</style>
</head>
<body>
<h1>Titre</h1>
</body>
</html>

Could'nt they come up with something better than -- that's really awfully poor syntax and hard to read (is it a long dash or 2 short dashes) I mean even a + would have been better or even ++ if + is not available

This is what pisses me off about everything its ruined by short-sighted morons. What's the stupid thinking behind that?

Rob Hecker2

Legend

More than half my CSS is generated from PHP. Most of this is color choices for various elements. Structurally, web page sections share similarities, so a header, footer, logo bar, array of card boxes, and seven other page sections are created by a function that builds basic functionality. This then starts to make management of CSS organized and logical.

So I personally don't need variables in CSS, but I can see a huge advantage to it for others. One could then define a color palette at the top of the CSS file and all those colors would populate the right element definitions.

O

osgood_

Legend

Never found much use myself for css variables but maybe that's because I'm offput by having to keep 2 files on the go to make it happen. I suspect I might find use for them when eventually variables can be rendered directly within the css file itself. I don't seem to have much trouble just using vanilla css for the kind of sites that I produce. We don't see that many questions about SASS or LESS around these parts so I guess no-one apart from the odd one or two really find much use for them, certainly they play a small part in the bigger picture.

O

osgood_

Legend

Os, correct me if i am wrong, but are you thinking that css variables are variables used in sass/less?

pziecina wrote
Os, correct me if i am wrong, but are you thinking that css variables are variables used in sass/less?

No, Im just saying at the moment I cant see myself using either css variables or sass/less. I can't comment much on css variables so it might be that when everything is available to be compiled within the same file I'll see more benefits or a simpler workflow.

All I'm really saying is my css stylesheets are so simple, uncomplicated and not hugley long I don't think they would really benefit from either to the point its going to make a huge difference.

For others, depending on what they do maybe they see the benefits or just use something which really brings nothing to the table, its hard to tell.

Whats more important I feel anyway is an optional stanalone browser prefixer where the majority will benefit rather than css variables/git etc, etc which you can get by without.

BenPleysier

Community Expert

Me thinks this is a bad idea! Even if all browsers recognise CSS variables, the CSS would have to go through a process of substitution before the document can be rendered.

In the case of SASS, Less and Stylus, the source file is compiled into a usable CSS document. Using the latest version of Dreamweaver, compiling is a matter of saving the source file.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecinaAuthor

Legend

BenPleysier wrote
Me thinks this is a bad idea! Even if all browsers recognise CSS variables, the CSS would have to go through a process of substitution before the document can be rendered.
In the case of SASS, Less and Stylus, the source file is compiled into a usable CSS document. Using the latest version of Dreamweaver, compiling is a matter of saving the source file.

The css does not go through a process of substitution in the browser before rendering the css, it is processed in a similar manner to javascript execution, in that the variable value is substituted, 'on the go' as the variable usage is encountered, (very little to no overhead).

As for the use of pre/post-processors, the files created by these are on average about 20% bigger than those created if vanilla css is used. So a disadvantage in actual use.

BenPleysier

Community Expert

As I have repeatedly stated, Sass/Less doesn’t force you to write all your CSS in a completely new way. In fact, every (vanilla) .css file is automatically a valid .scss file. You are then free to use—or ignore—the features of Sass at your own pace. The advantage is a ready to use CSS document.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded