sass导入sass_如何使用Sass Mixins和Loops

sass导入sass

by Jason Arnold

杰森·阿诺德(Jason Arnold)

如何使用Sass Mixins和Loops (How to use Sass Mixins and Loops)

My current love affair with Sass continues and we’ve taken it to the next level. What started out as a faster, less-syntaxy way to write my CSS, has now grown into a much more committed relationship.

我目前与Sass的恋情仍在继续，我们已将其提升到一个新的水平。 最初以一种更快，语法更少的方式编写CSS的方式 ，如今已发展成为一种更加承诺的关系。

We are ready to experiment a little bit. I’ve recently tried my hand at two of Sass’s most helpful features, Mixins and Loops.

我们准备进行一些实验。 我最近尝试了Sass的两个最有用的功能Mixins和Loops 。

混合和循环 (Mixins and Loops)

With Mixins and Loops, the lines get blurred a bit between CSS and another coding language like JavaScript. When you think about your code in terms of functions that you define in one place and call in another, or loops that iterate over a piece a code a certain number of times, you probably don’t think of CSS. I know I never did.

使用Mixins和Loops，CSS和另一种编码语言(如JavaScript)之间的界线变得有些模糊。 当您根据在一个位置定义并在另一个位置调用的函数的方式来考虑代码时，或者在某个代码中多次迭代某个代码的循环时，您可能不会想到CSS。 我知道我从没做过。

CSS is for styling. Why would I ever need to loop over a style or call a style defined somewhere else? That doesn’t even make sense in terms of CSS. It’s totally foreign. Plus, isn’t there something about ‘separation of concerns’ (SoC)?

CSS是用于样式的。 为什么我需要遍历样式或调用其他地方定义的样式？ 就CSS而言，这甚至毫无意义。 这完全是外国的。 另外，关于“ 关注点分离 ”(SoC)是否还没有东西？

But thinking more about SoC, maybe this way does make more sense.

但是更多地考虑SoC，也许这种方式更有意义。

CSS should handle the styling of the site, right? So, why have I been using JavaScript’s .style() method or jQuery’s .css() method to handle this? Why can’t I dynamically change styling inside of CSS?

CSS应该处理网站的样式，对吗？ 那么，为什么我一直使用JavaScript的.style()方法或jQuery的.css()方法来处理此问题？ 为什么我不能在CSS内部动态更改样式？

Well, Sass gets you a few steps closer to that. Whatever side of the SoC fence you fall on, Mixins and Loops in Sass can save some serious time and effort when styling your sites.

好吧，Sass使您更进一步。 无论您落在SoC防护的哪一侧，Sass中的Mixins和Loops都可以在样式化站点时节省大量的时间和精力。

混合蛋白 (Mixins)

I’ll start with Mixins. In the simplest terms, you can think of a Mixin like a JavaScript function for CSS. You define a Mixin somewhere in your Sass code and pass it parameters that you reference inside of the Mixin. Then, somewhere else in the Sass code, you call that Mixin and pass in arguments that correspond to the parameters and the whole thing gets run. Confusing? Yeah, a little, so lets go through an example.

我将从Mixins开始。 简单来说，您可以将Mixin视为CSSJavaScript函数。 您可以在Sass代码中的某处定义一个Mixin，然后将它引用的参数传递给Mixin内部。 然后，在Sass代码中的其他地方，调用Mixin并传入与参数相对应的参数，然后整个过程就会运行。 令人困惑？ 是的，有一点，让我们来看一个例子。

First you define a Mixin in Sass. This is done with =. The syntax of a Mixin definition looks like this (remember that the $ is used in Sass to define variables):

首先，您在Sass中定义一个Mixin。 这是通过=完成的。 Mixin定义的语法如下所示(请记住，在Sass中使用$来定义变量)：

=mixinName($param1, $param2, $etc)
  Sass code goes here...

This Mixin can then be called anywhere else in your code that you need it. And you pass along the arguments that the Mixin needs and Sass converts all of that to CSS.

然后可以在您需要的代码中的其他任何地方调用此Mixin。 然后您传递了Mixin所需的参数，Sass将所有参数转换为CSS。

Here is an example of a Mixin I wrote to define a basic box.

这是我为定义基本框而编写的Mixin的示例。

=box($height, $width, $backgroundColor)
  height: $height
  width: $width
  background-color: $backgroundColor
  margin-bottom: 5px
  border: 1px solid black

I’ve defined my three parameters after the name of the Mixin, in this case it is box. Then I have Sass code, some of which calls on the parameters. I can now use this Mixin elsewhere in my Sass code whenever I want to define a box with these characteristics. I can call the Mixin as many times as I want, passing in different arguments each time. You call a Mixin with the + character.

我已经在Mixin的名称之后定义了三个参数，在本例中为box 。 然后我有Sass代码，其中一些调用参数。 现在，只要我想定义具有这些特征的盒子，就可以在我的Sass代码的其他地方使用此Mixin。 我可以根据需要多次调用Mixin，每次都传递不同的参数。 您用+字符调用Mixin。

.box-1
  +box(100px, 200px, tomato)
  
