zurb是什么网站_使用Zurb Foundation掌握高级Sass和工作流程（第1部分）

zurb是什么网站

You know CSS; you got into Sass as someone told you that it is that better CSS with wings. I get to tell you that you heard it right! Then you started learning it, explored through this Starter Guide and learned basic topics like variables, mixins, nesting, and imports.

您知道CSS； 有人告诉您，这是更好的带翅膀CSS。 我要告诉你，你没听错！ 然后，您开始学习它，并通过本入门指南进行了探索，并学习了诸如变量，mixin，嵌套和导入之类的基本主题。

After learning Sass basics, the question's on your mind might be,

在学习了Sass的基础知识之后，您可能会想到这个问题，

• What are the advanced topics moving ahead?
  前进的高级主题是什么？
• How do I implement all of this in a web framework?
  如何在Web框架中实现所有这些功能？
• How do I create websites out of it?
  我如何利用它创建网站？
• How do I create WebApps out of it?
  如何使用它创建WebApp？
• Does Sass have those conditional, loops, functions like other languages?
  Sass是否具有像其他语言一样的条件循环，函数？

This is a two part article series where in the first half, we will look to cover advanced Sass topics like data types, maps, if directive, loops, and most importantly Vanilla functions such as colors, strings, lists and numbers. If you are just starting out in Sass, then also please follow along as I have some links in the below section which will help you get started

这是一个由两部分组成的系列文章，其中的上半部分将探讨Sass的高级主题，例如数据类型，映射， if指令，循环以及最重要的Vanilla函数（例如颜色，字符串，列表和数字）。 如果您只是从Sass开始，那么也请按照以下步骤操作，因为我在以下部分中提供了一些链接，这些链接将帮助您入门。

Take a look at our other Sass articles

看看我们其他的Sass文章

Moving ahead, to the second half we will cover about on how to implement all of this learning within the workflow of the most advanced responsive front-end framework, Zurb Foundation.

继续进行到下半年，我们将介绍如何在最先进的响应式前端框架Zurb Foundation的工作流中实施所有这些学习。

基础和安装 ( Basics & Installation )

Sass is a preprocessor that will produce clean and efficient CSS code and will cut your development time to half (if not more). Sass has more functionality than traditional CSS. Yes, it's true that Vanilla CSS has its own fun, but you can't reject the fact that stylesheets are getting larger, complex and harder to maintain day by day.

Sass是一个预处理器，它将产生干净而有效CSS代码，并将您的开发时间减少一半（甚至更多）。 Sass具有比传统CSS更多的功能。 是的，Vanilla CSS确实有其自身的乐趣，但是您不能拒绝样式表越来越大，复杂且难以维护的事实。

Please note that this article assumes you to have basic knowledge of Sass in general. If that's not the case with you, then you should start here with this Basic Guide for starting out. For Sass Mixins, you can check out this tutorial here by Samuel Oloruntoba

请注意，本文假定您具有Sass的基本知识。 如果您不是这种情况，那么您应该从本基本指南开始。 对于Sass Mixins，您可以在此处查看 Samuel Oloruntoba的本教程

If you are looking to Install Sass, then click here.

如果您要安装 Sass，请单击此处 。

Sass数据类型 ( Sass Data Types )

Sass is a Programming Language. Isn’t it? Data types exist in most of the programming languages, and Sass is no exception to that. A data type is a way to classify data into specific categories for different purposes.

Sass是一种编程语言。 是不是 数据类型存在于大多数编程语言中，Sass也不例外。 数据类型是一种出于不同目的将数据分类为特定类别的方法。

Sass data types may not seem very useful to you right now, but their’s main strength is when they applied to other features that Sass offers. Let's look into all the eight data types that exist in Sass.

Sass数据类型现在对您似乎不太有用，但是它们的主要优点是将它们应用于Sass提供的其他功能。 让我们研究一下Sass中存在的所有八种数据类型。

/* Strings */
$a: harry; // Unquoted string
$b: 'harry'; // Single Quoted string
$c: "harry"; // Double Quoted string

