O'Reilly logo

Meteor: Full-Stack Web Application Development by Marcelo Reyna, Isaac Strack, Fabian Vogelsteller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Stylus for Meteor

Stylus works much like CoffeeScript and Jade but it is for CSS. I recommend that you install mquandalle:stylus. This package is preinstalled with useful tools such as Jeet and Rupture. All Stylus files are saved with a .styl extension. There are only three things that we need to learn about Stylus: CSS tags, variables, and functions.

CSS tags

Stylus is a language that does away with the need for semicolons (;) and curly braces ({}) in exchange for making good use of tabbing. Let's look at an example:

// STYLUS
// Let's make a vertical positioning class
.vertical-align-middle
  //PART 1
  position:absolute
  width:100%
  height:100%
  display:table
  overflow-x:hidden

  .special
    background:black

We can see in PART 1 how properties are defined ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required