.box-2
  +box(50px, 100px, rbga(100, 255, 255, 0.5)

The page will now render these CSS properties onto the parts of the page with the .box-1 and .box-2 classes. Here is the result.

现在，页面将使用.box-1和.box-2类将这些CSS属性呈现到页面的各个部分。 这是结果。

It may be a little underwhelming with only 2 boxes. But if you have a site where you need to define several similar items, Mixins can save you a ton of time. And if you need to change or add a property to all these, you have only one place to go.

只有2个盒子可能有点让人不知所措。 但是，如果您有一个站点需要定义几个类似的项目，则Mixins可以为您节省大量时间。 而且，如果您需要更改或添加所有属性，那么您只有一个地方。

If I wanted to make these boxes into ovals by adding a border-radius property, I just do it once in the Mixin rather than for each box in my CSS.

如果我想通过添加border-radius属性使这些框成为椭圆形，则只需在Mixin中执行一次，而不是对CSS中的每个框执行一次。

循环 (Loops)

The second Sass feature covered here is Loops and they are exactly what you think they are. The concept is the same as in most other programming languages. You have a piece of code that needs to be iterated over a certain number of times.

此处介绍的第二个Sass功能是循环，它们正是您所认为的。 该概念与大多数其他编程语言相同。 您有一段代码需要迭代一定次数。

Sass has these as options too and they are called control directives. They start with the @ symbol and the syntax is pretty easy to understand. These include an @if, @for, @each, and @while. I’ll cover the @for here today but you can read more about all of these here.

Sass也将这些作为选项，它们被称为控制指令 。 它们以@符号开头，语法很容易理解。 这些包括@if ， @for ， @each和@while 。 我今天将在这里介绍@for ，但您可以在这里阅读更多有关所有这些信息 。

The @for control directive comes in two different options , the to and through options. This is in reference to the <end> of the loop. to is exclusive and through is inclusive.

@for控制指令有两个不同的选项， to和through选项。 这是在参考<e ND>所述的lo运算。 to是排他性的e and t并且是包括在内的。

The syntax for the through version of an @for loop is as follows:

@for循环的through版本的语法如下：

@for <$variable> from <start> through <end>
  Sass code goes here...

The to version is the same. Just replace through with to.

to版本是相同的。 只需更换through与to 。

The $variable can be whatever name you want it to be. The <start>; and <end> values should be integers.

$variable可以是您想要的任何名称。 <sta rt> ; and ; and <end>值应为整数。

Here is an example I wrote that creates 10 divs on the page, each wider than the last and a slightly different color. I also included them in a Mixin so I could pass in parameters and call it wherever I needed to.

这是我写的一个示例，该示例在页面上创建10个div，每个div都比上一个宽，并且颜色略有不同。 我还将它们包含在Mixin中，因此我可以传递参数并在需要的地方调用它。

=graph($height, $baseColor)
  @for $i from 1 through 10
    .line-#{$i}
      height: $height
      width: 2em * $i
      background-color: rgba($i * ($baseColor + 20), $i *  ($baseColor + 10), $i * ($baseColor + 5), 1)

This is creating 10 different CSS selectors of .line-1, .line-2, and so forth. Each selector has the height specified by $height, a width of 2em * the value of i and a background color based on the $baseColor number passed in.

这将创建10个不同的.line-1 ， .line-2等CSS选择器。 每个选择器的高度由$height height指定， 宽度为2em * i的值 ，以及基于传入的$baseColor 数字的背景色。

I then call this Mixin just like any other

然后我将其称为Mixin

+graph(10px, 10)

And here is the result:

结果如下：

You can also add things like CSS pseudo classes to these loops. Here is another example with the :hover pseudo class.

您还可以将CSS伪类之类的内容添加到这些循环中。 这是带有:hover伪类的另一个示例。

=stack
  @for $i from 1 through 30
    .stack-#{$i}
    position: absolute
    height: 100px
    width: 100px
    top $i + 10px
    left $i + 10px
    background-color: rgba($i * 1, $i * 2, $i * 3, 1)
    
    &:hover
      background-color: rgba($i * 2, $i * 4, $i * 8, 1)

Call this Mixin like so (no arguments needed):

像这样调用此Mixin(无需参数)：

+stack

The loop will run once when the page renders and then again on each individual .stack element when the mouse hovers over it. This changes the background color.

当页面呈现时，循环将运行一次，然后将鼠标悬停在每个单独的.stack元素上。 这将更改背景颜色。

It was much easier and faster to write this Mixin with an @for loop rather than writing out 299 lines of CSS. And again, if I want to change something for all of them I do it once instead of 299 times.

用@for循环编写此Mixin比写出299行CSS更加容易和快捷。 再说一次，如果我想为所有人更改某项内容，则只执行一次，而不是299次。

The result is underwhelming since you can’t hover on the screenshot. Here is a CodePen with all the above examples.

由于您无法将鼠标悬停在屏幕截图上，因此结果令人难以理解。 这是上面所有示例的CodePen 。

These are only two of the great tools that Sass offers. They can help you create some great looking and functional CSS in a fraction of the time.

这些只是Sass提供的两种出色工具。 它们可以帮助您在短时间内创建出外观精美且功能强大CSS。

I hope you enjoyed this post. Please let me know if you have any questions. Thanks!

希望您喜欢这篇文章。 请让我知道，如果你有任何问题。 谢谢！

翻译自: https://www.freecodecamp.org/news/sass-mixins-and-loops-171122499a2/

sass导入sass