sass 常用函数_Sass函数可启动样式表

sass 常用函数

This is the updated version of an article originally published on November 11, 2014.

这是最初于2014年11月11日发布的文章的更新版本。

Sass has a number of built-in functions to help you set up the styles for your project a lot quicker and easier.

Sass具有许多内置功能，可帮助您更快，更轻松地设置项目样式。

Let’s dive into a few of them!

让我们深入探讨其中的一些！

使萨斯变暗和变暗 (The Darken and Lighten Sass Functions)

Possibly two of the best-known functions in this list, I’m going to count these as one because they do the same thing, but in different directions.

在此列表中，可能有两个最著名的函数，我将它们视为一个，因为它们执行相同的操作，但方向不同。

As the names suggest, darken and lighten will darken and lighten a color by a certain percentage respectively. You could use them on a button’s hover state or throughout a site to create hierarchy. Here’s how:

顾名思义， darken和lighten将分别使颜色变暗和变亮一定百分比。 您可以在按钮的悬停状态或整个站点上使用它们来创建层次结构。 这是如何做：

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

The second argument in these two functions takes a percentage value by which to darken/lighten a color. This way you don’t have to look up the hex for a slightly lighter color every time you want an easy interaction state. For example, you could do this:

这两个函数中的第二个参数采用百分比值，通过该值可以使颜色变暗/变亮。 这样，您每次需要一个简单的交互状态时，都不必查找十六进制颜色稍浅的颜色。 例如，您可以这样做：

.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}

Which compiles into this:

编译成这样：

.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}

Using these functions means that you could create an effective color palette that can remain consistent throughout your project. If, for instance, you have highlight and inactive state colors based off of a main brand color and your client decides to change their main color midway through development (it happens more than I care to admit…), you only have to change one value and see it cascade throughout the rest of a site.

使用这些功能意味着您可以创建一个有效的调色板 ，在整个项目中保持一致。 例如，如果您根据某主要品牌颜色使用了突出显示和无效状态的颜色，并且您的客户决定在开发过程中更改其主要颜色(这种情况比我承认的要多……)，则只需更改一个值并在整个网站的其余部分看到它。

透明化和透明化Sass函数 (The Opacify and Transparentize Sass Functions)

Still sticking with colors, opacify and transparentize make colors more or less opaque respectively.

颜色，还在坚持opacify和transparentize使色彩或多或少不透明的分别。

Personally, I’ve found these helpful when working with modals and other pop-ups where you might want the background content to fade out.

就个人而言，我发现这些在处理模态和其他弹出窗口时很有用，在这些弹出窗口中您可能希望淡出背景内容。

$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);

Unlike darken and lighten, the second argument in these two functions needs to be a decimal between 0 and 1 instead of a percentage. These functions are helpful for colors based off of a single, main brand color that permeates throughout a project. And again, by including these functions, you’re able to make a change to the main color alone and it will propagate accordingly.

与darken和lighten不同，这两个函数中的第二个参数必须是0到1之间的小数，而不是百分比。 这些功能对于基于贯穿整个项目的单一主要品牌颜色的颜色很有帮助。 同样，通过包含这些功能，您可以单独更改主要颜色，并且它将相应地传播。

You could use the values obtained with opacify and transparentize as follows:

您可以使用通过opacify和transparentize获得的值，如下所示：

.modal.focus {
  background: $main-color;
}

.modal.blur {
  background: $transparent-color;
}

.main-content {
  background: $opaque-color;
}

Which will compile into this:

它将编译为：

.modal.focus {
  background: rgba(0, 0, 0, 0.5);
}

.modal.blur {
  background: rgba(0, 0, 0, 0.2);
}

.main-content {
  background: black;
}

You can also use fade-in and fade-out to create the same effect as these, as they’re aliases for opacify and transparentize.

您还可以使用fade-in和fade-out ，以产生相同的效果，因为这些，因为他们是别名opacify和transparentize 。

