aes 手写笔_为什么选择手写笔（您也应该如此）

最新推荐文章于 2022-07-20 15:46:30 发布

daique1908

最新推荐文章于 2022-07-20 15:46:30 发布

阅读量963

点赞数

文章标签： python java javascript 编程语言 linux ViewUI

aes 手写笔

前端Web开发的世界一直在稳步增加对我们所谓的“ CSS预处理程序”的采用，这扩展了常规CSS的功能。可以说，拥有最多用户群的两个最著名的是LESS和Sass / SCSS 。但是，还有第三个预处理器没有引起足够的重视，那就是Stylus 。

今天我们将讨论为什么Stylus很棒，为什么我选择Stylus，以及为什么Stylus可能会成为您的新CSS英雄。

为什么LESS和Sass很棒

在详细介绍Stylus的工作原理之前，我将首先介绍一下LESS和Sass / SCSS的主要优势，以及为什么即使它们都摇摆我也不选择它们。

所有三个摇滚

这三个预处理器中的每一个都包括变量，mixin，嵌套和扩展以及各种程度的逻辑运算和功能的使用。因此，这三个都是相同的，因为它们使您可以抽象化关键的设计元素，使用逻辑并编写更少的代码，这使得它们在使用得当时都可以比原始CSS带来更大的收益。

但是，由于这三种基本含义相同，正是它们不同的方式最终导致您选择使用哪种方法。

更少：其他原因的原因

对我而言，这三个预处理器共有的方面之外的最大优势是LESS社区及其所提供的产品。

集成了LESS的最著名的项目是Twitter Bootstrap框架，我想与之合作的愿望是导致许多人转而使用LESS的重要原因。

另一个引人注目的地方是LESShat mixin库，它为CSS3效果及其他提供了出色的mixins数组，它的合作伙伴是Photoshop的CSShat插件，它可以从PSD元素生成复制和粘贴LESS代码。特别是，这两项共同构成了一个非常强大的工作流程，如果您在Photoshop中进行了大量的设计过程，这将是一个很棒的工作流程。

LESS的一大优势是，大多数人发现它非常易于使用。您可以使用简单JavaScript文件即时对其进行编译，也可以使用具有内置编译功能的IDE（例如CrunchApp）（或仅限 Mac上的CodeKit ），也可以在本地计算机上使用Node.js以获得更强大的/灵活的编译解决方案。

更少：为什么我仍然不使用它

与第三方框架相比，我总是更喜欢自己的代码，如今，我也倾向于做最少的Photoshop设计，更喜欢尽可能在浏览器中动态设计。（CSSHat也可以多种语言输出）。因此，对我来说，尽管我描述的项目很棒，但仅凭它们还不足以迫使我选择LESS作为我的首选预处理器。

但是，我不使用LESS的最大原因实际上是它与其他两个主要预处理器之间在可用逻辑处理功能上的巨大鸿沟。

不幸的是，可用的基于逻辑的功能越少，我们创建最小的，干净的代码的能力就越少，开发和后续修改的速度也会越慢。

LESS确实允许一些逻辑，但是与Stylus和Sass / SCSS相比，它确实是非常有限的。您会在我对Sass很棒的描述中看到原因。

Sass：伟大而强大的其他原因

Sass还有一个很棒的社区，其中有许多很棒的项目可供使用。在LESS拥有Twitter Bootstrap的地方，Sass拥有Gumby和Foundation之类的框架。在LESS具有LESShat的地方，Sass具有mixin库，例如Compass和Bourbon 。

但是，与LESS相比，它真正发挥作用的地方在于其强大的逻辑处理能力。在LESS可以称为增强CSS的地方，Sass的行为更像是一种完整的编程语言。

例如，Sass使您可以创建有效的书面条件检查，这在mixin中特别有用。

在Sass中，您可以执行以下操作：

@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){
    @if $border_on == true {
        border: 1px solid $border_color;
    } @else {
        border: 0;
    }
    @if $bg_on == true {
        background-color: $bg_color;
    } @else {
        background-color: transparent;
    }
}

此mixin检查以查看$border_on是否设置为true ，如果是，它将使用输出中的$border_color值作为border属性。如果不是，则将border属性设置为0 。

然后，它还会检查$bg_on是否设置为true ，如果是，它将在输出中将$bg_color值用作background-color属性。如果没有，它将background-color属性设置为transparent

这意味着，根据传递的值，单个mixin最多可以生成四种不同类型的输出，即，边框和背景都打开，边框和背景都关闭，边框打开和背景关闭，边框关闭和背景打开。

但是，在LESS中没有“ if / else”检查，因此上述操作是不可能的。使用LESS最多可以做的是使用所谓的“ Guarded Mixins”，其中根据对单个表达式的检查，给定的mixin输出不同。

因此，您的mixin可以像这样检查@border_on参数是否设置为true ：

.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) {
  border: 1px solid @border_color;
}

但是，由于缺少“ if / else”功能，因此它既无法随后检查@bg_on的值，又无法为同一mixin中的border属性提供替代值。

为了实现与单个Sass mixin相同的逻辑，您需要使用LESS创建四个不同的受保护的mixin，即为@border_on和@bg_on值的每种可能组合使用一个，如下所示：

.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) and (@bg_on = true) {
  border: 1px solid $border_color;
  background-color: @bg_color;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = false) and (@bg_on = false) {
  border: 0;
  background-color: transparent;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = false) and (@bg_on = true) {
  border: 0;
  background-color: @bg_color;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) and (@bg_on = false) {
  border: 1px solid @border_color;
  background-color: transparent;
}

只需检查两个值即可；这个数字随着您要在其上运行逻辑的每个值的增加而增加，当您要创建更复杂的mixin时，这可能变得非常笨拙。考虑变量组合的所有可能排列也是一个艰巨的过程。

这只是Sass与LESS相比，增强逻辑使生活更轻松的一个例子，但还有更多例子。值得注意的是，Sass还通过其@for ， @each和@while指令提供了出色的迭代功能。

最后，非常重要的一点是，尽管LESS具有一些出色的内置功能，但Sass使得编写自己的脚本非常容易。它们简写为：

@function function-name($parameter) {
  @return $dosomething + $parameter / $somethingelse;
}

这些逻辑功能为诸如创建自己的布局引擎，从px到em的处理，颜色修改器以及从项目到项目可能需要的无数事物的快捷方式等打开了无限可能。

从我所阅读和听到的人们聊天的所有内容以及我的亲身经历来看，正是这种大大增强的逻辑能力是人们选择Sass而不是LESS的主要动力。

萨斯：为什么我不使用它，即使它很棒

由于LESS由于其有限的逻辑操作而不能用于大多数项目，因此可以选择在Sass和Stylus之间进行选择，两者均具有强大的可用功能。

在这两者之间，我选择手写笔。手写笔具有Sass的功能，并具有LESS的可访问性。

Stylus.js可以完成Sass所需的一切，但只需要JavaScript或Node.js即可进行编译。另外，它具有一种平稳且易于使用的特殊操作方式，并且它具有我喜欢的优美简洁的语法。

对我来说，运行Ruby on Rails和处理gem的需求是想要与Sass一起工作的主要障碍。 Ruby不是我开发的任何项目的一部分，所以我不得不处理安装它以及任何gem的唯一原因仅仅是为了处理Sass。如果可以避免的话，那是我不需要的一系列连接错误和安装问题。

我怀疑很多其他人也都在同一条道路上，他们不使用Ruby，也不是特别想使用CSS预处理器。

另外，即使我需要安装Ruby才能使用Sass，我仍然发现自己需要与Node.js和NPM一起使用才能使用Grunt处理项目的其他方面，例如观察更改，组合和缩小JavaScript等，以及用于其他程序包管理的Bower 。

注意：有一个名为Mac和Windows的Scout程序，它将为您处理编译，但是同样，在可能的情况下，我宁愿避免仅出于单一目的而安装某些东西，而不是使用可以用于多种目的的工具。还有CodeKit ，但仅Mac。

