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

zurb是什么网站

Welcome back! In the previous article, we covered all the advanced topics that Sass has in its arsenal, but the thing is you need to build a website, you need a grid for your layout, you need some excellent Components, Utility library, those neat JS plugins, succinctly put you need a web framework!

欢迎回来！ 在上一篇文章中 ，我们介绍了Sass在其军械库中拥有的所有高级主题，但实际上，您需要构建一个网站，需要一个布局网格，还需要一些出色的Components，Utility库，那些简洁的JS插件。 ，简而言之， 您需要一个Web框架 ！

In this part, we will look to implement all of the learning that we had in the previous article into the workflow of Foundation framework.

在这一部分中，我们将寻求将上一篇文章中的所有学习内容实施到Foundation框架的工作流程中。

We will learn about the Foundation's Sass Variables, and it's Settings file, then we will deep dive into those functions and mixins that foundation provides. We will also talk about on how to build both horizontal and vertical grid semantically through mixins by generating your own classes (and not default classes).

我们将了解Foundation的Sass变量及其设置文件，然后我们将深入研究Foundation提供的那些函数和mixins。 我们还将讨论如何通过生成自己的类（而不是默认类）通过mixin在语义上构建水平和垂直网格。

为什么选择Zurb基金会？ ( Why Zurb Foundation? )

Foundation is the most advanced responsive front-end framework in the world. Foundation 6 has been designed to get your project from prototype to production efficiently! It includes a full range of modular and flexible components that get styled easily. It has a collection of HTML, CSS, and JavaScript that contains design patterns that you can build upon on yours next website design.

Foundation是世界上最先进的响应式前端框架。 Foundation 6旨在使您的项目从原型有效地投入生产！ 它包括易于模块化的各种模块化和灵活组件。 它包含HTML，CSS和JavaScript的集合，其中包含可以在下一个网站设计上建立的设计模式。

It also includes an optional prototype library that you can use to prototype layouts and UI quickly. These prototype library can be quickly thrown away thanks to the mixins which helps you to use your own custom classes or swap classes for mixins in production for cleaner markup.

它还包括一个可选的原型库，您可以使用它来快速制作布局和UI原型。 借助mixin，可以快速丢弃这些原型库，它可以帮助您在生产中使用自己的自定义类或将类替换为mixin，以实现更清晰的标记。

Why not Bootstrap? Bootstrap is world's most popular front-end component library then why Foundation? I heard Bootstrap 4 is in Sass? Bootstrap Styling makes me feel comfortable?

为什么不使用Bootstrap？ Bootstrap是世界上最受欢迎的前端组件库，那么为什么要使用Foundation？ 我听说Bootstrap 4在Sass中吗？ Bootstrap样式让我感到舒适吗？

I think that Bootstrap is an excellent framework and especially with their default styling as it helps the developer's who are not good in CSS to make their website designs with ease. But the problem arises when you need to customise the project with your own CSS classes and to write your very own advanced Sass code like functions, mixins, loops, directives, and maps that compile to CSS for the browser.

我认为Bootstrap是一个很好的框架，尤其是默认样式，因为它可以帮助那些不擅长CSS的开发人员轻松地进行网站设计。 但是，当您需要使用自己CSS类自定义项目并编写自己的高级Sass代码（例如函数，mixin，循环，指令和可编译为浏览器CSS的映射）时，就会出现问题。

At another flip of the coin, Foundation has excellent support for Sass functions and mixins which as of yet Bootstrap doesn’t have in comparison. In layman terms, right now you can't use Bootstrap for your own Advanced Sass code, and thus Foundation is a great bet if you are looking to code up a website layout in Sass/SCSS.

另一方面，Foundation对Sass函数和mixins具有出色的支持，而Bootstrap到目前为止还没有。 用外行术语来说，现在您不能将Bootstrap用于自己的Advanced Sass代码，因此，如果您希望在Sass / SCSS中编写网站布局，Foundation是一个不错的选择。

基础Sass安装 ( Foundation Sass Installation )

There are many ways to install Foundation but for Sass Installation, you first need to get Node and then the process is quite like this:

有多种安装Foundation的方法，但对于Sass安装，您首先需要获取Node ，然后该过程非常像这样：

You can install the Foundation CLI by this below command. Please note that you may need sudo to run this.

