Individual stylesheets must be in the sass directory.

1
After reading this post about the UI Framework I started with SASS and run into some questions. I have created a theme by using the Mx Theme Creator, and use this theme in my app. I have found the _custom-variables.scss file. None of the variables in the file are used in the lib.css or another .css file. (1) Do I have to include the _custom-variables.scss file in the .css file to use the variables (2) What is the syntax to use the variables in css? I have installed Koala to compile the SASS into CSS (I was not able to install scout), but I get an error (in Koala) when running: MyProject\theme\styles\sass\lib\lib.scss Individual stylesheets must be in the sass directory. When searching the internet on this error I get enough hits, but can not find the solution. Moving the file to another location does not work. I don't know if the sass is compiled because I don't know how to use the variables. I made changes in sass but nothing happened, thats why I have question 1 and 2. (3) Does anyone know how to solve this?
asked
1 answers
2
  1. In the theme/styles/sass directory, there are two folders: 1) custom and 2) lib. Lib is the folder where the theme is defined. The files in de custom folder are loaded after the lib files, in other words, you could use them to customize the default styling provided by Mendix.

When Scout/Koala or even better, Grunt , is running, it will detect changes from the /sass folder and will compile the .css in the theme/styles/css folder. These could be loaded in your index.html.

  1. "$", for example "$color-text-default"

  2. Probably nothing changes, because Koala isn't running correctly? I have to look into this before I could give you an answer.

PS. For more details on SASS, please read this blogpost.

answered