扫一扫分享
该项目为 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
// 核心文件调用,如需要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';
手机预览