SASS and CSS variables? - Post ID 263034

352 posts

If I recall SASS and variables are supported by Foundation, is that all the case with FF?

VP of Software Development
49,402 posts

Foundation Framer is bundled with the precompiled version of Foundation, so, for now, those variables are not accessible. However, most of the things can be accomplished within in the app by using per Type styles.

If you could give a use case for them Bill, that would help us better understand what you want to accomplish. If more users then start requesting access to this, we may consider adding a way to use them within the software.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

352 posts

I don't have the beta, and seems that the Type is an application specific thing. Even if it does the same thing, I would still like to see the use of custom css variables. I believe that today, variables have to be used with SASS because IE does not natively support variables.

The reason I would like [custom] css variables (in FF and RSD) is so that styles, in particular fonts, colors, margins can be given there own custom spot and one place where they only need to be changed once, and all elements/classes linked to it will change.

In RSD, (and maybe FF?) one has to set a color and fonts for paragraphs and blockquotes, for example, separately because they can not share classes with other element types. If I have blockquotes, paragraphs, headers, and UL lists, and I decide to change the font, one has to go on a class scavenger hunt, make all the changes, then see if that change would be the final version. If variables are being used, one could specify in the element's design to use variables, and a variable name. Then change that custom css variable's properties to adjust any property. For instance, set a custom variable --special-font:helvetica; --special-font-2: georgia. Then in the design, one can either change the custom variable property, or change the custom variable an element links to such as header fonts to one variable, and paragraph and ul fonts to another variable.

I can't use FF, but it is something I would like to see. I haven't used SASS or variables yet, but GOOGLE development loves variables, and I have seen their use online, and live demonstrations in local meetups for web design. And all the presenters love them as well.

Registered User
434 posts

I have been successful in using SASS to output a custom.css file that is used to add retina or high dpi support for displaying images on devices that support such using media queries and resolution device-pixel-ratios to define all the vendor prefix(s) required for a optional background image@2x. This would otherwise be a daunting task however using a SASS precompiler lets you setup a mixin function once and then add your @includes targeting html elements, classes or id's which then outputs at the click of the compiler a powerful custom.css file to be easily added to the resources in RSD and linked to.
Break on through to the other side

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.