补Sass功能 (The Complement Sass Function)

As the name suggests, complement will return the complement of any color that gets fed into it. This is especially useful if you’re trying to create a call-to-action on your page or view and need a bit of visual contrast. Using this built-in function alleviates the need to go and look the color up on a color wheel.

顾名思义， complement将返回输入其中的任何颜色的补码。 如果您要在页面或视图上创建号召性用语，并且需要一点视觉对比，则此功能特别有用。 使用此内置功能，无需再去色轮上查找颜色。

$main-color: #6dcff6;
$call-to-action: complement($main-color); //=> this will return #f6946d

Sass百分比功能 (The Percentage Sass Function)

Sass’s numeric functions help you create your own functions and loops. The percentage function, for instance, converts any number into a percentage, like so:

Sass的数字函数可帮助您创建自己的函数和循环。 例如， percentage函数可将任何数字转换为百分比，如下所示：

width: percentage(0.16) //=> this will return 16%

width: percentage(100px/50px); //=> this will return 200%

The percentage function doesn’t even care if you shove units like px onto the values. This makes it a candidate for easy typographic or responsive value conversion, where percentages are king. What a nice guy!

percentage函数甚至都不在乎是否将px等单位推到值上。 这使它成为易于印刷或响应式值转换 (百分比为王)的候选对象。 真是个好人！

If Sass函数 (The If Sass Function)

Sass comes with the ability to write normal if statements using @if. It does a great job in replicating what you’d find in a traditional programming language to create some fantastic conditional logic.

Sass具有使用@if编写普通if语句的@if 。 在复制您在传统编程语言中找到的内容以创建一些出色的条件逻辑方面，它做得很好。

Sass also provides an inline if function, which works much like the ternary operator in a number of other programming languages:

Sass还提供了一个内联if函数，其功能与许多其他编程语言中的三元运算符非常相似：

.foo {  
  width: if( 1 > 2, 400px, 500px); //=> this will return 500px
}

This function accepts three arguments, the first being the condition to check, the second being the output if the condition is true, and the third being the output if the condition is false.

此函数接受三个参数，第一个为要检查的条件，第二个为条件为真时的输出，第三个为条件为假时的输出。

You could use this ternary function if you wanted to create variable-dependent conditions (if the width of an article element is bigger than an aside element, for instance) in your style sheets, though the possibilities with this one are a little more open-ended.

如果您想在样式表中创建变量相关的条件(例如，如果article元素的宽度大于aside元素的宽度)，则可以使用此三元函数，尽管此方法的可能性有些开放-结束了。

Personally, I find if more useful in responsive projects. You could use this function to change properties based on otherwise unrelated variables (like the font-size of an element depending on the width of its container), or even have properties rely on variables that change at different screen sizes or displays (like changing the background image of an element for retina screens).

就个人而言，我发现在响应项目中if更有用。 您可以使用此函数根据其他不相关的变量(例如，元素的font-size取决于其容器的width )来更改属性，甚至可以使属性依赖于在不同屏幕尺寸或显示器上更改的变量(例如，更改视网膜屏幕元素的背景图片)。

结论 (Conclusion)

Sass has a number of useful functions in its built-in arsenal, and these don’t even include the ones that Compass makes available to you, should you decide to use it. In the end, it’s about what kind of workflow makes sense to you, depending on your project, team and deadlines.

Sass的内置武库中有许多有用的功能，如果您决定使用它，这些功能甚至不包括Compass所提供的功能。 最后，取决于您的项目，团队和截止日期，哪种工作流程对您有意义。

Are there any Sass or Compass functions you’ve come across that you think should be added to the list or that you simply find useful in your projects? Let us know in the comments below.

您是否遇到了您认为应该添加到列表中的Sass或Compass函数，或者只是发现对您的项目有用？ 在下面的评论中让我们知道。

翻译自: https://www.sitepoint.com/sass-functions-kick-start-style-sheets/

sass 常用函数