Stylus – nice to know

Stylus supports interpolation by using the {} characters to surround an expression, which then becomes part of the identifier. For example, -webkit-{'border' + '-radius'} evaluates to -webkit-border-radius.

You need node.js first, so you can install stylus package. Run: “sudo npm install stylus -g”

To start watch Stylus:
stylus –watch ./stylus/ –out ./css
Remember that Whitespace is significant when writing Stylus.
Some examples in Stylus:
// Declaring of variables:
tkablue = #5caae6
size = 20px

// Stylus syntaxes
.header
	color tkablue
	padding size
	background #ffffff
	font-size size

textarea, input
	border 1px solid #eee

Becomes in CSS:

.header {
  color: #5caae6;
  padding: 20px;
  background: #fff;
  font-size: 20px;
}
textarea,
input {
  border: 1px solid #eee;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *