预处理器sass

美学的重要性，其影响以及实现这一目标的工具。 (Importance of aesthetics, its impact, and tool to achieve it.)

I remember as a child, every time I’d walk up to a bakery, I’d choose the pastries with the most beautiful toppings. Only after having the first bite would I know if it was the one I was longing for.

我记得小时候，每次去面包店时，我都会选择浇头最漂亮的糕点。 只有在第一口被咬之后，我才知道这是否是我所渴望的。

A well-plated dish can trump taste at times. The tendency to pick on appearance has a significant impact on our choices. This inclination towards plating is not only confined to food. Trendy clothes, a decorated apartment, and a well-designed car are a few examples.

镀好的盘子有时会胜过口味。 选择外观的趋势对我们的选择有重大影响。 这种对镀层的倾向不仅限于食品。 例如，时髦的衣服，装饰精美的公寓和精心设计的汽车。

A master chef understands the importance of presentation for a successful restaurant. The art of garnishing can differentiate a culinary masterpiece from a novice’s plate. Moreover, a creative plating would add pleasure and taste, encouraging customers to pay frequent visits. The web is no different from any gourmet meal in this sense. Visual impact has had a crucial role in all successful web applications, too.

大厨了解演示对于成功餐厅的重要性。 装饰艺术可以将烹饪杰作与新手盘子区分开。 此外，创造性的电镀将增加乐趣和品味，鼓励顾客进行频繁的拜访。 从这个意义上讲，网络与任何美食都没有什么不同。 视觉影响在所有成功的Web应用程序中也都起着至关重要的作用。

You need to make significant efforts to make web applications look pleasant. This is where Cascade Style Sheets (CSS) come in.

您需要付出巨大的努力才能使Web应用程序看起来令人愉悦。 这是Cascade样式表(CSS)出现的地方。

As the web evolves, applications grow bigger and bigger. To match our needs, we need more from CSS out of the box. But CSS has some limitations.

随着网络的发展，应用程序越来越大。 为了满足我们的需求，我们需要开箱即用CSS。 但是CSS有一些限制。

Since you’re reading this article, you’ve already finished the toppings, and now is the time to taste the rest of the cake. Let’s see what limitations CSS has and how we can overcome them. The goal is to take your plating technique to the next level.

自从您阅读本文以来，您已经完成了浇头，现在是时候品尝其余的蛋糕了。 让我们看看CSS有哪些局限性以及如何克服它们。 目标是使您的电镀技术更上一层楼。

先决条件 (Prerequisites)

You need to have a fair understanding of CSS and CSS selectors. You’ll also need Node.js and npm installed.

您需要对CSS和CSS选择器有一定的了解。 您还需要安装Node.js和npm。

CSS限制 (CSS Limitations)

Identifying limitations is subjective, though I would like to mention a few.

确定局限性是主观的，尽管我想提及一些。

1. Programming mechanism: Features like variables, functions, classes, and operators are missing in CSS3 itself.编程机制：CSS3本身缺少诸如变量，函数，类和运算符之类的功能。
2. Lengthy CSS file: In rich user interface applications, style sheets may grow overnight. Large files can be a nightmare for maintenance.冗长CSS文件：在丰富的用户界面应用程序中，样式表可能会在一夜之间增长。 大文件可能是维护的噩梦。

3. Absent math operators: Math operators like +, -, *, / can be very handy at times.

   缺少数学运算符：有时+ ， - ， * ， /等数学运算符会非常方便。

To overcome such limitations, we have preprocessor scripting languages.

为了克服这些限制，我们提供了预处理器脚本语言。

预处理器 (The preprocessor)

A Preprocessor is a piece of software which takes an input file written in some programming language and processes it to produce a file following syntax of another language. It is used to extend the syntax of an existing programming language by adding new functionality to it.

预处理器是一种软件，它接收以某种编程语言编写的输入文件，并根据另一种语言的语法对其进行处理以生成文件。 它通过添加新功能来扩展现有编程语言的语法。

A CSS preprocessor extends the CSS syntax by adding a programming mechanism to it. SassScript is a superset of CSS. When compiled, it creates valid CSS blocks for your web applications.

CSS预处理器通过添加编程机制来扩展CSS语法。 SassScript是CSS的超集。 编译后，它将为您的Web应用程序创建有效CSS块。

There are a few CSS preprocessors available like Less, Stylus, and Sass. Our focus will be on Sass ( Syntactically-awesome style sheets). But the concept is more or less the same for other preprocessors.

有一些CSS预处理器可用，例如Less，Stylus和Sass。 我们的重点将放在Sass(语法上很棒的样式表)上。 但是其他预处理器的概念大致相同。

We will go through the installation of a Node.js Sass compiler, and later we’ll see various Sass features in action. So, get ready to garnish your delicious web recipes ?.