您可以通过以下命令安装Foundation CLI。 请注意，您可能需要sudo来运行它。

npm install --global foundation-cli

After that just run foundation new and you will be able to install foundation with their interactive interface.

之后，只需运行foundation new ，您将能够使用其交互界面安装Foundation。

Running Into Problems? You can manually set this up too, click here for more info.

遇到问题了吗？ 您也可以手动设置，请单击此处获取更多信息。

Sass变量（设置文件） ( Sass Variables (Settings file) )

The _settings.scss is a file which contains all the default variables that exist in Foundation. You can make your changes in that one file as per your requirements. You can download the latest settings file from here.

_settings.scss是一个文件，其中包含Foundation中存在的所有默认变量。 您可以根据需要在一个文件中进行更改。 您可以从此处下载最新的设置文件。

Sass功能 ( Sass Functions )

Behind the scenes, Foundation is powered by a set of utility Sass functions that help them work with colors, units, selectors, and more. But this is not all; you can use them to your advantage too just like Vanilla functions in Part 1. Here are some examples:

在幕后，Foundation由一组实用的Sass功能提供支持，可帮助他们使用颜色，单位，选择器等。 但这并不是全部; 就像第1部分中的 Vanilla函数一样，您也可以使用它们来发挥自己的优势。 这里有些例子：

$color1: #0875bd;
$color2: #0EA29D;
$num: 40px;
$int1: 12;
$int2: 15;

$a: color-luminance($primary-color); // Checks the luminance of $color.
$b: color-contrast($color1, $color2); // Checks the contrast ratio of two colors.
$c: strip-unit($num); // Removes the unit (e.g. px, em, rem) from a value, returning the number only.
$d: rem-calc($num); // Converts one or more pixel values into matching rem values.
$e: gcd($int1, $int2); // Finds the greatest common divisor of two integers.

And the output,

然后输出

.a { color: 0.17699; } /* color-luminance($primary-color); */
.b { content: 1.6; } /* color-contrast($color1, $color2); */
.c { content: 40; } /* strip-unit($num); */
.d { content: 2.5rem; } /* rem-calc($num); */
.e { content: 3; } /* gcd($int1, $int2); */

The whole list of functions provided by foundation can be found out here.

基金会提供的功能的完整列表可以在此处找到。

无礼的混蛋 ( Sass Mixins )

Foundation provides mixins for generating your own classes for all the components, utility library with ease. They also provide some generic but handy mixins like CSS triangle. So, you can use those mixins to generate your own classes to create own Semantic CSS.

Foundation提供了用于轻松为所有组件生成自己的类和实用程序库的mixin。 它们还提供了一些通用但方便的mixin，例如CSS三角。 因此，您可以使用这些mixin生成自己的类来创建自己的Semantic CSS 。

Yup Semantic CSS, whether it’s SMACSS or BEM or ECSS or any other CSS methodology, just use it right away in your projects.

Yup语义CSS，无论是SMACSS还是BEM或ECSS还是任何其他CSS方法，都可以在您的项目中立即使用。

一般混合 (General Mixins)

Foundation includes some handy Sass mixins to quickly create styles or to extend and truly customize an existing component.

Foundation包含一些方便的Sass mixins，可快速创建样式或扩展并真正自定义现有组件。

Let’s look at some of these generic mixins in the toolset

让我们看一下工具集中的一些通用mixin

CSS Triangle: You can create a CSS triangle, which can then be used for creating dropdown arrows, dropdown pips, and much more. You can use this mixin inside a &::before or &::after selector, for attaching the triangle to an existing element. It takes three parameters: $triangle-size, $triangle-color, and $triangle-direction respectively.

CSS三角形：您可以创建CSS三角形，然后将其用于创建下拉箭头，下拉点等等。 您可以在&::before或&::after选择器中使用此混合，将三角形附加到现有元素。 它需要三个参数： $triangle-size ， $triangle-color和$triangle-direction 。

