CODEWITHSUNDEEP
cssless
Marko S
Marko S

Reputation: 5307

How to keep LESS variables in CSS file?

I created a LESS file and put in some variables for color definitions:

@white:     #fff;
@black:     #000;

When the CSS file was generated I lost all variables, and now I can't use less.modifyVars because the CSS file doesn't have any LESS variables.

How can I keep LESS variables when CSS is automatically saved?

Upvotes: 0

Views: 264

Answers (2)

Bas Slagter
Bas Slagter

Reputation: 9929

LESS parses to CSS. So the variables are being replaced by their values wherever you use them in your LESS. Your 'autosave' functionality should always parse the LESS to CSS and it's the CSS file you include in your project.

To be complete (from my comment): "less.modifyVars is a helper method which you can use to change some variables on the fly BEFORE the CSS is generated."

Upvotes: 2

user247702
user247702

Reputation: 24212

I think you're misunderstanding how modifyVars can be used. This is an example I found:

<link rel="stylesheet/less" type="text/css" href="theme-1488.less">
<script src="less-1.4.2.js" type="text/javascript"></script>
<script>
        less.modifyVars({'@SCREEN_BODY_WIDTH' : '50px'});
</script>

Note that the .less file is included on the page, not the .css file.

Upvotes: 2

Related Questions