Getting To Know Stylus

If you are a front-end developer, you may have heard of Stylus, a distant relative of Sass, little known. Like Sass, Stylus is also a CSS preprocessor written in Node.js. According to its GitHub code base, it calls itself:

[…] A revolutionary new language that provides an efficient, dynamic and expressive way to generate CSS.

Well, "revolutionary" may be a bit exaggerated. But everything else is true.

Key Points

• Stylus is a CSS preprocessor written in Node.js, with a looser syntax than similar tools such as Sass. It allows optional parentheses, colons, and semicolons, and supports indentation syntax and regular CSS styles.
• Stylus supports the use of variables, functions, and mixins to bring CSS closer to a true programming language. It also has attribute value search function and can output attributes conditionally based on whether the attribute has been defined.
• While Stylus is very flexible, using Stylus requires compliance with syntax rules to avoid confusion. It can be installed using Node.js and npm and compiled into CSS using the stylus command. Stylus also has its own framework, Nib, which provides additional helpers and cross-browser support for mixin.

What, another one? !

a bit like it. But Stylus is not a whole new thing. It has been around since early 2011, but I think it has a pretty low-key community. By the way, did you know that the latest Mozilla developer network redesign was done with Stylus? David Walsh, who was involved in the project, also wrote about how to get started with Stylus.

So, what are the advantages of Stylus compared to Sass? Well, it's built with Node.js, which in my opinion is an advantage. While it's totally OK to use Sass in a Node workflow due to the Node-Sass LibSass wrapper, this doesn't mean that LibSass is written entirely in Node.

In addition, Stylus has an extremely loose syntax, which can be good or bad, depending on your project, team, and your tendency to stick to strict coding norms. I think as long as you don't include too much logic in the stylesheet and do the code check before submitting the code, the loose syntax should be fine.

All in all, both Stylus and Sass support almost the same features; you can check out a full list of Stylus features, but don't expect anything groundbreaking (although there are some nice new features). Stylus also supports multiple syntaxes, although the boundaries are much blurry than Sass: you can style almost the way you want (indent, CSS style), and can be mixed and matched in the same stylesheet (this parser must Very interesting).

So what do you think? Want to try it?

Beginner

As mentioned, Stylus is written in Node.js, so we can install it like any other npm package:

<code>$ npm install stylus -g</code>

From there, you can insert it into your Node workflow using the JavaScript API or use the command line executable to compile your stylesheet. For simplicity, we will use the stylus command line tool, but you can do it from Node scripts, Gulp, or Grunt as you like.

<code>stylus ./stylesheets/ --out ./public/css</code>

The previous command tells stylus to compile all Stylus stylesheets (.styl) from the stylesheets folder and generate them in the public/css folder. Of course, you can also monitor changes in the directory:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Writing Stylus Style

If you're just starting to learn and don't want to be overwhelmed by the new syntax, know that you can write pure CSS in your .styl file. Since Stylus supports standard CSS syntax, it's totally fine to just use CSS code and then slowly enhance it.

Basic Syntax

About the grammar itself, almost everything is optional. Braces: Why bother? Semicolon: Forget it! Colon: Throw it away too. Brackets: Please. Here is the fully valid Stylus code:

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

It's a little disturbing at first, but we can get used to it, especially if there is syntax highlighting. As you might have guessed, the previous code compiles to:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

Variable

The most common function of a CSS preprocessor must be the ability to define variables. It's not surprising that Stylus offers it, too. Although contrary to Sass, they are declared with equal sign (=) instead of colon (:). Additionally, the leading dollar sign ($) is optional and can be safely omitted.

<code>// 定义 `text-font-stack` 变量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 将其用作 `font` 属性的一部分
body
  font 125% / 1.5 text-font-stack</code>

Stylus now does something that Sass or any other preprocessor does: property value lookup. Suppose you want to apply a negative left margin equal to half of the width; in Sass you have to store the width in a variable, but in Stylus you don't need it:

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

By using @width, we tell Stylus to get the value of the width attribute of the current block, treating it as a variable. Very clever! Another interesting use case is to conditionally output attributes based on whether the attribute has been defined:

<code>.foo
  // ... 其他样式
  z-index: 1 unless @z-index</code>

In this case, z-index will be set to 1 unless .foo has assigned a value to the z-index attribute. Use it in conjunction with mixin and you really have something.

Mixin

Speaking of this, let's define a mixin because it is probably one of the most popular features of Sass! A mixin in Stylus does not require a specific keyword; it is a mixin as long as it has brackets (empty or non-empty) at the end of its name.

