Custom styling with SASS - guides??

Hi. Can anyone recommend a starter user guide to custom styling with SASS and compilers (we use koala)? I have seen that there is one page by mendix but i understand how to change basics like colours, i want to implement rounded corners for example on datagrids, cards, group boxes etc etc. Also implement tab-bills as a default if a tab grid is used. I THOUGHT i made these changes by pasting the sass from the library into the custom file and editing it inside the theme folder. But after compiling nothing changes. Id appreciate any advice.
3 answers

I can really recommend Dennis Kho's blog on SASS with Mendix. Be sure to check out the links in the bottom of the blog for some more general SASS related information:


Hi, welcome to SCSS!

Have at a look at the SASS guides for a decent overview of all the functionality SASS/SCSS offers. This does assume some knowledge of CSS already;

Koala is a great compiler, I use Brackets as my code editor to manage projects although Atom, or Sublime should do the trick.

You might not be seeing changes for a few reasons; make sure Koala is set to compile automatically on every save you make, make sure you're using the right SCSS syntax, right selectors, and make sure nothing more specific is overwriting your styles.

Happy to try and help with any other questions if I can!




I think one of the most important things I have learened is to align with the other people using your style sheets.

If possible create a main file with all the colour variables, and another with all the font variables.

Most designers have a single style for everything and over the course of the designs and iterations they may change slightly here and there but they should all be the same in the end result.

another easy way to align with other team members is using the BEM structure and splitting elemnts up

so custom buttons are all in one file, custom menus are in a file, this way things are easy to locate.


hope this helps.