預處理器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.

確定局限性是主觀的，盡管我想提及一些。

Programming mechanism: Features like variables, functions, classes, and operators are missing in CSS3 itself.

編程機制：CSS3本身缺少諸如變量，函數，類和運算符之類的功能。

Lengthy CSS file: In rich user interface applications, style sheets may grow overnight. Large files can be a nightmare for maintenance.

冗長CSS文件：在豐富的用戶界面應用程序中，樣式表可能會在一夜之間增長。 大文件可能是維護的噩夢。

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文件的方法。 您可以使用這兩種語法中的任何一種。

Sass style: This syntax uses indentation to separate code blocks and new lines.

Sass樣式：此語法使用縮進來分隔代碼塊和換行。

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.

到目前為止，我們已經創建了一個文件夾和兩個文件。

index.html: an HTML file.

index.html：一個HTML文件。

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, > 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

總結

以上是生活随笔為你收集整理的预处理器sass_Sass — Web的预处理器装饰的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。