Menu
Let's say I separate a less files into many less files to be easy to organize. Here is my repository:
/reset.less
/variables.less
/mixins.less
/main.less
/styles.less
The styles.less is just importing the other files:
@import "reset.less";
@import "mixins.less";
@import "variables.less";
@import "main.less";
However, when I add some codes into main.less and use the @line-color which is defined in the variables.less. It shows Name Error: variable @line-color is undefined and I cannot compile it- I use PHPStorm with less plugin.
Could you pleas suggest me?
408
LESS gets compiled into static CSS, so there's no way to access variables or functions at runtime. You can either use javascript to assign new values to specific CSS properties with element. style. (property) , or use CSS native variables which are pretty new thing that allows to be modified at runtime.
CSS variables can be declared and used in less files, we can change the variable value or swap variable definition in the browser and it's as easy as changing an element's class name. Create a theme context and a wrapper component to make them available to the app.
Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code. For instance, you can import the file by using @import keyword as @import "file_name.
You have to import your variables.less to all files which use your variables.
Edit:
You have to compile only your style.less. You cannot compile the main.less because it doesn't know the variables.less but you don't want a main.CSS anyway, do you?
You should get the correct style.css which is (I guess) the only css file you'll need.
127
I could solve it by doing the following in PHPstorm:
../css/$FileNameWithoutExtension$.css (added "../css/" in front - depending on what folder you'd like to write the css files into)/Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less (depending on which folder contains the .less files)/Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less (file name depending on which .less file compiles the other .less files)Notice: If Compress CSS output is enabled, this means that the code will be compressed everytime you right-click a .less-file and hit "Compile to CSS". By default the output will not be compressed with every modification you make to the .less-file. If you do want to compress the CSS straight away,
sudo npm install -g less-plugin-clean-css
--clean-css --no-color $FileName$ (added "--clean-css" in front).
Now it will compile your CSS automatically while you're coding. You'll no longer need to compile manually.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
