CODEWITHSUNDEEP
javascriptcsstwitter-bootstraplessjasny-bootstrap
Vercingetorix
Vercingetorix

Reputation: 263

Jasny Bootstrap with less pre-compiler - unable to modify less variables

Thanks in advance for reading.

Using CDN, I am incorporating the following APIs / libraries into my project:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<link rel="stylesheet/less" type="less" href="custom/main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

I am also importing jquery and less but not using CDN to do so.

The less files I was using before I added Jasny Bootstrap (above) worked fine; my main.less file imports all of the less variables and mixins from Bootstrap before importing the Jasny set. Main.less looks like this:

@import "less/bootstrap.less";
@import "jasny-variables.less";

@navmenu-width:    225px;

And when I implement the 'Off Canvas' component from Jasny Bootstrap, that also works fine; an off canvas menu appears and pushes all content to the right.

When I try to change some of the Jasny less variables however (either by adding them to my main.less file [as I've done above], or altering them directly in the jasny-variables.less file [which main.less imports from the same directory]), I'm not seeing any results.

Specifically I am trying to change the value of @navmenu-width to be less than the default. Regardless of what value I give it however, in either source, it won't change.

Suggestions?

Upvotes: 1

Views: 304

Answers (1)

sEver
sEver

Reputation: 2295

If you want to change jasny-bootstrap LESS variables, you need to download it's source (there's "download zip" button on the right there) and import all it's less files into into your main.less file.

There's jasny-bootstrap.less file that contains imports of all the other files. You need to include all these files in the exact same order into your main.less file but change any variables right after importing variables.less.

Or just import jasny-bootstrap.less, and add any changed variables right after @import "variables.less"; line right into that file.

If I understood you correctly, your code should look like this:

index.html:

<head>

  <link rel="stylesheet/less" type="less" href="custom/main.less"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

</head>

as you see no links to bootstrap nor jasny-bootstrap css here, as we include that in the less below.

main.less:

@import "bootstrap/bootstrap.less";//jasny requires bootstrap to be included first
@import "jasny-bootstrap/variables.less";//jasny's variables, which we can overwrite below

//your variables go here
@navmenu-width:    225px;

//the rest of jasny less files below

// Core CSS
@import "grid-container-smooth.less";
@import "button-labels.less";
// Components
@import "nav-tab-alignment.less";
@import "navmenu.less";
@import "alerts-fixed.less";
// Components w/ JavaScript
@import "offcanvas.less";
@import "rowlink.less";
@import "fileinput.less";

//more of your own less directives go here
...

If you have included jasny-bootstrap.css in your html and after that you've included jasny-bootstrap.less in your less without the rest of jasny's .less files that might have been the reason the change to the variable didn't overwrite the definition from the pre-rendered CSS.

  1. Include bootstrap.less
  2. Include jasny-bootstrap/variables.less - that defines jasny's vars
  3. Overwrite the variabels with your values
  4. Include the rest of the jasny's less code to use your overwritten variables and render new CSS directives that will overwrite default bootstrap directives.

jasny-bootstrap source, together with the .less files can be downloaded from here: https://github.com/jasny/bootstrap

Upvotes: 2

Related Questions