因此，当像Stylus这样的预处理器具有我所需的所有逻辑功能，并且可以轻松地与我的首选IDE和现有的Node.js设置或纯JavaScript结合使用时，选择它就很有意义。

许多人由于Ruby因素而发现Sass令人生畏的设置过程，因此选择LESS。但是，我发现Stylus的设置简便性与LESS相当，同时为我提供了全部的逻辑功能。

但这不仅涉及Ruby，甚至还涉及可用的逻辑功能。它还涉及到Stylus的特定工作方式及其使用的语法，与LESS和Sass相比，我发现它们非常干净，灵活且流畅。

现在，让我告诉您为什么选择Stylus，以及为什么它可能是您的新CSS英雄。

为什么我选择手写笔

正如我上面提到的，我为其选择Stylus：

强大的逻辑功能
能够通过Node.js / JavaScript运行（无Ruby）
能够作为Node.js设置的一部分运行，以便能够使用Grunt和Bower 。
简洁而灵活的语法
触控笔接近其各种功能的方式的总体平滑度

为了真正向您展示为什么所有上述这些使我选择Stylus，我们需要跳入并开始使用它一点，以便我可以向您确切地说明我在说什么。

让我们从人们开始使用CSS预处理器时遇到的最大障碍开始，无论他们选择哪种，这就是设置和编译。

选择Stylus的一个重要原因是我可以将其设置为常规项目创建方法的一部分，并可以将其与首选的IDE一起使用。让我告诉你怎么做。

手写笔设置和编译

是的，其中涉及一些命令行过程，但是要从一个在预处理程序需要它之前从未使用过命令行的人那里获取它-这远没有您想象的那么难，并且使用命令行会让您感觉到比以前聪明百分之十。 :)

也就是说，我整理了一个程序包，您可以通过单击本文顶部的“下载”按钮来抓取它，这意味着如果您使用Windows，则几乎无需考虑命令行。只需双击几次，您就可以正常运行。

如果您使用的是Mac或Linux，请不要担心，因为只有三个命令可以使用该软件包，我将向您逐步介绍如何使用它们，它们非常简单。

该软件包将监视源Stylus文件中的更改，并将其编译为CSS文件。您可以将其与所需的任何IDE一起使用，这是此特定方法的一大优势。

对我个人而言，这是奇妙的Sublime Text 2 。由于推荐使用出色的Stylus语法突出显示包，因此我也建议将其与Stylus一起使用，我将在下面介绍。

步骤1：安装Node.js

目前，前端Web开发几乎必须拥有Node.js。有很多令人惊叹的工具可以在其上工作，因此安装不仅可以让您建立Stylus，还可以建立很多其他东西。

转到http://nodejs.org/download/并下载适用于您的操作系统的安装程序。

像运行其他安装程序一样运行安装程序，以将Node.js放入系统中。

步骤2：安装Grunt

Grunt是用于运行JavaScript任务的不可思议的工具。您可以通过以下列出的插件将其用于两千多种目的： http : //gruntjs.com/plugins

在我们的案例中，我们将使用它来监视Stylus文件，并在它们更改时将它们编译为CSS。

准备开始使用命令行时，请打开命令窗口/终端。

在Windows上，我发现最简单的方法就是打开Windows资源管理器，然后在任何文件夹中按住SHIFT键并单击鼠标右键。然后，在上下文菜单中，您将看到“在此处打开命令窗口”，应单击以下命令：

或者，您可以单击“开始”按钮，然后搜索“ cmd”，然后按Enter以调出命令窗口。

如果您使用的是Linux，我想您可能已经知道如何打开终端，但是如果没有，那么这里是有关各种发行版的指南： https : //help.ubuntu.com/community/UsingTheTerminal

如果您使用的是Mac，请参阅A Designer's Introduction to Command Line 。

现在，键入以下命令，然后按Enter：

npm install -g grunt-cli

您会在窗口中看到大量这样的文本：