我们将完成Node.js Sass编译器的安装，稍后我们将看到各种使用中的Sass功能。 因此，准备装饰您美味的网络食谱吗？。

准备萨斯 (Preparing Sass)

Sass was first written in Ruby and then in other languages. You can choose from many available implementations. For this article, we will stick to a Node.js package — node-sass. This package uses high-performance Sass implementation in C called libSassSass.

Sass首先是用Ruby编写的，然后是其他语言的。 您可以从许多可用的实现中进行选择。 对于本文，我们将坚持使用Node.js包— node-sass 。 该软件包使用称为libSassSass的C语言中的高性能Sass实现。

First things first: Let’s install node-sass. Then we will set up a sample application to see various Sass features in action. Open a terminal on your machine and execute the below command.

首先，首先：安装node-sass。 然后，我们将建立一个示例应用程序，以查看运行中的各种Sass功能。 打开计算机上的终端，然后执行以下命令。

npm install node-sass -g

Here we are asking node package manager to install node-sass for us. With flag -g, we installed the package globally. Great! Once it finishes, make sure everything is in place.

在这里，我们要求节点软件包管理器为我们安装node-sass 。 使用标志-g ，我们全局安装了该软件包。 大！ 完成后，请确保一切就绪。

node-sass -v

Okay! We have all the ingredients we may need. Let’s see what flavors Sass comes with, and afterward we will start our journey to explore Sass.

好的！ 我们拥有所有可能需要的成分。 让我们看看Sass带有什么口味，然后我们将开始探索Sass的旅程。

各种口味的萨斯 (Various flavors of Sass)

There are two ways of creating a Sass file. You can use either of these two syntaxes.

有两种创建Sass文件的方法。 您可以使用这两种语法中的任何一种。

1. Sass style: This syntax uses indentation to separate code blocks and new lines.Sass样式：此语法使用缩进来分隔代码块和换行。
2. SCSS style: This syntax uses blocks like a programming language. We’ll use SCSS syntax in this article.SCSS样式：此语法使用类似于编程语言的块。 我们将在本文中使用SCSS语法。

Note: It’s possible to convert from one syntax to another by a simple Sass convert command. Feel free to adopt the one you like.

注意：可以通过一个简单的Sass convert命令将一种语法转换为另一种语法。 随意采用您喜欢的一种。

准备主菜 (Preparing the main dish)

As we are Sass-ready on our machine, we can start playing around to see what great features it can bring to us. Follow along with me to set up a sample application.

当我们准备好在机器上使用Sass时，我们可以开始玩转，看看它可以为我们带来什么出色的功能。 跟着我建立示例应用程序。

Here I am using Visual Studio Code. You can use any code editor of your choice. I have been using it for a long time and I would recommend it. It has some cool productivity plugins that can be of great help.

在这里，我正在使用Visual Studio Code 。 您可以使用任何选择的代码编辑器。 我已经使用了很长时间了，我会推荐它。 它有一些很棒的生产力插件，可以提供很大的帮助。

So far, we have created a folder and two files.

到目前为止，我们已经创建了一个文件夹和两个文件。

1. index.html: an HTML file.index.html：一个HTML文件。
2. style.scss: root (or main) Sass script file.style.scss：根(或主)Sass脚本文件。

To start, let’s create a div, an h1, and two buttons in the HTML file.

首先，让我们在HTML文件中创建div ， h1和两个button s。

Let’s iterate through the most used Sass features. On the way, we will also see the compiled CSS blocks.

让我们遍历最常用的Sass功能。 在路上，我们还将看到已编译CSS块。

变数 (Variables)

Variables help you centralize CSS properties. You can assign them once at the top of a file and use them throughout the file. These variables are like placeholders for a CSS property’s value. In Sass, a variable name must start with a $ sign.

变量可帮助您集中CSS属性。 您可以在文件顶部分配一次它们，并在整个文件中使用它们。 这些变量就像CSS属性值的占位符。 在Sass中，变量名必须以$符号开头。

We are going to create two variables: $h1-color and $h1-height. Then we will use these variables to assign color and height properties to an h1 element. Below is the Sass snippet.

我们将创建两个变量： $h1-color和$h1-height 。 然后，我们将使用这些变量将颜色和高度属性分配给h1元素。 下面是Sass片段。

$h1-color     : blue;
$h1-height    : 50px;
h1{color  : $h1-color;height : $h1-height;
}

All right! We have an HTML file and a Sass file so far. What about the CSS file? It hasn’t appeared yet.

行！ 到目前为止，我们有一个HTML文件和一个Sass文件。 那CSS文件呢？ 它还没有出现。

Well, we are almost there. Open your terminal to go to the folder we created and execute the command below:

好吧，我们快到了。 打开终端，转到我们创建的文件夹，然后执行以下命令：

