A few questions regarding SASS/SCSS

Hello, I have a few questions regarding the best approach to work with custom SASS in Mendix projects. 1. I want to make some complex adjustments to the already existing Mendix style, which is applied to all the elements of the same type (for example a “danger” button style). As I understand, I should edit _buttons.scss file inside of the lib folder, because if I will create a custom SASS I will have to assign the corresponding class/id to every single button which I want to change. Is it correct? 2.Mendix SASS tutorials primarily teaches how to change main theme variables. Is there any tutorial on how to actually create new SASS styles, how to adjust existing styles, and how to replace old styles with the new ones across the whole app?  3. Is there a way to adjust a theme, which was created in the Theme Creator (add some complex style effects)? How can I do it?
4 answers

1.No, it ‘s down to you. The way we do it is by having a _button.scss in custom you can then change the styling using the standard Mendix classes (.btn-danger) . Custom should then take precedent over the styling in lib due to custom.css being loaded after lib.css in the index.html.

2.No Mendix specific tutorials that I’m aware of but their is loads of SASS tutorials online. A good place to start is https://sass-lang.com/guide 

3.I believe the theme creator essentially populates the variables in _custom-variables.scss so you can change the variable values as you please. If you have complex styling to add I would recommend adding it in a separate ‘Partial file’  which means you break the CSS up into smaller more manageable blocks of code that are easier to maintain and develop e.g. _buttons.sccs, _listview.scss, _wizard.scss . Just ensure you import these partial files into custom.scss.

  1. No, it is an architectural choice. If _buttons.scss contains the project-specific styling, that is the place. If _buttons.scss is part of a template that the project uses, or if _buttons.scss is also used in other projects or a company standard, you should add your own custom.scss
  2. No Mendix specific tutorial that I know of, but search the internet for SASS tutorial (no need to specify Mendix).
  3. Don’t know. Anyone?

I would like to suggest creating all styles in custom, why?

Imagine that there is a release of the new version of Atlas UI ... while working in the lib, it may turn out that our changes will be overwritten by a newer version

We can easily copy our custom classes & files to the another project

We can create the same structure in custom directory but create only  css rules which we would like to overwrite, we don’t have to copy everything

IMHO proper way:

Override existing components 

  1. Change existing variables for widgets (if exists of course) in _custom-variables.scss
    Full list of variables in Atlas UI

  2. Create the same path and file in our custom folder (based on lib) 

  3. Import created file in our custom.scss file using @import directive 

  4. Override styles which you would like to change 

  5. Save changes 

If component/widget doesn't exist, create your own file in custom directory.

For learning SASS I would like to recommend this place: https://sass-guidelin.es/


Great questions.

So to start off with I’d recommend checking out this blog to help you get a great sass workflow going.

ATM there is no “best practise” for editing the current sass.
The way we do it at Appronto is that we have a lot of files in the custom sass folder.
what i often see is that people use the same file structure in their custom as in lib (to help with consistancy between atlas)

its difficult to answer the question without knowing how well you know sass, but the easiest way would be to open

“theme/styles/sass/custom/custom.scss” and add your changes there.