等待所有操作完成，然后出现新的命令提示符。这意味着安装已完成，然后可以关闭命令窗口/终端。您只需执行一次，因为它将在具有全局访问权限的系统上安装Grunt，因此您可以在以后设置的任何项目文件夹中使用它。

现在，您可以使用我提供的StylusCompiler软件包来设置实际项目。对于开始的每个新设计项目，将重复此过程。

手写笔项目

让我们逐步进行此操作。

步骤1：设置项目文件夹

创建一个文件夹来容纳您的项目。对于此演示，我们将其EGProject 。

在其中，创建另一个名为css文件夹。这是您CSS文件将被写入的文件夹。

现在将StylusCompiler.zip文件StylusCompiler.zip压缩到该文件夹中。

您应该以如下结构结束：

步骤2：安装StylusCompiler

进入StylusCompiler文件夹，如果您使用的是Windows，则双击名为double_click_to_install.bat的文件。

如果您不在Windows上，请在StylusCompiler文件夹中打开一个终端（或打开终端，然后/ cd导航到该文件夹）。键入以下内容，然后按Enter：

npm install

这会将编译器安装在项目文件夹中。再次，您会在窗口中看到一堆这样的东西：如果您使用的是Windows，并双击.bat文件，则安装完成后该窗口将关闭。如果没有，请等到文本停止移动并出现新的命令提示符。保持终端处于打开状态，以进行下一步。

步骤3：Aaaaaand参与！

现在，您需要做的就是启动项目设置为通过Grunt使用的“监视”功能。这会让看表的stylus的文件夹里面StylusCompiler文件夹更改任何.styl在它的文件。

只需在该stylus文件夹中创建所需的所有手写stylus文件，就可以了。 注意：您所有的Stylus文件都必须具有.styl文件扩展名。将更改保存到该文件夹中的任何文件后，该软件包将把您的Stylus代码编译为CSS，并将其写入项目的css文件夹中名为style.css的文件中。如果您使用的是Windows，则仍在StylusCompiler文件夹中，双击名为watch_and_compile.bat的文件。

如果您不在Windows上，并且终端仍在StylusCompiler文件夹中，请键入以下内容，然后按Enter：

grunt watch

您应该在命令窗口/终端中看到以下内容：

现在，如果您将更改保存到StylusCompiler > stylus文件夹中，（只要您在代码中没有犯任何错误），您将看到以下内容：

完成手写笔文件的处理后，您可以关闭命令窗口/终端，或者如果需要运行其他命令，则可以按CTRL + C停止“监视”任务。

可选步骤

更改项目选项

我喜欢使用这种类型的项目设置的原因之一是您完全可以控制，因此您可以根据自己的喜好设置项目，并随时更改。如果要更改诸如CSS的输出文件夹，输出文件名，是否压缩CSS等内容，可以在StylusCompiler文件夹中名为Gruntfile.js的文件中进行StylusCompiler 。

我们正在使用Grunt -contrib-stylus插件来处理Grunt，因此您可以在这里获得所有可能配置的完整摘要： https : //github.com/gruntjs/grunt-contrib-stylus 。

但是，这是您可能想要的主要选项。

第20行，是否压缩CSS输出
对于仍在生产中的小型CSS，将compress选项设置为true对于仍在开发中的扩展CSS，将compress选项设置为false 。
第27行，设置CSS输出文件名
将被写入的默认文件名是“ style.css”。如果希望将文件命名为其他名称，请在此行中将“ style.css”替换为您的选择。
第32行，CSS输出位置
默认情况下，编译器将从StylusCompiler文件夹中查找一级，然后写入其中的css文件夹。

如果您希望将CSS文件写入其他位置，请将此行中的值从'../css'更改为您的首选位置。

使用Sublime Text 2和手写笔

正如我上面提到的，这种方法的优点在于，您完全可以使用任何IDE来编辑Stylus文件，并且它们的编译方式相同。但是，我强烈建议您将Sublime Text 2用作Stylus语法突出显示包，因为它使使用Stylus变得令人愉悦。

