主动触控笔_了解触控笔

女爷i 2022-12-03 11:24 180阅读 0赞

主动触控笔

If you are part of the front-end scene, you might have heard of [Stylus][], the distant cousin from Sass that nobody knows very well. Like Sass, Stylus is a CSS preprocessor which is written in Node.js. According to its [GitHub repository][], it describes itself as:

如果您是前端场景的一部分，您可能听说过[Stylus][] ，它是Sass的远亲，没有人知道。 像Sass一样，Stylus是用Node.js编写CSS预处理器。 根据其[GitHub存储库][GitHub repository] ，其自身描述为：

> \[…\] a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS.
> 
> \[…\]一种革命性的新语言，提供了一种高效，动态和表达方式来生成CSS。

Okay, *revolutionary* might be a bit exaggerated. But everything else is true.

好的， *革命性*可能有点夸张。 但是其他一切都是真的。

## 什么，另一个！ **(**What, another one!?**)** ##

Kind of. But Stylus isn’t brand new. It has been around since the beginning of 2011, but I see it as having quite a discrete community. By the way, did you know the latest [Mozilla Developer Network][] redesign has been made with Stylus? [David Walsh][], who’s been involved in the project, also [wrote about how to get started with Stylus][].

有点儿。 但是Stylus并不是全新的。 自2011年初以来一直存在，但我认为它的社区非常分散。 顺便说一句，您是否知道Stylus进行了最新的[Mozilla开发人员网络][Mozilla Developer Network]重新设计？ 参与该项目的[David Walsh][]也[撰写了有关Stylus入门的文章][wrote about how to get started with Stylus] 。

So what are the advantages of Stylus over Sass? Well, it is built in Node.js which sounds like a plus side to me. And while it is perfectly fine to use Sass in a Node workflow thanks to [Node-Sass][] wrapper for [LibSass][], it does not make LibSass written in Node for all that.

那么，手写笔比Sass有什么优势？ 好吧，它是在Node.js中构建的，这对我来说似乎是一个好处。 尽管由于[LibSass的][LibSass] [Node-Sass][]包装器而在Node工作流程中使用Sass [很好][LibSass] ，但是它并不能使LibSass完全由Node编写。

Also Stylus has an extremely permissive syntax, which can be a good or a bad thing depending on your project, your team and your tendency to stick to strict coding guidelines. I think a permissive syntax should be fine as long as you do not involve too much logic in the stylesheet, and lint the code before committing.

此外，Stylus具有非常宽松的语法，根据您的项目，您的团队和您坚持严格的编码准则的倾向，这可能是好事，也可能是坏事。 我认为，只要您在样式表中不涉及太多逻辑，并在提交之前先对代码进行整理，那么允许的语法就可以了。

All in all, Stylus and Sass both support pretty much the same things; you can have a look at the [full list of Stylus features][] but don’t expect anything ground breaking (although there are some neat features). Stylus also supports multiple syntaxes although the line is much more blurry than Sass: you can write your styles pretty much how you want (indented, CSS-style) and you can mix and match within the same stylesheet (the parser for this must have been fun to write).

总而言之，Stylus和Sass都支持几乎相同的东西。 您可以查看[Stylus功能][full list of Stylus features]的[完整列表，][full list of Stylus features]但不要指望有什么突破(尽管有一些简洁的功能)。 手写笔还支持多种语法，尽管该行比Sass更加模糊：您可以按照自己的意愿编写样式(缩进，CSS样式)，并且可以在同一样式表中混合和匹配(为此必须使用解析器很有趣)。

So what do you think? Want to give it a try?

所以你怎么看？ 想试试看？

## 入门 **(**Getting started**)** ##

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

如前所述，Stylus是用Node.js编写的，因此我们可以像安装其他npm软件包一样安装它：

$ npm install stylus -g

From there, either you can plug it into your Node workflow using the [JavaScript API][], or you can use the [command line executable][] to compile your stylesheets. For the sake of some simplicity, we will use the `stylus` command line tool but feel free to tackle it from a Node script, [Gulp][] or [Grunt][].

在这里，您可以使用[JavaScript API][]将其插入到Node工作流程中，也可以使用[命令行可执行文件][command line executable]来编译样式表。 为了简单起见，我们将使用`stylus`命令行工具，但可以从Node脚本[Gulp][]或[Grunt][]随意处理它。

stylus ./stylesheets/ --out ./public/css

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

上一个命令告诉`stylus`从`stylesheets`文件夹编译所有触控笔样式表( `.styl` )，并在`public/css`文件夹中生成它们。 当然，您也可以查看目录中的更改：

stylus --watch ./stylesheets/ --out ./public/css