.triangle-up { @include css-triangle(5px, black, up); }
.triangle-down { @include css-triangle(20px, #f00, down); }
.triangle-right { @include css-triangle(60px, green, right); }
.triangle-left { @include css-triangle(10px, blue, left); }

Here is the output for the above code (yes Foundation's Sass does all the heavy lifting for you).

这是上述代码的输出（是的，基金会的Sass为您完成了所有繁重的工作）。

Codepen:

Codepen：

https://codepen.io/IamManchanda/pen/GvVByB

https://codepen.io/IamManchanda/pen/GvVByB

Hamburger Icon Mixin: You can create a menu icon with a set width, height, number of bars, and colors. This mixin uses the height of the icon and the weight of the bars to determine the spacing in between the bars. By default, it takes three parameters: $color, $color-hover, $width, $height, $weight, and $bars respectively.

Hamburger Icon Mixin：您可以创建具有设置的宽度，高度，条数和颜色的菜单图标。 此混入使用图标的高度和条的权重来确定条之间的间距。 默认情况下，它带有三个参数： $color ， $color-hover ， $width ， $height ， $weight和$bars 。

.hammenu { @include hamburger($black, $dark-gray, 20px, 16px, 2px, 3); }

And with that single line of code, you just got a hamburger menu in your project. But remember, this isn't that simple as it looks. Check out the generated code below!

有了这一行代码，您在项目中仅获得一个汉堡菜单。 但是请记住，这并不是看起来那么简单。 在下面查看生成的代码！

Codepen:

Codepen：

https://codepen.io/IamManchanda/pen/OjKwQa

https://codepen.io/IamManchanda/pen/OjKwQa

I hope by now, you would be understanding that why these mixins are far better then choosing to go with Vanilla CSS. But this is not all, there are many more generic mixins available for you which can be found here.

我希望到现在为止，您将了解为什么这些mixins比选择Vanilla CSS更好。 但这还不是全部，还有更多可用的通用mixin可以在这里找到。

实用工具Mixins原型制作 (Prototyping Utility Mixins)

Quickly prototype layouts and UI with Foundation's Prototyping Utility mixins. These mixins are great realizing your sketches and mockups into hi-fi coded prototype's ultra fast.

通过Foundation的Prototyping Utility mixins快速创建原型布局和UI。 这些mixin非常适合将您的草图和样机实现为高保真编码原型的超快速度。

Margin Helper Mixin: You can use the margin helper utility as a mixin too; all the values are multiplied by $global-margin which by default is equal to 1rem. It takes 4 parameters: $top, $right, $bottom, and $left respectively.

保证金助手混合器：您也可以将保证金助手实用程序用作混合器。 所有值都乘以$ global-margin，默认情况下等于1rem。 它需要4个参数： $top ， $right ， $bottom和$left 。

.foo { @include margin(1, 0, 2, null); }

This above code will generate the below output. See how margin-left property wasn't printed as this mixin also accept null as a value to reduce the CSS output.

上面的代码将生成以下输出。 看看如何不打印margin-left属性，因为此mixin还接受null作为减少CSS输出的值。

.foo {
  margin-top: 1rem !important;
  margin-right: 0rem !important;
  margin-bottom: 2rem !important; }

Box Mixin: This mixin helps you to create a square, rectangle or a circle quickly. It takes three parameters: $width, $height, and $circle respectively.

Box Mixin：此Mixin帮助您快速创建正方形，矩形或圆形。 它需要三个参数： $width ， $height和$circle 。

.bar { @include box(1rem, 2rem); } // Rectangle
.baz { @include box(1rem); } // Square
.shaz { @include box(1rem, $circle: true); } // Circle

And this below is the Generated output,

这是生成的输出，

Codepen:

Codepen：

See how these utilities are so much better and easy than those utility libraries. If you looking for more, then the whole list of Prototype specific mixins can be found here.

了解这些实用程序比这些实用程序库如何更好，更容易。 如果您需要更多，则可以在此处找到特定于原型的混合表的完整列表。

Flexbox实用程序Mixins (Flexbox Utility Mixins)

Flexbox makes horizontal and vertical alignment painless, with the help of CSS properties like align-items, align-self, and justify-content. It includes a handful of classes for these properties, which will work with any flexbox-enabled component.

Flexbox借助align-items ， align-self和justify-content等CSS属性使水平和垂直对齐变得轻松自如。 它包括一些用于这些属性的类，这些类可与任何启用了flexbox的组件一起使用。

But hey, it's not all about those classes, you can access all those helper classes as Sass mixins also. Please note that for building your very own flexbox component, you will need to use the flex() mixin to get started.

但是，这不仅仅涉及那些类，您还可以像Sass mixins一样访问所有这些辅助类。 请注意，要构建自己的flexbox组件，您将需要使用flex() mixin来开始。

.my-flexbox-component  {
  @include flex ( ) ;

  // Horizontally or vertically aligns the items within a flex container.
  // => @include flex-align($x, $y);
  @include flex-align ( center, middle ) ;

  .sidebar  {
    // Vertically align a single column within a flex row.
    // Apply this mixin to a flex column.
    // => @include flex-align-self($y);
    @include flex-align-self ( bottom ) ;
  }
}

Full list of Flexbox specific mixins can be found here.

可以在此处找到Flexbox特定的mixin的完整列表。

组件特定的混合 (Component Specific Mixins)

Foundation provides mixins for every component out there. Unfortunately, I can’t cover all the components, so I am going to provide an example for mixins of button component but please note that all the components are being included like this only so it shouldn’t be a problem.

Foundation为那里的每个组件提供mixin。 不幸的是，我无法涵盖所有​​组件，因此我将为按钮组件的混合提供一个示例，但是请注意，所有组件仅像这样被包含在内，因此应该不会有问题。

Button Mixin: This mixin helps you to add styles to your buttons as per your needs. Please note that for more granular control over styles, you should be using the individual button mixins. It takes 5 parameters: $expand, $background, $background-hover, $color, and $style respectively.

按钮混合：此混合可帮助您根据需要向按钮添加样式。 请注意，要更精细地控制样式，应使用单独的按钮混合。 它需要5个参数： $expand ， $background ， $background-hover ， $color和$style 。

.my-button  { @include button ( false , $primary-color , auto, auto, hollow ) ; }

As you can see, I have set $background-hover, and $color to auto respectively, as this automatically generate a color for me based on the background color.

如您所见，我分别将$background-hover和$color为auto，因为这会根据背景颜色自动为我生成颜色。

For hover, it will darken by 15% on hover, whereas producing a white or black color for $color based on the contrast with the background. Check the output now within the codepen, yes yes all this below code is generated by the above single line Sass.

对于悬停，它将在悬停时变暗15％，而根据与背景的对比度为$color生成white或black 。 现在检查代码笔内的输出，是的，下面的所有这些代码都是由上面的单行Sass生成的。

Codepen:

Codepen：

As I said before, I can’t cover all the components, but this process is same for all the components of foundation. Head out to docs, for more components.

如前所述，我无法涵盖所有​​组件，但是此过程对于Foundation的所有组件都是相同的。 前往文档，获取更多组件。

水平网格（语义构建） ( Horizontal Grid (Build Semantically) )

You can create a horizontal grid semantically with your own classes with ease. Here is a small example for the same, thing to be denoted is that .wrapper class is our grid container so that its center’s content in our device viewport.

您可以轻松地用自己的类在语义上创建水平网格。 这是一个相同的小示例，需要说明的是.wrapper类是我们的网格容器，因此它的中心内容在我们的设备视口中。

The .row class will be our grid, whereas .content, and .sidebar will be our custom cells. The cells have been setup in such a way that the content will take up the remaining size not used by sidebar thanks to the handy utility provided by flexbox!

.row类将是我们的网格，而.content和.sidebar将是我们的自定义单元格。 单元格的设置方式使内容将占据侧边栏未使用的剩余大小，这要归功于flexbox提供的便捷实用程序！

HTML Markup

HTML标记

<div class="wrapper">
    <div class="row">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
</div>

SCSS Code

SCSS代码

.wrapper {
  // Creates a max width container, designed to house up your grid content.
  // => @include xy-grid-container($width);
  @include xy-grid-container();
}

.row {
  // Creates a container for your flex cells.
  // => @include xy-grid($direction, $wrap);
  @include xy-grid();
}

.content {
  // Creates a cell for your grid.
  // => @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
  @include xy-cell(12);

  // Wraps a media query around the content you put inside the mixin. 
  // => @include breakpoint($value) { ... }
  @include breakpoint(medium) {
    @include xy-cell(auto);
  }
}

.sidebar {
  @include xy-cell(12);
  @include breakpoint(medium) {
      @include xy-cell(4);
  }
}

Codepen:

Codepen：

垂直网格（语义构建） ( Vertical Grid (Build Semantically) )

Inspired from CSS Grid, XY Grid was made and if there is one thing that XY Grid brought to the web framework community was the vertical grid. Vertical Grid is used for splitting up the screen vertically, lets you create a grid in a vertical direction and most commonly been used for app style layouts.

从CSS Grid启发而来的XY Grid是XY Grid，而XY Grid带给Web框架社区的东西是垂直网格。 垂直网格用于垂直拆分屏幕，可让您在垂直方向上创建网格，并且最常用于应用程序样式布局。

Here is a small example for this vertical grid, the thing to be denoted is that this .page will be our grid, whereas header, .content, and .footer will be our custom cells.

这是此垂直网格的一个小示例，需要说明的是，此.page将是我们的网格，而header ， .content和.footer将是我们的自定义单元格。

HTML Markup

HTML标记

< div class = " page " >
    < div class = " header " > </ div >
    < div class = " content " > </ div >
    < div class = " footer " > </ div >
</ div >

SCSS Code

SCSS代码

.page  {
  // Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
  // => @include xy-grid-frame($vertical, $nested, $gutters, $breakpoint, $include-base);
  @include xy-grid-frame ( true ) ;

  // Creates a container for your flex cells.
  // => @include xy-grid($direction, $wrap);
  @include xy-grid ( vertical, false ) ;
}

.header  {
  // Creates a cell for your grid.
  // => @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
  @include xy-cell ( 2 , $gutter-position : top bottom, $vertical : true ) ;
}

.content  {
  @include xy-cell ( 7 , $gutter-position : top bottom, $vertical : true ) ;
}

.footer  {
  @include xy-cell ( 3 , $gutter-position : top bottom, $vertical : true ) ;
}

Codepen:

Codepen：

I hope you loved it but hey there is a lot of more customization that you can do with XY Grid and it's mixins. Wanna know more, head over to the docs.

我希望您喜欢它，但是嘿，您可以使用XY Grid及其混合功能进行更多自定义。 想了解更多，请前往文档 。

控制台输出指令 ( Directives for Console Output )

While working with the foundation framework, it’s entirely reasonable that you will face some console errors and warnings. So, for the sake of the same, you should know what all these console outputs mean. Here is a simple definition:

在使用基础框架时，您将面对一些控制台错误和警告是完全合理的。 因此，出于相同的原因，您应该知道所有这些控制台输出的含义。 这是一个简单的定义：

1. Debug: @debug prints the value of the expression it contains (variable, math, etc.) to the console. This is ideal when you are in between of a complex bit of math, and you need to know what one of your variables contains the very right moment.

   调试： @debug将其包含的表达式的值（变量，数学等）输出到控制台。 当您处于复杂的数学运算之间，并且需要知道哪个变量包含正确的矩时，这是理想的选择。

2. Warn: @warn is a warning to the developer through which a message is sent that needs to be read, but please note that this doesn't stop anything but instead allows the compiler to finish its job and write all the CSS. @warn is mostly suited for deprecation notices or even in the cases where you need to tell the developer to follow certain best practices.

   警告： @warn是对开发人员的警告，通过它发送需要阅读的消息，但是请注意，这不会停止任何事情，而是允许编译器完成其工作并编写所有CSS。 @warn最适合于弃用通知，甚至在您需要告诉开发人员遵循某些最佳实践的情况下也是如此。

3. Error: @error is for stopping the Sass compiler altogether and sending the string of text as a fatal error within the compiler’s output. You should be using this when you need to send a message that stops all the process immediately. This is ideal for letting another developer know that they have messed up with something within the code and they need to correct it before moving further ahead.

   错误 ： @error用于完全停止Sass编译器并将文本字符串作为致命错误发送到编译器的输出中。 当您需要发送一条消息以立即停止所有过程时，应该使用此功能。 让其他开发人员知道他们已经弄乱了代码中的某些内容，因此他们需要在更进一步之前进行更正，这是理想的选择。

// Print the output to the console.
@debug 'Red: #{$red} | Green: #{$green} | Blue: #{$blue}';

// Shows warning but doesn't break anything.
@warn 'Deprecation, $header-sizes has been replaced with $header-styles.';

// Show error and stops the whole process
@error 'No $prop specified.';

非常感谢… ( 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-2

zurb是什么网站