<code>size(width, height = width)
  width width
  height height</code>

Similarly, including mixin does not require a specific syntax like @include or such:

<code>.foo
  size(100px)</code>

You can even remove the brackets if you want, in which case it looks like you are using a completely standard (but not) CSS property. This mechanism is called transparent mixin because their inclusion is invisible.

<code>.foo
  size 100px</code>

This may look like an unnecessary trick at first glance, but if you think about it carefully, this feature actually allows the author to extend the default CSS syntax. Consider the following overflow mixin:

<code>$ npm install stylus -g</code>

If the given value is ellipsis, it prints the well-known declaration triple required to get a single-line ellipsis overflow. Otherwise, it will print the given value. The following is how to use it:

<code>stylus ./stylesheets/ --out ./public/css</code>

It will produce:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

You must admit that this is a very cool trick. While it can be confusing (and can be dangerous), being able to extend standard CSS properties with extra values ​​is actually an interesting concept.

If you want to pass some content to mixin in the @content way, it can be done with the {block} variable. During inclusion, you just need to add before the mixin name to pass extra content.

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

This code will be compiled as:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

The last very interesting feature of Stylus mixin: they always have an arguments local variable containing all the parameters passed to the mixin when included (if any). For example, you can use [..] to manipulate this variable as you would in JavaScript to get the value at a specific index.

Final Thoughts

Traveling through all the features and syntax tips of Stylus will be too verbose, and I think we've already had a good introduction, at least enough to start learning!

As you can see, Stylus is very loose. Of all existing CSS writing helpers, Stylus is definitely the closest tool to bring CSS to a true programming language.

Note that Stylus also has its own framework, just like Sass owns Compass, it is called Nib. Nib is a toolbox that provides Stylus with additional helpers and cross-browser support for mixin.

Some people may like it, some people may not. My advice is to strictly abide by the grammar. It's not always easy to deal with such loose syntax. Anyway, it's nice to see some of Sass's good competitors.

FAQs about Stylus (FAQs)

What are the main differences between Stylus and other CSS preprocessors?

Stylus is a powerful and flexible dynamic stylesheet language. Unlike other CSS preprocessors like Sass and Less, Stylus allows optional use of brackets, colons, and semicolons, making it more flexible and less stringent. It also supports indentation syntax and regular CSS styles, giving developers greater freedom when writing code. Additionally, Stylus supports transparent mixins, which means you can call mixins without using any special syntax.

How to install Stylus?

Stylus can be installed using Node.js and npm (Node package manager). First, you need to install Node.js and npm on your computer. After the installation is complete, you can install Stylus globally by running the command npm install sylus -g in a terminal or command prompt. This will allow you to use Stylus from any directory on your computer.

How to compile Stylus into CSS?

After writing Stylus code, you can compile it into CSS using the stylus command in the terminal or command prompt. For example, if your Stylus file is named style.styl, you should run the command stylus -c style.styl. This will create a CSS file named style.css in the same directory.

Can I use variables in Stylus?

Yes, Stylus supports the use of variables. You can define variables by assigning values ​​to names. For example, font-size = 14px. You can then use this variable elsewhere in your code by referencing its name, like so: p { font-size: font-size; }.

Does Stylus support functions and mixin?

Yes, Stylus supports functions and mixin. Functions in Stylus are defined using the def keyword and can be used to perform calculations or operate on values. On the other hand, mixin is a reusable block of code that can be included in other rule sets.

How to use conditional statements in Stylus?

Stylus supports conditional statements using the if, else if and else keywords. These can be used to apply different styles based on certain conditions. For example, you can use conditional statements to apply different font sizes according to the screen size.

Can I import other Stylus files?

Yes, Stylus allows you to import other Stylus files using the @import directive. This is useful for organizing the code into separate files and reusing the code in multiple style sheets.

Does Stylus support loops?

Yes, Stylus supports for and while loops. These can be used to generate duplicate CSS rules or iterate lists and arrays.

Can I use Stylus with Node.js?

Yes, Stylus can be used with Node.js. In fact, Stylus is built on Node.js and can be installed using npm (Node package manager). You can also use Stylus with Express, a popular web application framework for Node.js.

How to debug Stylus code?

Stylus provides a --debug flag that can be used to output debugging information. This is helpful for tracking errors or understanding how your code is handled. Additionally, you can use the inspect() function in Stylus to output the values ​​of a variable or expression.

The above is the detailed content of Getting To Know Stylus. For more information, please follow other related articles on the PHP Chinese website!