## 书写笔样式 **(**Writing Stylus styles**)** ##

If you are just getting started and don’t want to feel overwhelmed with a new syntax, know that you can write plain CSS in a `.styl` file. Since Stylus does support the standard CSS syntax, it is perfectly fine to start with CSS code only to enhance it slowly.

如果您只是入门而又不想对新语法感到不知所措，请知道您可以在`.styl`文件中编写纯CSS。 由于Stylus确实支持标准CSS语法，因此从CSS代码开始只是为了缓慢地增强它，这是完全可以的。

### 基本语法 **(**Basic syntax**)** ###

Regarding the syntax itself, almost everything is optional. Braces: why bother? Semi-colons: come on! Colons: ditch ’em too. Parentheses: please. The following is perfectly valid Stylus code:

关于语法本身，几乎所有内容都是可选的。 大括号：为什么要打扰？ 分号：加油！ 冒号：也放沟。 括号：请。 以下是完全有效的手写笔代码：

.foo
    .bar
      color tomato
      background deepskyblue

Kind of disturbing at first but we could get used to it, especially when there are syntax highlighters available. As you can probably guess, the previous code compiles into:

起初有点令人不安，但我们可以习惯了，特别是在有语法突出显示功能时。 您可能会猜到，先前的代码编译成：

.foo, .bar {
      color: tomato;
      background: deepskyblue;
    }

### 变数 **(**Variables**)** ###

The most used feature from CSS preprocessors has to be the ability to define variables. It’s not surprise that Stylus offers it as well. Although contrary to Sass, they are declared with an equal sign (`=`) rather than a colon (`:`). Also, the leading dollar sign (`$`) is optional and can be safely omitted.

CSS预处理器最常用的功能是定义变量的能力。 手写笔也提供它也就不足为奇了。 虽然违背萨斯，它们被声明以等号( `=` )，而不是一个冒号( `:` )。 同样，前导美元符号( `$` )是可选的，可以安全地省略。

// Defining a `text-font-stack` variable
    text-font-stack = 'Helvetica', 'Arial', sans-serif;
    
    // Using it as part of the `font` property
    body
      font 125% / 1.5 text-font-stack

Now there is something that Stylus does which Sass or any other preprocessor does not: property value look-up. Let’s say you want to apply a negative left margin of half the width; in Sass you’d have to store the width in a variable, but not in Stylus:

现在，Stylus可以做一些Sass或任何其他预处理器不能做的事情：属性值查找。 假设您要套用一半宽度的负左边距； 在Sass中，您必须将宽度存储在变量中，而不是在Stylus中存储：

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

By using `@width`, we tell Stylus to fetch the value of the `width` property of the current block, treating it as a variable. Pretty neat! Another interesting use-case for this is to conditionally output a property depending on whether or not it has already been defined:

通过使用`@width` ，我们告诉Stylus获取当前块的`width`属性的值，并将其视为变量。 漂亮整齐！ 另一个有趣的用例是根据是否已定义属性来有条件地输出属性：

.foo
      // ... other styles
      z-index: 1 unless @z-index

In this case, `z-index` will be set to 1 unless `.foo` already has a value assigned for the `z-index` property. Couple this with mixins and you really have something.

在这种情况下，除非`.foo`已经为`z-index`属性分配了值，否则`z-index`将设置为1。 将此与mixins结合使用，您确实拥有一些东西。

### 混合蛋白 **(**Mixins**)** ###

Speaking of which, let’s define a mixin since it’s probably one of the most popular features of Sass! A mixin in Stylus needs no specific keyword; it is a mixin as long as it has the parentheses (empty or not) at the end of its name.

说到这，让我们定义一个mixin，因为它可能是Sass最受欢迎的功能之一！ Stylus中的mixin不需要特定的关键字； 只要它的名称末尾带有括号(是否为空)，它就是一个mixin。

size(width, height = width)
      width width
      height height

Along the same lines, including a mixin needs no specific syntax like `@include` or `+`:

同样，包括mixin不需要`@include`或`+`类的特定语法：

.foo
      size(100px)

You can even drop the parentheses if you feel so, in which case it looks like you use a completely standard (yet not) CSS property. This mechanism is referred to as *transparent mixins* as their inclusions are invisible.

如果愿意，您甚至可以删除括号，在这种情况下，您似乎使用了完全标准的(但不是)CSS属性。 这种机制称为*透明混合，*因为它们的包含物是不可见的。

.foo
      size 100px

That might look an unnecessary trick at first glance, but this feature actually allows authors to extend the default CSS syntax if you think about it. Consider the following `overflow` mixin:

