SASS and CSS variables? - Post ID 263047
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.
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.
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.
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.
PS. I've found it's not restricted to editing custom CSS files. I've just edited a picture as well.
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 !
I think its wonderful !
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.