该项目为 Sass 的基础库，另有一个针对 PostCSS 的为 Sandal for PostCSS。

sandal取其“檀香”之意，针对移动端站点为前端人员提供了一些基础的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用图标等，基于它你可以扩展出更多你需要的UI组件，sheral就是基于sandal的移动端UI库。

sandal，分核心文件和扩展文件两种。其中核心文件包括重置样式，@mixin，%等方便调用；而扩展文件则提供基础原子类class，图标，网格系统。 核心文件提供两个集合文件以供调用，分别为_function.scss， _core.scss。两者的区别为function仅提供功能，而core除了提供function的功能，还会会生成一份重置样式 扩展文件有四个，分别为_icons.scss，_helper.scss，_grid.scss，_page-slide.scss可根据需要调用

安装

npm install sass-sandal --save-dev

webpack 使用

// 核心文件调用，如需要reset样式则为core
@import '~sass-sandal/_core';
// or
@import '~sass-sandal/_function';

// 扩展调用对应模块
@import '~sass-sandal/ext/icons';
@import '~sass-sandal/ext/helper';
@import '~sass-sandal/ext/grid';
@import '~sass-sandal/ext/page-slide';

一般调用

// 核心文件调用，如需要reset样式则为core
@import 'node_modules/sass-sandal/core';
// or
@import 'node_modules/sass-sandal/function';

// 扩展调用对应模块
@import 'node_modules/sass-sandal/ext/icons';
@import 'node_modules/sass-sandal/ext/helper';
@import 'node_modules/sass-sandal/ext/grid';
@import 'node_modules/sass-sandal/ext/page-slide';

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1265