波旁威士忌在岩石上：凉爽的功能，以改善您的无礼

Bourbon提供了一些超级有用的功能，这是对Sass提供的本机功能的欢迎。 让我们看一些您应该考虑添加到玻璃杯中的酷示例。

功能

在mixin帮助我们更有效地重复样式的地方，Sass函数在逻辑上帮助我们：接受参数并返回值。 Bourbon为各种用例提供​​了一些非常方便的Sass功能。 在本教程中，我们将看一下以下选择：

• golden-ratio()
• modular-scale()
• linear-gradient
• tint()
• shade()
• em()

黄金比例（）

使用此功能，很容易计算出一定数字的黄金分割率 （1：1.6180339）。 作为一个提示，我应该提一下，此函数正在逐渐被弃用，取而代之的是modular-scale()函数。 例如，如果要在版式中创建“有意义的”关系，则golden-ratio()函数很有用。 布局中的结构关系也是如此。

印刷规模

如果要使用黄金比例生成模块化的比例尺来构造各种类型的大小，则可以应用此函数来计算任意数字的黄金平均值 。 使用它来建立印刷比例很简单：

函数的第一个参数需要一个像素或em值-在此由上面定义的Sass变量表示。 第二个参数需要一个整数作为增量/减量值 （…-3，-2，-1、0、1、2、3…），以便使用黄金比例上下移动刻度。

这是使用黄金比例的印刷比例：

萨斯：

$base-font-size: 10px

body
  font-size: $base-font-size

.footnote
  font-size: golden-ratio($base-font-size, -1)
  // decrement size value proportional to golden ratio by factor 1
h3
  font-size: golden-ratio($base-font-size, 1)
h2
  font-size: golden-ratio($base-font-size, 2)
  // increment size value proportional to golden ratio by factor 1
h1
  font-size: golden-ratio($base-font-size, 3)

CSS输出：

body {
  font-size: 10px;
}

.footnote {
  font-size: 6.18px;
}

h3 {
  font-size: 16.18px;
}

h2 {
  font-size: 26.179px;
}

h1 {
  font-size: 42.358px;
}

如果需要舍入输出，可以使用Sass的内置函数来实现此目的：

• abs()
• floor()
• ceil()

萨斯：

.footnote
  font-size: floor( golden-ratio($base-font-size, -1) )

引擎盖下

在内部，黄金比例函数使用的是模块化比例函数，其中比例变量$golden用于黄金比例。

萨斯：

@function golden-ratio($value, $increment) {
  @return modular-scale($value, $increment, $golden)
}

注意：奇妙的Bourbon Neat网格框架默认情况下还对装订线和列使用黄金分割率。

模块化规模（）

如果您想使用“更有意义的字体”，并希望基于某种数字关系来为各种字体大小计算模块化比例，则此功能可能对您很有趣。 它可以为您计算各种模块化比例—黄金比例只是十七种预烤选项之一。

萨斯：

$base-font-size: 10px
// Your choice of ratio saved in a variable to change it in one place
// Here I used the double-octave ratio
$type-of-scale: $double-octave

body
  font-size: $base-font-size

.footnote
  font-size: modular-scale($base-font-size, -1, $type-of-scale)

h3
  font-size: modular-scale($base-font-size, 1, $type-of-scale)

h2
  font-size: modular-scale($base-font-size, 2, $type-of-scale)

h1
  font-size: modular-scale($base-font-size, 3, $type-of-scale)

标度变量

波旁威士忌针对各种比例准备了这些预定义比例的变量。 为了创建一致的设计，最好不要在一个项目中为印刷比例混合不同的比例。 通过确定最能反映您意图的一个比例来保持其优雅。

萨斯：

$base-font-size: 10px

h2
  font-size: modular-scale($base-font-size, 2, 1.6180)

线性梯度（）

如果您需要将线性渐变与背景图像混合在一起，则此功能将节省大量代码。 渐变的颜色由开始颜色 ， 结束颜色和两者之间的可选终止色点定义 。 这些附加的色标使您可以在起始颜色和结束颜色之间创建更复杂的过渡，或者提供更彩色的渐变。

看看这个可怕的渐变。 在这里，我认为很容易看到linear-gradient()函数如何工作以及如何利用它：

萨斯：

.horrible-gradient
  +background-image(linear-gradient(
    45deg,                // directon of gradient line
    red 10%,              // starting color
    yellow 15%,   // S    // bleeds into red
    yellow 40%,   // T
    orange 45%,   // O    // bleeds into yellow
    orange 50%,   // P
    orange 70%,   // S    // bleeds into green
    green 90%)            // ending color
  )
    height: 50px

对于颜色，您可以选择提供% ， px或em值。 这些定义了该颜色应该延伸的距离。 不过，您可能大部分时间应该坚持使用% 。 如果不提供百分比作为极限值，则颜色将均匀地拉伸，除以渐变中的颜色数量。

您可以选择为第一个参数提供角度-可以是value + deg形式，也to是direction ：

• 45deg
• 90deg
• to left top
• to right
• to left

等等。

Sass：具有方向参数-从左到右

.gradient
  +background-image(linear-gradient(to right, yellow 50%, blue 60%))
  height: 50px

渐变从左向右流动

或者使用hsla()函数和多个linear-gradient()函数更复杂的东西：

萨斯：

.gradient
  +background-image(linear-gradient(
    hsla(0, 100%, 100%, 0.25) 0%,
    hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
    linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  height: 50px

色调和阴影颜色功能

您可能已经熟悉Sass内置的功能，如lighten()和darken()类的颜色，它们可以完全满足您的期望。 为了您的方便，波旁威士忌还提供了另外两种出色的色彩功能。 这两个函数均使用颜色和百分比参数来微调颜色混合。

着色（）

色彩功能通过将其与白色混合来改变颜色。 它需要第二个参数，该参数取要与颜色混合的白色的百分比。

萨斯：

$light-blue: #2F7DD1

.tint
  background: tint($light-blue, 25%)
  height: 100px

这没有tint（）：

这是与tint（）一起使用的：

shade（）

阴影功能通过将其与黑色混合来改变颜色。 此功能还使用颜色和百分比参数来微调颜色混合。

萨斯：

$light-blue: #2F7DD1

.shade
  background: shade($light-blue, 25%)
  height: 100px

在这里，我们看到没有shade（）会发生什么：

这里是shade（）：

em（）

此功能为您计算em的像素。

萨斯：

font-size: em(12)

CSS输出：

font-size: 0.75em;

干杯!

到目前为止，这已经很好地覆盖了波旁威士忌。 在上两节教程中，我们详细介绍了它提供的一些最有用的mixin和功能。

在本系列的下一部分中，我们将介绍Bourbon Neat：Sass和Bourbon的网格框架。

翻译自: https://webdesign.tutsplus.com/tutorials/bourbon-on-the-rocks-cool-functions-to-improve-your-sass--cms-24798