nx-scss v1.0.2

next-scss

scss样式基础类库

技术栈

ES6/ES7 + gulp + sass + nodejs

项目运行

1. node v8.1.2
2. npm 5.0.3
3. gulp 3.9.1

克隆，或者直接下载
git clone https://github.com/smalleast/next-scss.git

进入文件夹
```js
cd next-scss

安装依赖

npm install

编译环境

开启本地服务器
npm run test    开发
npm run build  生产

##code

@import "../dist/next-scss";
//test color-map
$colors: (
  0: #000,
  1: #111,
  3: #333,
  6: #666,
  7: #777,
  8: #888,
  9: #999,
  c: #ccc,
  d: #ddd,
  e: #eee,
  f: #fff,
  black: #002600,
  red: #f56c6c,
  primary: #da5643,
  orange: #f5a623,
  green: #2dd1ac,
  blue: #2fa0f9
);

$margin-list: (
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  22,
  25,
  28,
  30,
  31,
  35,
  40,
  50,
  55,
  87,
  60,
  75,
  100,
  150
);
$padding-list: (
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  22,
  25,
  30,
  35,
  40,
  50,
  100
);
$position-list: (
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  22,
  25,
  28,
  30,
  31,
  35,
  40,
  50,
  55,
  87,
  60,
  75,
  100,
  150
);
$font-size-list: (
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  21,
  22,
  23,
  24,
  25,
  26,
  28,
  30,
  33,
  35,
  36,
  37,
  38,
  39,
  40,
  42,
  45,
  48
);
$border-radius-list: (3, 4, 5, 10);
$line-clamp-list: (wrap, 1, 2, 3);
$line-list: (1);
$width-percent-list: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$width-list: (
  50,
  60,
  70,
  80,
  100,
  120,
  140,
  150,
  160,
  180,
  200,
  240,
  260,
  300,
  400,
  500
);
$text-align-list: (
  l: left,
  c: center,
  r: right
);
$flex-list: (
  l: flex-start,
  c: center,
  r: flex-end
);
$flex-list-number: (1, 2);
//bg-0>background:#000
@include generator-background-color($colors);
//bdc-0>border-color:#000
@include generator-border-color($colors);
//c-0>color:#000
@include generator-color($colors);
//pt10>padding-top:10px
//pr10>padding-right:10px
//pb10>padding-bottom:10px
//pl10>padding-left:10px
//px10>padding-left:10px padding-right:10px
//py10>padding-top:10px padding-bottom:10px
@include generator-padding-all($padding-list);
//mt10>margin-top:10px
//mr10>margin-right:10px
//mb10>margin-bottom:10px
//ml10>margin-left:10px
//mx10>margin-left:10px margin-right:10px
//my10>margin-top:10px margin-bottom:10px
@include generator-margin-all($margin-list);
//wp-1 > 10%
@include generator-width-wp-percent($width-percent-list);
//wp-80>80px
//wp-100>100px
@include generator-width-wp($width-list);
//f12
@include generator-font-size($font-size-list);
//bdr-3>border-radius:3px;
@include generator-border-radius($border-radius-list);
//line-1
@include generator-line($line-list);
//lc-1
@include generator-line-clamp($line-clamp-list);
//tl>text-align:left
//tc>text-align:center
//tr>text-align:right
@include generator-text-align($text-align-list);
//flex-xl>justify-content: flex-start
//flex-xc>justify-content: center
//flex-xr>justify-content: flex-end
//flex-xl>justify-content: flex-start
//flex-xc>justify-content: center
//flex-xr>justify-content: flex-end
@include generator-flex-all($flex-list);
//flex1>flext:1
@include generator-flex-number($flex-list-number); //top1>top:1px
//right1>right:1px
//bottom1>bottom:1px
//left1>left:1px
@include generator-position-all($position-list);

.test-ml100 {
  > span {
    border: 1px solid #000;
  }
}

说明

>  如有问题或者遇到坑请直接在 Issues 中提，或者可以加我的QQ 382026180

>  如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^

项目布局

|-- gulp	// gulp的配置目录
|   |-- build.js	// gulp之build文件
|   |-- clean.js	// gulp之clean文件
|   |-- config.js	// gulp之配置config文件
|   |-- styles.js	// gulp之styles文件
|   |-- test.js	// gulp之test.js测试文件
|-- src	// 源码目录
|   |-- *.scss	// sass文件
|-- test	// 测试源码目录
|   |-- test.html	// 测试的html文件
|   |-- test.scss	// 测试的scss文件
|-- .babelrc	// ES6语法编译配置
|-- .editorconfig		// 代码编写规格
|-- .gitignore	// git忽略的文件
|-- .npmrc	// npm配置管理及设置代理
|-- package.json	// 项目及工具的依赖配置文件
|-- package-lock.json	// 快捷下载依赖的配置文件
|-- README.md		// 说明