sass导入sass_速记Sass Mixins

sass导入sass

Ever since I started writing Sass I’ve always loved using mixins. Instead of duplicating style declarations a mixin will handle that for you in one fell swoop. Mixins are a very powerful feature of Sass that we don’t have in the CSS spec… Yet! Luckily, as long as Sass is still around and more company’s adopt it, the more code can stay DRY and modular within the codebase.

自从我开始编写Sass以来，我一直很喜欢使用mixins。 无需复制样式声明，mixin可以一劳永逸地为您处理。 Mixins是Sass的一项非常强大的功能，我们在CSS规范中没有此功能……但是！ 幸运的是，只要Sass仍然存在并且更多公司采用它，更多的代码就可以在代码库中保持DRY和模块化。

Let’s see how this works with the .sass syntax example I have below!

让我们看看下面的.sass语法示例如何工作！

There are two types of Sass you can write. .scss which uses semi-colons and curly braces and .sass which doesn’t make use of those characters.

您可以编写两种类型的Sass。 .scss它使用分号和花括号和.sass不使用这些字符。

场景 (The Scenario)

Let’s say you have many components on a page, possibly some type of card component laid out in a grid. And that card, or parent component has children that are all horizontally and vertically centered within it. No matter how you shake it, these children will always be vertically and horizontally centered.

假设您在页面上有很多组件，可能是某种类型的卡片组件以网格的形式布置。 该卡或父组件的子代在其中水平和垂直居中。 无论您如何摇晃，这些孩子都将始终垂直和水平居中。

How many times have we used different types of hacks to achieve one of the most difficult things we have had to do in the history of CSS? I know, that struggle was real, but today we can achieve that in just three lines of code! Don’t believe me?

我们有多少次使用不同类型的黑客来实现我们在CSS历史上必须要做的最困难的事情之一？ 我知道，这种斗争是真实的，但是今天我们只需三行代码就可以实现这一目标！ 不相信我吗

We’re going to couple the flexbox properties with the mixins shorthand to create a block of code that can be used all over the place if need be.

我们将flexbox属性与mixins速记结合起来，创建一个代码块，如果需要的话可以在各处使用。

The great thing about mixins is that we can create multiple mixins for different scenarios and just swap them out where necessary.

mixin的优点在于我们可以为不同的场景创建多个mixin，并在必要时将它们交换出去。

代码-之前 (The Code - Before)

A lot of times, the syntax we use to create mixins reflect the examples below.

很多时候，我们用于创建mixin的语法反映了以下示例。

@mixin center-content
  display: flex
  justify-content: center
  align-items: center

.parent-container
  @include center-content

We declare a mixin using the @mixin syntax followed by the mixin name. We than follow that by the styles that will be applied when we use it.

我们使用@mixin语法@mixin后的mixin名称声明一个mixin。 然后，我们将遵循使用它时将应用的样式。

When we decide to use that mixin, we add @include followed by the name of the mixin, within our class. This compiles down to this:

当我们决定使用该mixin时，在类中添加@include然后加上mixin的名称。 编译为：

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

代码-之后 (The Code - After)

Instead of using the “@” symbol to declare the mixin and include it, we can start using the “=” and “+” symbols as shorthands respectively when using the .sass syntax.

当使用.sass语法时，我们可以开始分别使用“ =”和“ +”符号作为简写，而不是使用“ @”符号来声明并包括它。

We can do the same exact thing as above, using this awesome shorthand.

我们可以使用这个简捷的速记来完成与上述相同的操作。

=center-children
  display: flex
  justify-content: center
  align-items: center

.parent-container
  +center-children

Creating mixins this way is just a faster way of doing it. The code above compiles down to this:

以这种方式创建mixins只是一种更快的方法。 上面的代码编译为：

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Pretty neat right? There are so many cool tricks and things you can do with Sass that you still can’t do with CSS, but that’s rapidly changing. CSS is amazing and I’m proud to consider myself a CSS developer. CSS is starting to implement some of the cool things that Sass, Less, and Stylus can do like CSS variables (Custom Properties). Even support for CSS Nesting should be coming soon!

很整洁吧？ 使用Sass可以完成很多很棒的技巧和事情，而CSS仍然无法做到，但是这种情况正在Swift改变。 CSS很棒，我为自己是CSS开发人员而感到自豪。 CSS已开始实现Sass，Less和Stylus可以像CSS变量(“ 自定义属性” )一样执行的一些很酷的操作。 甚至即将支持CSS嵌套 ！

结语 (Wrapping Up)

I hope you enjoyed this snippet of knowledge if you are writing your CSS styles using the Sass preprocessor. Like I said, check out the Sass docs for all the awesome things you can do. And don’t forget, CSS is amazing and it isn’t going anywhere!

如果您使用Sass预处理器编写CSS样式，希望您喜欢这些知识。 就像我说的那样，请查看Sass文档，了解您可以做的所有令人敬畏的事情。 而且请不要忘记，CSS很棒，而且无处不在！

翻译自: https://www.digitalocean.com/community/tutorials/sass-sass-mixins-shorthand

sass导入sass