您可以在此处下载Sublime Text 2： http : //www.sublimetext.com/2 。

下载并安装后，访问此页面并按照说明安装“ Package Control”，这是Sublime Text的出色软件包管理器： https : //sublime.wbond.net/installation#st2

最后，安装Stylus语法突出显示包。通过转到“首选项”>“程序包控制”打开程序包控制，如下所示：

在出现的列表中，单击“安装软件包”选项，然后等待几秒钟，同时检索可用软件包的列表：

在软件包列表上方的字段中键入“ stylus”以进行搜索，然后单击标题为“ Stylus”的结果以进行安装：

现在，该包将变得难以阅读，像这样的常规CSS格式：

…变成易于区分的Stylus格式的代码，如下所示：

手写笔语法

我绝对喜欢Stylus的一件事是它在语法上的完全灵活性。

使用LESS，所有代码必须以与编写常规CSS相同的方式编写，即，必须以与CSS中相同的方式包含花括号，冒号和分号。

使用Sass / SCSS，您可以选择：

您可以在项目中设置一个编译选项以使用SCSS语法，在这种情况下，您可以像编写常规CSS一样编写代码，或者 ...
您可以选择Sass语法，在这种情况下，您可以省略花括号和分号，以便使用制表符缩进和换行符，但是您将无法在同一文件中使用常规CSS语法。

另一方面，手写笔非常灵活，您无需设置任何编译选项即可处理您想要编写的方式。

您可以用大括号括起来的常规CSS语法编写，如果您觉得这样的话，也可以使用。
或者，您可以将大括号，冒号和分号放在一起。通常在大括号处，而是使用制表符缩进。通常在分号处，使用新行。而且通常在冒号所在的地方，一个简单的空间就可以完成工作。
而且，您不仅可以使用这两种方法，还可以将它们组合在同一个文件中。

所有这些示例都将在Stylus中编译，并且语法方法可以在同一文档中一起使用：

只有Stylus允许在不同程度上省略所有这些语法元素，以及这些方法的“即时”组合，因此您可以随项目进行任何操作。

此功能对于开发而言是惊人的。当您省略所有可以使用的语法“标点符号”时，您会惊讶地发现流量增加了多少。您的编码和思考过程将变得更加顺畅。借助我们之前安装的软件包提供的语法突出显示功能，您将发现您的代码可读性强。

但是同时编译是非常宽容的。如果您出于某种原因决定常规CSS语法可以使文档的部分内容井井有条，则可以继续使用并随时使用它。而且，如果您不小心在这里或那里错过了分号，那就没关系了。

手写笔变量，混合器，条件和函数

您在上面看到了一些示例，这些示例说明了变量，混合，条件检查和函数在LESS和Sass中的外观。在我看来，我发现使用Stylus进行这些操作通常更容易阅读，阅读和使用。

在LESS中，变量必须以@符号开头。在Sass中，必须在它们前面加上$符号。但是在Stylus中，变量根本没有任何前缀。

注意：如果愿意，可以选择使用$符号，但不能使用@符号，因为在Stylus中该符号保留用于其他目的。

同样，在Stylus中，mixin，条件检查和函数都不需要任何前缀。

在LESS中，必须以与编写常规CSS类相同的方式编写mixin，并且没有条件检查或自定义函数。

在Sass中，mixins必须以@mixin并以@include调用，条件检查应以@if和@else ，函数必须以@function并包括以@return @function的行。

手写笔不需要这些东西。您可以像使用普通语言一样简单自然地写作。例如，前面我们使用了这个示例Sass mixin和函数：

@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){
    @if $border_on == true {
        border: 1px solid $border_color;
    } @else {
        border: 0;
    }
    @if $bg_on == true {
        background-color: 1px solid $bg_color;
    } @else {
        background-color: transparent;
    }
}

@function function-name($parameter) {
  @return $dosomething + $parameter / $somethingelse;
}

这个mixin和函数将这样调用：