node-sass style.scss style.css

The parameters for the node-sass compiler are input and output file path. Now if you open the HTML we created during project setup in a browser, you should see the following.

node-sass编译器的参数是输入和输出文件路径。 现在，如果您在浏览器中打开我们在项目设置过程中创建HTML，您将看到以下内容。

Notice that the CSS file is already included in the HTML’s headsection.

注意，CSS文件已经包含在HTML的head部分中。

经营者 (Operators)

Mathematical operators were always missed in CSS. Sass provides basic math operators like addition +, subtraction -, multiplication * and division/.

在CSS中始终缺少数学运算符。 Sass提供基本的数学运算符，例如加法+ ，减法- ，乘法*和除法/ 。

You can use variables and operators together to manipulate CSS properties. Let’s take an example. We can use operators to calculate padding for an h1 element depending upon the width of its parent div. We will use the divide operator / for this example.

您可以一起使用变量和运算符来操纵CSS属性。 让我们举个例子。 我们可以使用运算符根据其父div的宽度来计算h1元素的填充。 在此示例中，我们将使用除运算符/ 。

$h1-color   : blue;
$h1-font    : 50px;
$div-width  : 500px;
div{width: $div-width;
}
h1{color       :  $h1-color;height      :  $h1-font;padding     :  $div-width / 10;
}

混合蛋白 (Mixins)

Mixins are like abstract base classes. Mixins are handy to group related properties. Once created, these mixins can be reused in the rest of the style blocks. Moreover, you can even pass variables. Confusing? Let’s take an example.

Mixins就像抽象基类。 Mixins易于分组相关属性。 一旦创建，这些混入就可以在其余样式块中重用。 而且，您甚至可以传递变量。 令人困惑？ 让我们举个例子。

You must have noticed that creating a style for border-radius is always quite messy. For cross-browser support, we must use vendor-specific properties. However, with mixins, it can be super easy. Let’s see it happen.

您必须已经注意到，为边框半径创建样式总是很混乱。 为了获得跨浏览器的支持，我们必须使用特定于供应商的属性。 但是，使用mixins可以非常容易。 让我们看看它发生了。

@mixin border-radius($radius){-webkit-border-radius   : $radius;-moz-border-radius      : $radius;-ms-border-radius       : $radius;border-radius           : $radius;
}
div{width    : $div-width;border   : 2px solid grey;@include border-radius(20px);
}

Here we used the @mixin directive to define a mixin named border-radius. This mixin contains all the possible properties to set the radius of a border. We also passed a parameter to this mixin. Whenever you need to set the radius of an element, include this mixin with the @include keyword.

在这里，我们使用@mixin指令定义了一个名为border-radius的mixin。 此混合包含所有可能的属性，用于设置边框的半径。 我们还向该mixin传递了一个参数。 每当需要设置元素的半径时，都可以在@include关键字中包含此mixin。

Compile the script once again to generate the CSS. How does it look now?

再次编译脚本以生成CSS。 现在看起来如何？

//Processed CSS output
div {width: 500px;border: 2px solid grey;-webkit-border-radius: 20px;-moz-border-radius: 20px;-ms-border-radius: 20px;border-radius: 20px;
}

套料 (Nesting)

HTML elements have a logical tree-like structure with nested elements. To write structured CSS selectors, CSS should also follow some logical nesting. Yet, CSS does not support nesting.

HTML元素具有带有嵌套元素的逻辑树状结构。 要编写结构化CSS选择器，CSS还应遵循一些逻辑嵌套。 但是，CSS不支持嵌套。

Since you have Sass on your machine, writing nested CSS selectors is a piece of cake.

由于您的计算机上装有Sass，因此编写嵌套CSS选择器很容易。

div{>h1{color: blue;&:hover{color: greenyellow;}}
}

Here we used two combinators, &gt; and &. The purpose of a combinator is to explain the relationship between the elements. Our example will apply blue color to all h1 children of a div element. Another selector is the parent selector &. Use this selector for pseudo-classes like hover, focus, and active.

这里我们使用了两种组合程序， & GT; 一个n d＆ 组合器的目的是解释元素之间的关系。 我们的例子将应用于蓝色〜 ll的H1孩子a div元素。 另一个选择是父选择o R＆。 将此选择器用于诸如悬浮，焦点和活动之类的伪类。

Compile once again to see the generated CSS blocks.

再次编译以查看生成CSS块。

//Processed CSS output
div h1 {color: blue;
}
div h1:hover {color: greenyellow;
}

遗产： (Inheritance:)

Yes — you can use the most popular OOP feature in Sass as well. Accruing the properties of one’s parent is Inheritance. But does it make any sense in CSS? And can we use them? We can! Believe me, and, I am sure you will adore this feature.

