Highlighted

Is it possible to use variables in CSS?

Contributor ,
Nov 28, 2018

Copy link to clipboard

Copied

I know you can define multiple classes at once, by separating them with commas... but can you do the opposite?

Something like...

$stringA = 500px

.class1 { min-width: $stringA;px }

.class2 { max-width: $stringA;px }

This isn't anything I'm trying to do specifically, let's not focus too much on the example; I'm just trying to find out if there's a way to define a variable in one location and call it in multiple other locations (with or without the help of php).

Thanks!

Views

558

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is it possible to use variables in CSS?

Contributor ,
Nov 28, 2018

Copy link to clipboard

Copied

I know you can define multiple classes at once, by separating them with commas... but can you do the opposite?

Something like...

$stringA = 500px

.class1 { min-width: $stringA;px }

.class2 { max-width: $stringA;px }

This isn't anything I'm trying to do specifically, let's not focus too much on the example; I'm just trying to find out if there's a way to define a variable in one location and call it in multiple other locations (with or without the help of php).

Thanks!

Views

559

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 28, 2018 0
Mentor ,
Nov 28, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 1
Adobe Community Professional ,
Nov 29, 2018

Copy link to clipboard

Copied

ALsp​ provided a simple solution. For reinforcement, take a look at this simple demo video:

CSS Variables without Sass? Learn how to use CSS Variables (Tutorial) - YouTube

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 0
Adobe Community Professional ,
Nov 29, 2018

Copy link to clipboard

Copied

CSS Variables are awesome, when they work, and a lot of unnecessarily duplicated code, when they don't.

Since everything needs to be written out normally, as the fallback for most Microsoft browsers, css variables aren't quite worth using yet in my opinion. However, they are definitely worth knowing for the time when IE usage drops to near zero for your regularly updated sites.

CSS Variables

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 1
Mentor ,
Nov 29, 2018

Copy link to clipboard

Copied

It truly is amazing how these threads seem to have a life of their own

I can cite ways in which they can be used now, in limited roles, even as a self-healing fallback for other things IE doesn't support. In fact, almost like an @supports rule. But I think the original poster might be overwhelmed,

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 0
LEGEND ,
Nov 29, 2018

Copy link to clipboard

Copied

ALsp  wrote

It truly is amazing how these threads seem to have a life of their own

And just to prove it -

No version of Dw supports the use of css variables, (doesn't even support srcset/picture, and those were a w3c recommendation status over 2 years ago).

So use, but expect Dw to flag as error.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 2
ALsp LATEST
Mentor ,
Nov 29, 2018

Copy link to clipboard

Copied

pziecina  wrote

ALsp   wrote

It truly is amazing how these threads seem to have a life of their own

And just to prove it -

I'll see you and raise you 6 bits

We sell an extension that does srcset in Dreamweaver - from Dreamweaver MX to Dreamweaver 19. We also have extensions that restore Server Side Include and Design Time CSS to Dreamweaver CC versions.

It's on our plan to do a CSS variable tool in late 2019 or early 2020.

I think one of the things all Dreamweaver users need to understand is when to ignore Dreamweaver's error messages.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 3