.callem {
    @include border_and_bg(true, #000, true, #fff);
    font-size: function-name( 6 );
}

在Stylus中，可以将它们编写和调用如下：

对我来说，这很整洁，易于读写，并且与使代码干净和最小化的预处理器目标保持一致。

还要记住，尽管在上面的示例中，我省略了所有可以省略的语法“标点”，但是完全可选的是您要在开发中忽略多少。

例如，我无缝地调用了border_and_bg mixin，其编写方式与常规CSS属性基本相同，并且在参数或逗号之间没有括号。但是，如果您愿意，可以在调用mixins时包括方括号和逗号，这完全取决于您。

笔尖Mixin库

关于使用Sass和LESS的最好的事情之一分别是Compass / Bourbon和LESShat mixin库。但是，借助Nib ，您不会错过使用Stylus制作的惊人的mixins库。

我为您提供的“ StylusCompiler”软件包会自动安装（由于grunt-contrib-stylus），并且在您的项目中包含了Nib，因此您无需采取任何其他步骤即可使用它。

Nib为所有您期望CSS3效果提供了混合，可以像使用常规CSS属性那样无缝调用每个混合。它还包括一系列令人印象深刻的混合器，可用于其他功能，例如定位，重置/规范化，清除固定，响应图像等。

在此处查看完整的文档摘要： http : //visionmedia.github.io/nib/

注意： Stylus的第二个mixin库选项是Axis 。

其他可爱的手写笔

手写笔还具有许多其他令人敬畏的功能，以其自身独特且超级干净的方式完成，您确实应该在此处查看全部内容： http : //learnboost.github.io/stylus/

但是，我特别喜欢一对夫妇。

休息参数

其余参数允许您将数量不确定的值传递给mixin，而不必在创建mixin时显式映射它们。您可以提取特定值，然后使用args...和args传递“ rest”。例如：

属性查询

有时您可能会重复几次某个特定的值，但是只能在一种样式中重复一次，因此不得不声明一个变量来保存它可能会过分地过时。

使用属性查找功能，您可以查找以相同样式或父样式声明的任何属性的值。例如：

您要做的就是在要查找的属性之前使用@符号。手写笔将首先以相同的样式显示，并且如果找不到匹配的内容，它将检查父元素并继续冒泡，直到得到匹配或到达文档根目录并返回“ null”为止。

包装和一些最终的手写笔好东西

希望现在您可以准备好设置Stylus，前提是您以前对命令行不太警惕，并且很好奇地调查了您是否喜欢Sass的功能，但宁愿使用Node.js而不是Ruby。即使这两个都不与您特别相关，但我还是希望您对Stylus采取的一些独特方法感兴趣，以使它旋转起来并发挥作用。

总结一下，我想给您列出一些有趣的与Stylus相关的好东西，供您浏览上面提到的一些功能以及其他功能。

请享用！

手写笔文档
Sass vs.LESS vs Stylus：预处理器枪战
笔尖：StylusCSS3扩展
轴混合库
语义网格系统响应式手写笔网格混合
Jeet ：触控笔上的响应式网格系统
与Jeet合作：替代响应框架
流动性：CSS3和HTML5框架
bootstrap3-stylus ：Twitter Bootstrap框架的手写笔端口
bootstrap-stylus ：另一个Twitter Bootstrap端口

翻译自: https://webdesign.tutsplus.com/articles/why-i-choose-stylus-and-you-should-too--webdesign-18412

aes 手写笔

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
aes 手写笔_为什么选择手写笔（您也应该如此）

前端Web开发的世界一直在稳步增加对我们所谓的“ CSS预处理程序”的采用，这扩展了常规CSS的功能。可以说，拥有最多用户群的两个最著名的是LESS和Sass / SCSS 。但是，还有第三个预处理器没有引起足够的重视，那就是Stylus 。今天，我们将讨论为什么Stylus很棒，为什么我选择Stylus，以及为什么Stylus可能会成为您的新CSS英雄。为什么LESS和Sas...
复制链接

扫一扫