是的-您也可以使用Sass中最受欢迎的OOP功能。 继承父母的财产是继承。 但这在CSS中有意义吗？ 我们可以使用它们吗？ 我们可以！ 相信我，我相信您会喜欢上此功能的。

Consider an application where you have various types of buttons. Save, Cancel, and Discard to name a few. You realize they share most of their characteristics. For example padding, font-size, margin. The only difference is the background color.

考虑一个具有各种按钮类型的应用程序。 保存，取消和放弃仅举几例。 您会意识到它们具有大多数特征。 例如padding，font-size，margin。 唯一的区别是背景色。

Does it smell like inheritance? Yeah— You guessed it right! We can create a parent style for all these common properties and use them in child blocks.

它闻起来像继承吗？ 是的，您猜对了！ 我们可以为所有这些公共属性创建父样式，并将其用于子块中。

%common-button{padding: 16px 8px;border: none;font-size: 18px;
}
.save{@extend %common-button;background-color: blue;color: white;
}
.cancel{@extend %common-button;background-color: goldenrod;color: white;
}

Here, the save and cancel buttons inherited their common properties from the common-button class. To declare a parent style, use the % sign. Use the @extend directive to inherit a child block.

在这里， save和cancel按钮从common-button类继承了它们的公共属性。 要声明父样式，请使用%符号。 使用@extend指令继承子块。

进口 (Import)

We have seen many amazing features that Sass provides. We were able to make styles more readable and structured. Still, it can grow and become hard to maintain.

我们已经看到了Sass提供的许多惊人功能。 我们能够使样式更具可读性和结构性。 尽管如此，它仍会增长并变得难以维护。

Sass has a solution to this problem as well: a partial file. A partial file is a way to create small modular Sass files. The root Sass file can then import these modular files altogether. The naming convention for partial files is to prefix the file name with an underscore _.

Sass也有解决此问题的方法：部分文件。 部分文件是创建小型模块化Sass文件的方法。 然后，Sass根文件可以完全导入这些模块化文件。 部分文件的命名约定是在文件名前加上下划线_ 。

@import '_buttonpartial';
h1{color:blue;
}

Use the @import directive to include a partial file in the root Sass script.

使用@import指令在Sass根脚本中包含部分文件。

循环 (Loop)

Iteration is one of the most frequently used programming mechanisms. Sass script allows you to iterate over variables. You can use various directives like @for, @each and @while.

迭代是最常用的编程机制之一。 Sass脚本允许您遍历变量。 您可以使用各种指令，例如@for ， @each和@while.

$totalButton: 2;
@for $i from 1 through $totalButton{.button-#{$i} {width: 50px * $i;height: 120px / $i;}
}

The generated CSS block will have two classes with different styles.

生成CSS块将包含两个具有不同样式的类。

//Processed CSS output
.button-1 {width: 50px;height: 120px; }
.button-2 {width: 100px;height: 60px; }

避免重复-使用食物处理器 (Avoid repeating — use a food processor)

A food processor is a kitchen appliance used to facilitate repetitive tasks in the preparation of food.

食物处理器是一种厨房用具，用于促进重复的食物准备工作。

We have used a Node.js package for compiling Sass files. It can be very annoying if you have to compile every time you make a change in the Sass script.

我们已经使用Node.js包来编译Sass文件。 如果每次在Sass脚本中进行更改时都必须进行编译，这可能会很烦人。

There is a fancy way to avoid repetitive compiling: a task runner. Visual Studio Code has a built-in task runner, but you can use any task runner of your choice. Gulp is another popular task runner. For compiling Sass script with Gulp, you would need gulp sass compiler instead.

有一种避免重复编译的好方法：一项任务 跑步者。 Visual Studio Code具有内置的任务运行器，但是您可以使用任何选择的任务运行器。 Gulp是另一个受欢迎的任务赛跑者。 为了使用Gulp编译Sass脚本，您将需要gulp sass编译器 。

Warning! Sass is only a development tool. Avoid shipping any library or file associated with Sass. You would never need them on a production server.

警告！ Sass只是一个开发工具。 避免运送与Sass相关的任何库或文件。 您将永远不会在生产服务器上使用它们。

下一步是什么 (What’s next)

We’ve learned how to use preprocessors to create efficient and maintainable CSS blocks. We have seen various Sass features with examples. For more in-depth knowledge, jump to the official website.

我们已经学习了如何使用预处理器来创建高效且可维护CSS块。 我们已经通过示例看到了各种Sass功能。 有关更多深入的知识，请访问官方网站 。

I have also created a sample project. Go ahead, clone the project and start playing.

我还创建了一个示例项目。 继续，克隆项目并开始播放。

翻译自: https://www.freecodecamp.org/news/give-more-oompf-to-your-web-garnishes-with-preprocessors-in-sass-bd379226a114/

预处理器sass