We all get a little frustrated when styling large scale applications, especially using plain CSS. Things can get very messy easily. Things can get a lot easier using SASS. I have listed the primary and most useful features of SASS along with some very precise descriptions and tiny code snippets. But before that, I assume you are aware of the following:
设计大型应用程序的样式时，尤其是使用纯CSS时，我们都会感到有些沮丧。 事情很容易变得很混乱。 使用SASS可以使事情变得容易得多。 我列出了SASS的主要和最有用的功能，以及一些非常精确的描述和微小的代码段。 但是在此之前，我假设您了解以下内容：
- Commonly used CSS properties 常用CSS属性
- Basic understanding of programming (if/else, loops) 基本的编程知识(if / else，循环)
Alright! Let us get started.
好的！ 让我们开始吧。
变量和局部 (Variables and Partials)
You can use the variables feature in SASS to avoid writing and modifying repetitive style properties. Let’s consider you have a specific text colour as #000 to be used in multiple areas across your website’s elements. You can declare a variable in the following manner:
您可以使用SASS中的变量功能来避免编写和修改重复的样式属性。 让我们考虑一下您有一种特定的文本颜色，如＃000，可在您网站元素的多个区域中使用。 您可以通过以下方式声明变量：
$text-color: #000
$text-color: #000
To use the property, use the following syntax anywhere in you SCSS file:
要使用该属性，请在您的SCSS文件中的任何位置使用以下语法：
color: $text-color
color: $text-color
You can define the common properties in a separate file and use the import statement to use them in your actual stylesheet.
您可以在单独的文件中定义通用属性，并使用import语句在实际样式表中使用它们。
Note: The file name starts with an underscore. These files are known as partials in SASS. The underscore indicates the SASS compiler that they do not contain any CSS style to be translated, only reusable variables or mixins defined. We will look into mixins later.
注意：文件名以下划线开头。 这些文件在SASS中被称为局部文件。 下划线表示SASS编译器不包含任何要转换CSS样式，仅定义了可重用变量或mixins。 稍后我们将研究mixin。
To import the variables in your actual SCSS file, you could use the following syntax:
要将变量导入实际的SCSS文件中，可以使用以下语法：
Note that we neither added the extension .scss or the underscore. But beware of not having two separate files of the same name: one with underscore and another without underscore. It is a good practice to save all your partials in a separate folder to avoid confusion.
请注意，我们都没有添加扩展名.scss或下划线。 但是要注意不要有两个同名的独立文件：一个带有下划线，另一个没有下划线。 最好将所有部分保存在单独的文件夹中，以免造成混淆。
混合蛋白 (Mixins)
Mixins are very useful to declare reusable styles for your application.
Mixins对于为您的应用程序声明可重用样式非常有用。
定义一个mixin： (Defining a mixin:)
Let us consider you need multiple containers that will be a flex box, with wrapping action and aligns children in the centre (both horizontal and vertical). You could define a mixin in the following way:
让我们考虑一下，您需要多个容器，这些容器将是一个柔韧性框，具有包裹作用，并使子项在中心对齐(水平和垂直)。 您可以通过以下方式定义混合：
使用mixin： (Using a mixin:)
That’s easy. But mixins do not stop here. You can also send parameters and contents in mixins.
这很简单。 但是，mixins并不止于此。 您还可以在mixin中发送参数和内容。
发送参数： (Sending parameters:)
Notice the mixin above. We are trying to create a reusable border style with configurable border-radius and width. Here, 4px and 1px are the default values for border-radius and border-width respectively, just in case someone misses to pass the parameter. To use this mixin, you could refer the following snippet:
注意上面的mixin。 我们正在尝试创建具有可配置的border-radius和width的可重用边框样式。 在这里，4px和1px分别是border-radius和border-width的默认值，以防万一有人错过传递参数的情况。 要使用此mixin，您可以参考以下代码段：
The parameters part can be skipped if the default values are fine for you. But if you want to pass one of the parameters, it is easy to write the following code and it will work:
如果默认值适合您，则可以跳过参数部分。 但是，如果要传递参数之一，则可以很容易地编写以下代码，并且可以运行：
You can pass the border-radius and skip the other ones as this is the first parameter. But how do we skip the border-radius and pass only the width parameter? This way -
您可以传递边界半径，而跳过其他半径，因为这是第一个参数。 但是，我们如何跳过边界半径并仅传递width参数？ 这条路 -
嵌套的Mixins： (Nested Mixins:)
混合内容： (Mixins with content:)
Mixins can also content some extra style/content that you might want to provide, denoted by the @content keyword.
@content您可能希望提供的一些额外样式/内容，以@content关键字表示。
在内容中使用mixin： (Using mixin with content:)
Mixin +进口 (Mixin + Imports)
It is a good practice to store your mixins in one a separate file that do not contain any CSS declarations and use them using the Import statement.
最好将mixins存储在一个单独的文件中，该文件不包含任何CSS声明，并通过Import语句使用它们。
SASS中有用的内置功能 (Useful built-in functions in SASS)
SASS has many built in functions, I am listing four useful functions for playing with colours and opacity.
SASS具有许多内置函数，我在此列出了四个用于处理颜色和不透明度的有用函数。
减轻： (Lighten:)
Can lighten a colour to the percentage specified.
可以使颜色变淡到指定的百分比。
Syntax:
句法：
As you can see, the first parameter of the function is the colour itself and the second parameter is the percentage to which you want to lighten the colour.
如您所见，该函数的第一个参数是颜色本身，第二个参数是您要淡化颜色的百分比。
变暗： (Darken:)
Similar parameters like lighten, does the opposite — darkens any colour to the specified percentage.
类似的参数(例如，变亮)却相反-将任何颜色变暗到指定的百分比。
Pretty handy, isn’t it?
很方便，不是吗？
透明化： (Transparentize:)
Makes any colour transparent.
使任何颜色透明。
The above code results in this:
上面的代码导致：
SASS或“扩展”关键字中的继承 (Inheritance in SASS or the ‘Extends’ keyword)
You can inherit or extend the properties of any class or other selectors using the extends keyword in SASS.
您可以使用SASS中的extend关键字继承或扩展任何类或其他选择器的属性。
We defined some styles in the common-error class and using the extends keyword, we will be able to use the same styles in another class (here email-error).
我们在common-error类中定义了一些样式，并使用extends关键字，我们将能够在另一个类中使用相同的样式(此处为email-error )。
The above code when translated into CSS, results in the following styles:
上面的代码转换为CSS时，具有以下样式：
At this point you might wonder why not use mixins here or which would be the better approach — mixins or extends? I have included two links in the end and strongly recommend to go through them before confirming either approach.
在这一点上，您可能想知道为什么不在这里使用mixin或哪种更好的方法-mixin或扩展？ 最后，我提供了两个链接，强烈建议您在确认任何一种方法之前先仔细阅读它们。
对于循环和每个循环： (For loops and Each loops:)
You can use loops in SASS to write repetitive styles used in your applications like:
您可以在SASS中使用循环来编写应用程序中使用的重复样式，例如：
For loops in SASS can be used to iterate through numbers.
SASS中的for循环可用于遍历数字。
This above snippet can be converted to the following code using the SASS for loop feature:
可以使用SASS for loop功能将以上代码片段转换为以下代码：
Here, $width is the value of each iteration. Notice the use of the iterating value in the class-name. #{$variable} — you can use this syntax anywhere in your SASS code to combine variables with other strings.
在这里， $width是每次迭代的值。 注意在类名中使用了迭代值。 #{$variable} -您可以在SASS代码中的任何位置使用此语法，以将变量与其他字符串组合。
Each loops in SASS can be used to iterate through Lists. Lists in SASS are basically arrays of some values. We can have a list of strings/names and traverse the same. The syntax of each loop is little different from for loop. It starts with @each keyword and used in instead of through. Check the snippets below:
SASS中的每个循环均可用于遍历列表。 SASS中的列表基本上是一些值的数组。 我们可以有一个字符串/名称列表，并遍历它们。 每个循环的语法与for循环几乎没有什么不同。 它始于@each关键字和使用in ，而不是through 。 检查以下片段：
So we have a list of colours (or colors ????) and using each loop, we can get the following result:
因此，我们有一个颜色列表(或颜色????)，使用每个循环，我们可以得到以下结果：
SASS中的地图 (Maps in SASS)
Maps is a data structure of key value pairs. You can iterate through maps using SASS.
映射是键值对的数据结构。 您可以使用SASS遍历地图。
Lets create a map of headers with different font-sizes:
让我们创建具有不同字体大小的标题的映射：
You can traverse through the map using each loop and assigning the key value into some variables. Example given below:
您可以使用每个循环遍历地图，并将键值分配给一些变量。 下面给出示例：
The above loop would translate into the following CSS code;
上面的循环将转换为以下CSS代码；
These were the most useful features according to me in SASS. There are other features like if/else and functions that you can refer.
在我看来，这些是SASS中最有用的功能。 还有其他功能，例如if / else和可以引用的功能。
Thanks a lot for reading. Hope this helped.
非常感谢您的阅读。 希望这会有所帮助。
Articles about mixins vs extends —
有关mixin与扩展的文章-
Happy SASSing!
祝你生日快乐！
翻译自: https://levelup.gitconnected.com/the-useful-sass-features-in-a-nutshell-sass-cheatsheet-c5767340d43b