0

What is the cleanest easiest way to declare a variable in CSS with meteor? Between the two CSS compilers SASS and LESS, which one can allow me to declare variables so I do not need to define exact values, instead, have control from a variable. For example...

variableNameOne: value;
variableNameTwo: value;

.sidebar-nav li a {
color: variableNameOne;
}

I do not wish to do anything more advanced than this in css. I am using boootstrap in meteor.

CSS3 apparently supports variables by declaring them at the top of the styling sheet inside :root {varName: value;} but it is not supported in all browsers as far as I have read.

Is this the best practice to install nemo64's bootstrap and less? sourced from http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way

// 1. Add the less compiler so meteor compiles everything for you
meteor add less

// 2. Add the bootstrap
meteor add nemo64:bootstrap

// 3. Clone this stylesheet boiler
// Also delete the .git folder and .gitignore if you don't like those
cd yourapp/client/
git clone https://github.com/DerMambo/stylesheets.git

// 4. Add everything you need into the file
// yourapp/client/vendor/custom.bootstrap.json
meteorBuzz
  • 3,110
  • 5
  • 33
  • 60

1 Answers1

2

I would strongly advise using a CSS precompiler, once you start using it you'll never want to go back.

Since you're using bootstrap, I'll list the 2 CSS precompilers that bootstrap provides support for : LESS and SASS.

LESS :

Probably the easiest solution, LESS is baked into Meteor (just meteor add less and throw .less and .import.less files in your sources) and it provides every feature you'll probably need if not a CSS guru.

I recommend this package https://github.com/Nemo64/meteor-bootstrap to integrate a LESS customizable bootstrap in your app, you'll be able to override bootstrap variables (colors, responsive breakpoints, and a ton of other things just by changing variables values, no more dirty CSS hacks with !important).

SASS :

Sass is considered superior to LESS as far as features are concerned and is probably a better choice in the long term if you plan to spend times in web application stylesheets design. There is package that adds support for Sass source files compilation within a Meteor app (https://atmospherejs.com/fourseven/scss), and you should be able to find a decent bootstrap-sass package too.

Be aware that Meteor Sass is based on node-sass which is based on libsass, a reimplementation of the original Ruby Sass in C++, which is not exactly up-to-date with the regular Ruby implementation, but this should hardly be a problem since only pretty advanced features lacks support in libsass.

Please note that this is an ultra-short presentation of CSS precompilers and thus subject to primarily opinion-based comments.

saimeunt
  • 22,666
  • 2
  • 56
  • 61
  • Will this less compiler meteor add nemo64:bootstrap clash with my already installed mizzao:bootstrap-3? Or can I use meteor add less? I am at the beginning development stage so wish to install the best packages before I continue – meteorBuzz Dec 08 '14 at 16:53
  • 1
    You need to remove the previously installed bootstrap package to use `nemo64:bootstrap`, the one you're using adds the compiled CSS source file which is not good if you start using LESS customization. If you are sure you won't need to customize bootstrap you can forget about this step and just add the less compiler with `meteor add less` http://docs.meteor.com/#/full/less – saimeunt Dec 08 '14 at 17:02
  • I am going to remove the old package and user nemo64's package. Thanks for the insight. Would nemos package also allow me to customise the default bootstrap style? Right now I been having to over ride it in my css styling. Sorry for asking elementary questions... I'm new to this. Please see my edited question. – meteorBuzz Dec 08 '14 at 17:08
  • The article you mentioned in your edited question is actually the best tutorial on how to integrate bootstrap with LESS support in Meteor, so you're good to go following these instructions. – saimeunt Dec 08 '14 at 17:16
  • I cant get any syntax to work. Can you please write a simple variable for a colour and then call it in some class? I did .globalTextColor (@color: #ffffff) { color: @color; } and the called this variable like so .sidebar-nav li a { .globalTextColor; } //but this is not right – meteorBuzz Dec 08 '14 at 17:55
  • Your syntax is wrong, you need to read a getting started guide for LESS ! The correct syntax would be : `@color:#ffffff; .globalTextColor{color:@color;}` – saimeunt Dec 08 '14 at 18:02
  • I put this in one style.less file and it works: @var:#c2ecb5; .globalTextColor{color:@var;} .sidebar-nav li a { .globalTextColor; } – meteorBuzz Dec 08 '14 at 18:55