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.
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?
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>
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.
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>
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.
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.
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.
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.
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.
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.
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; }.
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.
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.
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.
Yes, Stylus supports for and while loops. These can be used to generate duplicate CSS rules or iterate lists and arrays.
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.
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!