CODEWITHSUNDEEP
twitter-bootstrapmeteortwitter-bootstrap-3less
Orbit
Orbit

Reputation: 2385

How to use bootstrap gradient mixin?

How is the gradient mixin used? The mixin file states this:

#gradient { .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

Ive tried #gradient.vertical(), #gradient > .vertical() etc. etc..

Do I need to import something?

This is using nemo64:bootstrap less package with meteor

Upvotes: 0

Views: 773

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

#gradient > .vertical(); should work. Make sure you have @imported the mixins.

For bootstrap you can import both less/mixins.less or less/mixins/gradients.less.

As already explained by @Robert you should call the mixin inside a selector:

@import "less/mixins";
div {
#gradient > .vertical();
}

outputs:

div {
  background-image: -webkit-linear-gradient(top, #555555 0%, #333333 100%);
  background-image: -o-linear-gradient(top, #555555 0%, #333333 100%);
  background-image: linear-gradient(to bottom, #555555 0%, #333333 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
}

This is using nemo64:bootstrap less package with meteor

You should read https://github.com/Nemo64/meteor-bootstrap/issues/4 which contains some examples.

@nemo64 wrotes:

the bootstrap mixins and variables are available though custom.bootstrap.import.less which only contains mixins and variables so you can import it as often as you like.

So you should import custom.bootstrap.import.less before calling the mixin.

update

so..shouldnt #gradient > .vertical(#ff0000, #00ff00, 50%, 50%); work?

Yes, it should. Example

After meteor create test-app do cd test-app then run meteor add nemo64:bootstrap less.

Now create a empty custom.bootstrap.json, you file structure should look like that shown beneath now:

├── custom.bootstrap.json
├── test-app.css
├── test-app.html
└── test-app.js

After running the meteor command your file structure should become as follows:

├── custom.bootstrap.json
├── custom.bootstrap.less
├── custom.bootstrap.mixins.import.less
├── test-app.css
├── test-app.html
└── test-app.js

Then create a gradient.less file which should contain the following Less code:

h1 {
#gradient > .vertical(#ff0000, #00ff00, 50%, 50%);
}

Run the meteor command again, now your app on http://localhost:3000/ should look like that shown in the image below:

enter image description here

Upvotes: 2

Robert
Robert

Reputation: 467

For example to style the background of the entire webpage use: 

body {
  #gradient > .vertical(@start-color; @end-color);
}

Upvotes: 2

Related Questions