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

All my client websites share a single "CSS file" so variables are critical. In the CMS there is a whole separate application that allows clients to define and control their site "theme."

But I can see how someone who creates static websites could have a collection of variables at the top of the file, making it really easy to modify the same CSS file for multiple websites on separate servers. No CMS needed. No database, no pre or post processors. The simplicity alone would make it popular, I suspect.

https://forums.adobe.com/people/Rob+Hecker2 wrote
But I can see how someone who creates static websites could have a collection of variables at the top of the file, making it really easy to modify the same CSS file for multiple websites on separate servers. No CMS needed. No database, no pre or post processors. The simplicity alone would make it popular, I suspect.

I can see it might be useful on large projects but to me its just as simple to write vanilla css if you create small to medium sized projects. Most of my projects don't have many static pages, most pages are generated from information in a database and share the same fairly simple css file or files.

I could use sass and complicate it just for laughs but I dont see it would be any advantage to me personally and I probably produce sites something akin to 90% of what you see on the internet.

I think you have to weigh up what you do and make a judgement if its worth using on a personal level. Are you just using it because it makes you feel more skilfull rather than providing anything trully worthwhile and useful.

Most of the peripheral stuff is maybe nice to have but excess to essential requirement. I personally prefer to direct any spare time that I have into something which is going to make a real difference to my ability to code more interesting and subtle features into a website.

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