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

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.

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.

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.

Just to update this thread, I recently began testing to see if I could link my Koala Sass compiler up to the the RSD programs and have found a way to compile a custom.css stylesheet that has been linked to (head section) in the resources css folder that I created. I also have the custom.scss in the resources css folder.

If you know how to get to the temp project folder when viewing your project in a browser, you can link the Koala compiler to the resources/css/ folder that has the custom.css and custom.scss files. Once linked any changes made to the custom.scss file will have Koala autocompile to the custom.css file in the resources/css/ folder. When you re-preview the project in a browser the new custom.css changes take effect. The neat thing is that when you save your project, the custom.css and the custom.scss files are saved also.

The only key thing to remember is that once you close the project, you will have to link your Koala Sass compiler up to the new temp project folder (resources/css) that is created when you reopen your project to work on. You will see a new temp folder number assigned....

Obviously the fantastic CSS control given to us with RSD one would want to keep those simple settings available in the main.css file output however when using Sass mixins, includes, variables etc... Sass can become a very powerful addon.

Thankyou Twinstream. That means one can edit a custom.css file directly within the Project Resources - something I think has been requested several times in Suggestions threads.

I get to the project folder in Windows as follows (I'm using RSD2.5)
(a) I use 'Preview on...' to bring up my default browser (Firefox), press Ctrl-u to show the source code, and right-click on the './custom.css' in the head section, and click on 'Copy Link Location'.
(b) I paste that into a text editor, and remove from the end of the line 'preview/custom.css', and paste the remainder of the line into the Windows Explorer address bar.
(c) From there it's easy to navigate to project_folder > resources.

Frank

PS. I've found it's not restricted to editing custom CSS files. I've just edited a picture as well.

Yes, the same applies for the custom js file in resources also. To put the final "frosting on the cake" one can choose Sublime Text as a editor and add in the packages for SCSS and Jquery and have autocomplete text available too !

Add your css and js folders from your resources to Koala and then edit with Sublime Text.

One thing I found with this setup is you must make sure you are closing your browser window and then make your edits and then repreview.

No more small windows areas in RSD......I can see again !

Just a short video showing the benefit of linking Sublime Text 3 to RSD 2.5 using FileSync to edit a custom.css stylesheet.

https://vimeo.com/263695524

I think its wonderful !