/* Numbers */
$d: 1; // Integer
$e: 1.5; // Float
$f: 1rem; // rem Values (CSS units)
$g: 2em; // em Values (CSS units)
$h: 5px; // px Values (CSS units)

/* Booleans */
$i: true; // True
$j: false; // False

/* Null */
$k: null; // Null

/* Lists */
$l: 'Raleway','Open Sans','Lato'; // comma separated elements
$m: 3px 4px 8px; // space separated elements
$n: 'Roboto' 'Ubuntu', 15px 1.3em; // multi-list with two lists

/* Maps */
$o: (
'font-family': 'Open Sans',
'font-size': 2rem,
'color': blue
); // We will talk about maps later on. 

/* Colors */
$p: DarkBlue; // Color Name
$q: #00008B; // Hex
$r: rgba(255, 0, 0, 0.5); // RGB/RGBA
$s: hsl(10, 30%, 50%); // HSL/HSLA

/* Function References */
$t: darken($q); // We will talk about functions later on.

萨斯地图 ( Sass Maps )

Version 3.0 Sass brought a new data type called map. It may be confusing for some but merely think of it as key value pairs. There are a lot of functions by default (which we will discuss later on) that lets you manipulate maps.

Sass 3.0版带来了一种称为map的新数据类型。 对于某些人可能会感到困惑，但仅将其视为键值对。 默认情况下有很多功能（我们将在后面讨论）可以让您操作地图。

Please note that the keys must be unique and values can include any of Sass data-type, including lists and other maps nested within it.

请注意，键必须是唯一的，并且值可以包含Sass数据类型中的任何一种，包括列表和嵌套在其中的其他映射。

$map1 : (
  'Key': 'Value',
  'AnotherKey': 3rem
); // Key Value Pair

$map2 : (
  'key1' : 'value1',
  'key2' : 'value2',
  'key3' : 'value3'
); // Another Key value Pair

$map3 : (
  'KeyName': 'You can\'t escape me',
  'String':  string,
  'Number':  234,
  'List':  ( width 2s, height 2s, transform 2s ),
  'NestedMap':  (
    'NestedKey':  'I am deeply nested',
    'url':  './images/harry.svg',
    'Width':  300px
  ); // Nested Map
); // Key value pair with lists and map's nested in it

@If控制指令 ( @If control directive )

Ability to evaluate the boolean logic is an essential feature of every programming language, and Sass is no exception. The @if control directive takes a Sass expression to process it’s block of styles if the expression manages to return anything other than false or null.

评估布尔逻辑的能力是每种编程语言的基本功能，Sass也不例外。 如果表达式设法返回false或null以外的任何内容，则@if控制指令将使用Sass表达式来处理其样式块。

Relational operators (<, >, <=, >=) are supported for numbers data types, whereas equality operators (==, !=) are supported for all data types. According to official docs,

数字数据类型支持关系运算符（ < ， > ， <= ， >= ），而所有数据类型均支持相等运算符（ == ， != ）。 根据官方文档，

The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one succeeds or the @else is reached.

@if语句后可以跟几个@else if语句和一个@else语句。 如果@if语句失败， @else if顺序尝试@else if语句，直到成功或到达@else 。

@if ($prop == margin) {
  margin: $spacer * $global-margin;
} @else if ($prop == padding) {
  padding: $spacer * $global-padding;
} @else {
  @warn 'No Property Specified';
}

* If（）函数* ( *If() function * )

You can also use if else condition like a ternary operator also thanks to the Sass if function. According to official docs,

您也可以使用if else条件，例如三元运算符，这也要归功于Sass if函数。 根据官方文档 ，

The built-in if() function allows you to branch on a condition and returns only one of two possible outcomes. It can be used in any script context. The if function only evaluates the argument corresponding to the one that it will return -- this allows you to refer to variables that may not be defined or to have calculations that would otherwise cause an error (E.g. divide by zero).

内置的if()函数允许您在条件上分支，并且仅返回两个可能结果之一。 它可以在任何脚本上下文中使用。 if函数仅计算与将返回的参数相对应的参数-这使您可以引用可能未定义的变量，或者具有可能导致错误的计算（例如，除以零）。

Check out this below example in which we see whether the condition has met or not. If yes, then we will show green background color, or else it will be a purple background.