乍一看，这似乎是一个不必要的技巧，但实际上，如果您考虑过此功能，作者就可以扩展默认CSS语法。 考虑以下`overflow`混合：

overflow(value)
      if value == ellipsis
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      else
        overflow: value

If the given value is `ellipsis`, it prints the well-known declaration triplet needed to have a one-line ellipsis overflow. Else, it prints the given value. Here is how you’d use it:

如果给定值为`ellipsis` ，它将打印出单行省略号溢出所需的众所周知的声明三元组。 否则，它将打印给定的值。 这是您的使用方式：

.foo
      overflow ellipsis

And it will yield:

它将产生：

.foo {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

You gotta admit, that’s a pretty cool trick. While it might be confusing (and possibly dangerous), being able to extend the standard CSS properties with extra values is actually an interesting concept.

您必须承认，这是一个很酷的技巧。 尽管这可能令人困惑(并且可能很危险)，但是能够使用额外的值扩展标准CSS属性实际上是一个有趣的概念。

If you want to pass some content to a mixin, in a `@content` fashion, it is possible through a `{block}` variable. During the inclusion, you only have to prefix the mixin name with `+` to pass it extra content.

如果要以`@content`方式将某些内容传递给mixin，可以通过`{block}`变量来实现。 在包含过程中，您只需要在mixin名称前加上`+`即可为它传递额外的内容。

has-js()
      html.js &
        {block}
    
    .foo
      +has-js()
        color red

This code will compile to:

该代码将编译为：

html.js .foo {
      color: #f00;
    }

Last very interesting feature of Stylus mixins: they always have a `arguments` local variable containing all arguments (if any) passed to the mixin when included. This variable can be manipulated and treated as an array, for instance to fetch values at specific indexes using `[..]` like in JavaScript.

Stylus mixins的最后一个非常有趣的功能：它们始终具有一个`arguments`局部变量，该局部变量包含所有包含在传递给mixin的参数(如果有)。 该变量可以作为数组进行操作和处理，例如使用JavaScript中的`[..]`来获取特定索引处的值。

## 最后的想法 **(**Final thoughts**)** ##

Going through all features and syntax tricks from Stylus would be too long and I think we already had a decent introduction, enough to get started at least!

遍历Stylus的所有功能和语法技巧都太长了，我认为我们已经有了不错的介绍，至少足以入门！

As you can see, Stylus is extremely permissive. Of all existing tools to help writing CSS, Stylus is definitely the one bringing CSS the closest to a real programming language.

如您所见，手写笔非常宽松。 在所有现有的帮助编写CSS的工具中，Stylus绝对是使CSS最接近于真正编程语言的工具。

Note that Stylus also has its own framework in the same way that Sass has [Compass][], and it’s called [Nib][]. Nib is a toolbox providing extra helpers and cross-browsers support mixins for Stylus.

请注意，Stylus也有自己的框架，就像Sass拥有[Compass一样][Compass] ，被称为[Nib][] 。 Nib是一个工具箱，为Stylus提供额外的帮助程序和跨浏览器的支持mixin。

Some people might like it, some people might not. My advice would be to be very rigorous with the syntax though. Dealing with such a tolerant syntax might not always be such a bliss. In any case, it’s nice to see some decent concurrence to Sass.

有些人可能喜欢，有些人可能不喜欢。 我的建议是对语法要非常严格。 处理如此宽容的语法可能并不总是那么幸福。 无论如何，很高兴能看到Sass的一些同意。

> 翻译自: [https://www.sitepoint.com/getting-to-know-stylus/][https_www.sitepoint.com_getting-to-know-stylus]

主动触控笔

[Stylus]: https://learnboost.github.io/stylus/
[GitHub repository]: https://github.com/stylus/stylus
[Mozilla Developer Network]: https://developer.mozilla.org/en-US/
[David Walsh]: http://davidwalsh.name/
[wrote about how to get started with Stylus]: http://blog.teamtreehouse.com/getting-started-stylus
[Node-Sass]: https://github.com/sass/node-sass
[LibSass]: https://github.com/sass/libsass
[full list of Stylus features]: https://github.com/stylus/stylus#features
[JavaScript API]: https://github.com/stylus/stylus/blob/master/docs/js.md
[command line executable]: https://github.com/stylus/stylus/blob/master/docs/executable.md
[Gulp]: https://github.com/stevelacy/gulp-stylus
[Grunt]: https://github.com/gruntjs/grunt-contrib-stylus
[Compass]: http://compass-style.org/
[Nib]: http://tj.github.io/nib/
[https_www.sitepoint.com_getting-to-know-stylus]: https://www.sitepoint.com/getting-to-know-stylus/