Foundation - Sass

Foundation Sass - 从简单和简单的步骤学习基础，从基本到高级概念，包括概述，安装，入门项目，厨房水槽，全局样式，Sass，JavaScript，JavaScript实用程序，媒体查询，网格，Flex网格，表格，可见性类，基本排版，排版助手，按钮，按钮组，关闭按钮，滑块，开关，导航，菜单，下拉菜单和向下钻取菜单，手风琴菜单，响应式导航，麦哲伦，分页，面包屑，容器，手风琴，标注，下拉式 - 窗格，媒体对象，画布，显示模式，表格，标签，Flex视频，标签，轨道，进度条，工具提示，插件，遵守，均衡器，交换，Toggler，粘滞，Sass功能和Mixins，运动UI。

SASS有助于使代码在Foundation中更加灵活和可自定义.

兼容性

要为基础安装基于SASS的版本，Ruby应该是安装在Windows上.可以使用Ruby SASS和libsass编译Foundation.我们建议使用 node-sass 3.4.2 + 版本来编译SASS.

需要Autoprefixer

Autoprefixer处理SASS文件. gulp-autoprefixer 用于构建流程.以下autoprefixer设置用于获得正确的浏览器支持.

autoprefixer ({   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']});

加载框架

我们可以使用NPM安装框架文件.使用命令行界面(CLI)，我们可以编译Sass文件.以下是加载框架的命令 :

npm install foundation-sites --save

运行上面的命令行代码后，您将得到以下行 :

基础sass

手动编译

框架文件可以作为导入路径添加，具体取决于您的构建过程，但路径将是相同的 packages_folder/foundation-sites/scss . @import 语句包含在 foundation-sites.scss 文件的顶部. 调整CSS输出部分解释了给定代码中的下一行.

@import 'foundation';@include foundation-everything;

使用编译的CSS

您可以包含预编译的CSS文件.有两种类型的CSS文件，即缩小和未缩小.缩小版用于生产，未分化版本用于直接编辑框架CSS.

调整CSS输出

对于各种组件，Foundation输出包含许多类.它用于控制框架的CSS输出.添加以下单行代码以一次包含所有组件.

@include foundation-everything;

以下是在scss文件中编写上述代码时导入的组件列表.可以评论不必要的组件.您可以在 Your_folder_name/node_modules/foundation-sites/scss/foundation.scss 文件中查看以下给定的代码行.

@import 'foundation';@import 'grid/grid';@import 'typography/typography';@import 'forms/forms';@import 'components/visibility';@import 'components/float';@import 'components/button';@import 'components/button-group';@import 'components/accordion-menu';@import 'components/accordion';@import 'components/badge';@import 'components/breadcrumbs';@import 'components/callout';@import 'components/close-button';@import 'components/drilldown';.........//so on....

设置文件

整个基础项目中包含一个设置文件，即 _settings.scss .如果您使用Yeti Launch或CLI创建Foundation for Sites项目，您可以在src/assets/scss/下找到设置文件.

我们已经使用npm安装了Foundation，因此您可以找到 your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss 下包含的设置文件.您可以将其移动到您自己的Sass文件中以便使用.

如果您无法使用变量进行自定义，则可以编写自己的CSS.以下是一组变量，它们会更改按钮的默认样式.

$button-padding: 0.85em 1em;$button-margin: 0 $global-margin $global-margin 0;$button-fill: solid;$button-background: $primary-color;$button-background-hover: scale-color($button-background, $lightness: -15%);$button-color: #fff;$button-color-alt: #000;$button-radius: $global-radius;$button-sizes: (   tiny: 0.6rem,   small: 0.75rem,   default: 0.9rem,   large: 1.25rem,);$button-opacity-disabled: 0.25;