在下面的示例中查看我们是否满足条件。 如果是，则我们将显示绿色背景色，否则将显示为紫色背景。

@mixin item-styles($condition) {
  // if true then green, else purple
  $color: if($condition, green, purple);
  .items li {
    background-color: $color;
  }
}

// Show for true condition aka green
@include item-styles(true);

@media screen and (min-width: 800px) {
  // Show for false condition aka purple
  @include item-styles(false);
}

And here is the Generated CSS output,

这是Generated CSS输出，

.items li {
  background-color: green;
}

@media screen and (min-width: 800px) {
  .items li {
    background-color: purple;
  }
}

萨斯循环 ( Loops in Sass )

A loop statement allows you to iterate a statement or group of statements multiple times, which allows the code to execute repeatedly. Again, Loops in Sass is not any exception from other languages. Sass provide us with three different kinds of loops to iterate over collections

循环语句使您可以多次迭代一个语句或一组语句，从而使代码可以重复执行。 同样，Sass中的Loops也不是其他语言的例外。 Sass为我们提供了三种不同的循环来遍历集合

1. @for loop
   @for循环
2. @each loop
   @each循环
3. @while loop
   @while循环

If you know the iteration index, then you should be using a @for loop. But when you are iterating over a list or a map or a map with nested lists/map, the @each loop should be used.

如果知道迭代索引，则应该使用@for循环。 但是，当您遍历列表，地图或带有嵌套列表/地图的地图时，应使用@each循环。

According to developers (which includes me), @while has no exclusive use and should not be utilized so that you stay away from any confusions.

根据开发人员（包括我在内）的@while ， @while不能独占使用，也不应该被使用，以免造成任何混乱。

对于循环 (For Loop)

This handy @for loop comes with two options. First is to use @for $var from $start through $end. Second is to use @for $var from $start to $end.

这个方便的@for循环带有两个选项。 首先是@for $var from $start through $end使用@for $var from $start through $end 。 其次是在@for $var from $start to $end使用@for $var from $start to $end 。

Please note that once the directive hits the $end, it just ends the looping process and stops there. Here is the simple example for the @for loop which makes a block grid with iteration.

请注意，指令一旦到达$end ，它就会结束循环过程并在那里停止。 这是@for循环的简单示例，该循环通过迭代生成块网格。

// Maximum number of cells to display per direction
$max: 7; 

.grid {
  display: flex;
  flex-wrap: wrap;

  > div {
    height: 25px;
    background: #ccc;
    border: 1px solid #aaa;
  }
}

// Looping through the code
@for $i from 1 through $max {
 $equ: 100% / $i ;
 .grid.block-#{ $i } > div {
    flex: 0 0 $equ;
 }
}

And here below is the generated CSS output. As you can see we have looped through the maximum number of cells to display per direction to create a block grid. See how quickly Sass calculates everything by itself.

下面是生成CSS输出。 如您所见，我们遍历了要显示的每个方向的最大单元数，以创建块网格。 看看Sass自己计算一切的速度。

.grid {
  display: flex;
  flex-wrap: wrap; }
  .grid > div {
    height: 25px;
    background: #ccc;
    border: 1px solid #aaa; }

.grid.block-1 > div {
  flex: 0 0 100%; }

.grid.block-2 > div {
  flex: 0 0 50%; }

.grid.block-3 > div {
  flex: 0 0 33.33333%; }

.grid.block-4 > div {
  flex: 0 0 25%; }

.grid.block-5 > div {
  flex: 0 0 20%; }

.grid.block-6 > div {
  flex: 0 0 16.66667%; }

.grid.block-7 > div {
  flex: 0 0 14.28571%; }

每个循环 (Each Loop)

The @each loop is commonly used for maps or lists so that you can loop through them, rather than addressing each key separately. Here is an example for a @each loop which makes buttons based on provided color palette map.

@each循环通常用于映射或列表，以便您可以遍历它们，而不是分别寻址每个键。 这是一个@each循环的示例，该循环基于提供的调色板图制作按钮。

$button-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37
);

