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.
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
Change existing variables for widgets (if exists of course) in _custom-variables.scss
Full list of variables in Atlas UI
Create the same path and file in our custom folder (based on lib)
Import created file in our custom.scss file using @import directive
Override styles which you would like to change
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/
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.