@each $name, $color in $button-palette {
  .#{$name} {
    background-color: $color;
    &:hover, &:focus {
      background-color: darken($color, 20%);
    }
  }
}

See the output below where you can see how this looped through the given map and added the colors to specific classes as per the key and values provided to the tool.

请参阅下面的输出，您可以在其中看到如何循环遍历给定的地图，并根据提供给工具的键和值将颜色添加到特定的类中。

.primary {
  background-color: #1779ba; }
  .primary:hover, .primary:focus {
    background-color: #0c3e5f; }

.secondary {
  background-color: #767676; }
  .secondary:hover, .secondary:focus {
    background-color: #434343; }

.success {
  background-color: #3adb76; }
  .success:hover, .success:focus {
    background-color: #1b9448; }

.warning {
  background-color: #ffae00; }
  .warning:hover, .warning:focus {
    background-color: #996800; }

.alert {
  background-color: #cc4b37; }
  .alert:hover, .alert:focus {
    background-color: #7d2c20; }

While循环 (While Loop)

As I said above that @while loops has no significant usage, but still, there is one thing about them that makes perfect sense about them. In our daily life, it's common to use or hear such words like Do this while I do this or. Don't open Computer until I clean the room, etc.

就像我在上面说的@while ， @while循环没有显着的用法，但是关于它们，有一件事对它们来说是很有意义的。 在我们的日常生活中，经常使用或听到诸如在执行此操作时执行此操作之类的词语。 在我打扫房间等之前，不要打开计算机 。

Precisely, this is what @while loop does. Check out this simple heading type scale that lets you iterate over different header sizes. Also, look how the program is adding 1 to the index after the code get executed every time.

确切地说，这就是@while循环的作用。 看看这个简单的标题类型比例，它可以让您遍历不同的标题大小。 另外，查看每次代码执行后程序如何向索引加1。

$headerSizes: 48px 40px 31px 25px 20px 16px;
$index: 1;

@while $index <= 6 {
  h#{$index}, .h#{$index} {
    font-size: nth($headerSizes, $index);
  }
  $index: $index + 1;
}

Here below in the CSS, you can see how these header sizes get's generated through the list thanks to @while loop.

在CSS的下面，您可以看到通过@while循环如何通过列表生成这些标头大小。

h1, .h1 { font-size: 48px; }
h2, .h2 { font-size: 40px; }
h3, .h3 { font-size: 31px; }
h4, .h4 { font-size: 25px; }
h5, .h5 { font-size: 20px; }
h6, .h6 { font-size: 16px; }

Again will remind you that you should be using @for or @each as per the requirements. @while feels a bit useless, may this is just why Foundation Framework doesn’t use a single while in their codebase.

再次提醒您，您应该根据要求使用@for或@each 。 @while有点用处，也许这就是为什么Foundation Framework在其代码库中不使用单个代码的原因。

Sass的香草功能 ( Vanilla Functions in Sass )

This is my favorite of the lot. A Sass function, just like every other language is that so called "subprogram" that can be called from external code. Sass does include some Vanilla functions by default in which you can give Sass the arguments for a particular function and the function will return you the value. Apart from these below, there are some extra functions that are provided by Foundation which we discuss later on in Part 2.

这是我最喜欢的东西。 就像所有其他语言一样，Sass函数是所谓的“子程序”，可以从外部代码中调用它。 Sass默认情况下确实包含一些Vanilla函数，您可以在其中为Sass提供特定函数的参数，该函数将为您返回值。 除了下面这些以外，Foundation还提供了一些额外的功能，我们将在第2部分中稍后讨论。

This section below is on how to use vanilla functions provided by Sass that you can use. If you are looking for creating your own functions, this tutorial may help you.

下面的本节介绍如何使用Sass提供的香草函数。 如果您要创建自己的函数，本 教程 可能会对您有所帮助。

颜色功能 (Color Functions)

Colors! When used correctly, can be incredibly powerful. This is where Sass comes in. Sass lets you control your colors with ease without needing you to choose and manipulate the colors. It does all that job for you.

颜色！ 正确使用时，功能非常强大。 这就是Sass的用武之地。Sass使您可以轻松控制颜色，而无需选择和操作颜色。 它为您完成所有工作。

$color: #0EA29D;

$a: darken($color, 10%); // Darken a color by 10%
$b: lighten($color, 15%); // Lighten a color by 15%
$c: saturate($color, 20%); // Saturate a color by 20%
$d: desaturate($color, 20%); // Desaturate a color by 20%
$e: adjust-hue($color, 15%); // Adjust hue of a color by 15%
$f: rgba($color, .7); // Adding Alpha Transparency
$g: grayscale($color); //  Converts a color to grayscale.
$h: complement($color); // Returns the complement of a color.

// Mix two colors, weight 50% by default.
// mix($color1, $color2, $weight:50%)
//
// 25% means that a quarter of the first color and three quarters of the second color should be used.
$mix: mix(#f00, #00f, 25%);

/* Just for demo */
.a { content: $a; }
.b { content: $b; }
.c { content: $c; }
.d { content: $d; }
.e { content: $e; }
.f { content: $f; }
.g { content: $g; }
.h { content: $h; }
.mix { content: $mix; }

The Generated CSS is here below, Sass just calculates all by itself.

生成CSS在下面，Sass自己计算所有。

.a { color: #0a7370; } /* Darken */
.b { color: #14e8e1; } /* Lighten */
.c { color: #00b0aa; } /* Saturate */
.d { color: #20908d; } /* Desaturate */
.e { color: #0e82a2; } /* Adjust hue */
.f { color: rgba(14, 162, 157, 0.7); } /* Alpha Transparency */
.g { color: #585858; } /* Grayscale */
.h { color: #a20e13; } /* Complement */
.mix { color: #4000bf; } /* Mixing two colors */

Alternatively, you can Debug the color too for different purposes. Stop! Big Word Alert, for now, think of @debug as console.log of javascript. We will talk about it later on in Part 2. In this below example, we are debugging the red, green, and blue component of the variable $color.

另外，您也可以出于不同目的调试颜色。 停止！ 目前， Big Word Alert将@debug视为javascript的console.log 。 我们将在第二部分稍后讨论它。 在下面的示例中，我们正在调试变量$color的red ， green和blue分量。

$color: #0EA29D;

/* Debugging a color */
$red: red($color); // Gets the red component of a color.
$green: green($color); // Gets the green component of a color.
$blue: blue($color); // Gets the blue component of a color.

%debug {
  @debug 'Red: #{$red} | Green: #{$green} | Blue: #{$blue}';
}

And here is what I got in my console,

这就是我在控制台中得到的，

DEBUG: Red: 14| Green: 162 | Blue: 157

字符串函数 (String Functions)

If you've done anything with strings in any language, you would be quite comfortable with these Sass string functions. But hey there is one exception: Please be careful that Sass strings are NOT zero-based arrays.

如果您对任何语言的字符串都做过任何事情，那么使用这些Sass字符串函数将非常满意。 但是，嘿，有一个例外：请注意Sass字符串不是基于零的数组。

The first character in a Sass string is at index 1, not 0. If you are coming from a programming background, you will just hate this (includes me). Find the below examples which would help you in your upcoming Strings in Sass journey.

Sass字符串中的第一个字符位于索引1，而不是0。如果您来自编程背景，您将对此表示讨厌（包括我）。 查找以下示例，这些示例将在您即将进行的Sass弦乐之旅中为您提供帮助。

$a: unquote("hello world"); // Removes the quotes, if any, around a string
$b: quote(hello); // Adds quotes to an unquoted string
$c: quote("hello harry"); // Returns a quoted string unmodified
$d: str-length("hello world"); // Returns the number of characters in a string
$e: str-index("Hello", "H"); // Returns the index of the first occurrence of $substring in $string.
$f: str-index("hello", "H"); // If there is no such occurrence, returns null.
$g: to-upper-case("hello"); // Converts a string to upper case.
$h: to-lower-case("Hello"); // Converts a string to lower case.

// Inserts the string specified as $insert at the specified index position inside string
// str_insert($string, $insert, $index)
$insert: str-insert(" harry", "hello", 0);

// Extracts a substring from $string.
// The substring will begin at index $start-at and optionally ending at position $end-at.
// str_slice($string, $start-at, $end-at:-1)
$slice: str-slice("hello, world", 8);
$slice-end: str-slice("hello, world", 8, 9);

/* Just for demo */
.a { content: $a; }
.b { content: $b; }
.c { content: $c; }
.d { content: $d; }
.e { content: $e; }
.f { content: $f; }
.g { content: $g; }
.h { content: $h; }
.insert { content: $insert; }
.slice { content: $slice; }
.slice-end { content: $slice-end; }

The Generated CSS output looks like this below

生成CSS输出如下所示

.a { content: hello world; }
.b { content: "hello"; }
.c { content: "hello harry"; }
.d { content: 11; }
.e { content: 1; }
.g { content: "HELLO"; }
.h { content: "hello"; }
.insert { content: "hello harry"; }
.slice { content: "world"; }
.slice-end { content: "wo"; }

清单功能 (List Functions)

Lists in Sass are immutable, and all list functions would return a new list rather than updating the existing list in-place. All the list functions will work for maps as well, treating them as lists of pairs. According to the one and only Hugo Giraudel,

Sass中的列表是不可变的，并且所有列表函数都将返回新列表，而不是就地更新现有列表。 所有列表功能也将适用于地图，将它们视为成对列表。 根据唯一的雨果·吉劳德 （ Hugo Giraudel）的说法 ，

Lists have to be the most complicated and vicious thing in the whole Sass language. The main problem with lists -if a problem it is- is that the syntax is way too permissive. You can do pretty much whatever you want. Here are some examples.

在整个Sass语言中，列表必须是最复杂，最有害的东西。 列表的主要问题（如果存在问题）是语法过于宽松。 您几乎可以做任何您想做的事。 这里有些例子。

$list1 : 200px;
$list2 : 1px 2px 3px black,;
$list3 : Helvetica, Arial, sans-serif;

$zip1: 1px 2px 3px 4px;
$zip2: 4em 3em 2em 1em;
$zip3: black green blue red;

$nested-list: 1px 2px 3px green, 6px 7px 8px blue, 3px 2px 1px yellow;

html{
  // Returns the length of a list.
  // => length($list)
  width: length($list2);

  // Returns a specific item in a list.
  // => nth($list, $n)
  box-shadow: nth($nested-list , 2);

  // Replaces the nth item in a list.
  // => set-nth($list, $n, $value)
  text-shadow: set-nth($nested-list , 3 , 0em 1em .5em orange);

  // Returns the separator of a list.
  // => list-separator($list)
  height: list-separator($list3);

  // Joins together two lists into one.
  // => join($list1, $list2, $separator:auto, $bracketed:auto)
  line-height: join($nested-list , $list3,  comma);

  // Appends a single value onto the end of a list.
  // => append($list, $val, $separator:auto)
  font: append($zip3 , gray);

  // Returns the position of a value within a list.
  // => index($list, $value)
  font-size: index($nested-list , 3px 2px 1px yellow);

  // Combines several lists into a single multidimensional list.
  // => zip($lists...)
  background: zip($zip1 , $zip2 , $zip3);
}

And, here is the Generated CSS

而且，这是生成CSS

html {
  width: 1;
  box-shadow: 6px 7px 8px blue;
  text-shadow: 1px 2px 3px green, 6px 7px 8px blue, 0em 1em 0.5em orange;
  height: comma;
  line-height: 1px 2px 3px green, 6px 7px 8px blue, 3px 2px 1px yellow, Helvetica, Arial, sans-serif;
  font: black green blue red gray;
  font-size: 3;
  background: 1px 4em black, 2px 3em green, 3px 2em blue, 4px 1em red; 
}

数字功能 (Number Functions)

STOP! Let's understand Math/Arithmetic operators: Before I move ahead, let’s have a little revisit to these math operators. SASS allows mathematical operations for addition, subtraction, multiplication, division, and remainder.

停！ 让我们了解一下数学/算术运算符：在继续之前，让我们先回顾一下这些数学运算符。 SASS允许对加法，减法，乘法，除法和余数进行数学运算。

I hope you by now would be able to understand this below code. Let’s move ahead!

我希望您现在能够理解下面的代码。 让我们前进吧！

// Math Variables
$a : 16px; $b : 32px; $c : 4.5px; $d : -12px;

// Styling
.button { width: 5 + 10 + $a - ($b * 2) / $c % $d; } // 40.7777777778px;

Sass lets you add calculations in such a way that CSS would bow down and just write down the output. But would it mean that you should go around adding and dividing just anywhere? Here I will help you understand how to make calculations more useful and your Sass files more understandable.

Sass允许您以CSS屈服并仅记录输出的方式添加计算。 但这是否意味着您应该随处添加和除法？ 在这里，我将帮助您了解如何使计算更有用，如何使Sass文件更易懂。

$a : 16px;
$b : 32px;
$c : 4.5px;
$d : -12px;

// Rounds a number to the nearest whole number.
// => round($number)
.a { width: round( 5 + 10 + $a - $b * 2 / $c % $d ); }

// Rounds a number down to the previous whole number.
// => floor($number)
.b { width: floor( 5 + 10 + $a - $b * 2 / $c ); }

// Rounds a number up to the next whole number.
// => ceil($number)
.c { width: ceil( 5 + 10 + $a - $b * 2 / $c - .4 ); }

// Converts a unitless number to a percentage.
// => percentage($number)
.d { width: percentage( 4.5 ); }

// Returns the absolute value of a number.
// => abs($number)
.e { width: abs( $d ); }

// Finds the minimum of several numbers.
// This function takes any number of arguments.
// min($numbers...)
.f { width: min( 10, 20, 50, 50.1, $a ); }

// Finds the maximum of several numbers.
// This function takes any number of arguments.
// max($numbers...)
.g { width: max( 10, 20, 50, 50.1, $a ); }

// Return a decimal between 0 and 1, inclusive of 0 but not 1.
// or, if limit specified, then returns an integer between 1 and $limit
// => random | random($limit)
.h { width: random( 100 ); }

And, this below is the code which CSS has to say for all these Maths Calculations

而且，这是CSS对于所有这些Maths Calculations不得不说的代码

.a { width: 41px; } /* round( 5 + 10 + $a - $b * 2 / $c % $d ); */
.b { width: 16px; } /* floor( 5 + 10 + $a - $b * 2 / $c ); */
.c { width: 17px; } /* ceil( 5 + 10 + $a - $b * 2 / $c - .4 ); */
.d { width: 450%; } /* percentage( 4.5 ); */
.e { width: 12px; } /* abs( $d ); */
.f { width: 10; } /* min( 10, 20, 50, 50.1, $a ); */
.g { width: 50.1; } /* max( 10, 20, 50, 50.1, $a ); */
.h { width: 95; } /* random( 100 ); */

For a full list of all the available functions, check out the official docs.

有关所有可用功能的完整列表，请查看官方 文档 。

待续：基金会工作流程 ( To be Continued: Foundation Workflow )

We will wrap up this part and move into the second part, where we will look to apply our learnings within the Foundation's Workflow. We will learn about some of the Sass Functions and Mixins (Generic, Prototype, Flexbox, Components, XY Grid) that foundation provides and how to use them so check them out at Part 2.

我们将总结这一部分，然后进入第二部分，我们将在基础工作流程中运用我们的经验。 我们将学习基础提供的一些Sass函数和Mixins（通用，原型，Flexbox，组件，XY网格）以及如何使用它们，因此请在第2部分中进行检查。

非常感谢… ( Thanks a lot… )

• If you liked my article and also my passion for teaching and want to say hello… my twitter handle is *@harmanmanchanda for getting in touch! My DM’s are open to the public so just hit me up.*
  如果您喜欢我的文章，也喜欢我的教学热情，并且想打个招呼……我的推特手柄是* @harmanmanchanda ，可以与您取得联系！ 我的DM向公众开放，所以打我吧。*
• All the code discussed in the article can be found here.
  本文中讨论的所有代码都可以在这里找到。

翻译自: https://scotch.io/tutorials/mastering-advanced-sass-workflow-with-zurb-foundation-part-1

zurb是什么网站