feat: 添加stylus

s-acss · Aug 24, 2021 · b1ee473 · b1ee473
1 parent ca0f009
commit b1ee473
Show file tree

Hide file tree

Showing 13 changed files with 416 additions and 4,086 deletions.
diff --git a/demo/less.css b/demo/less.css
@@ -3,109 +3,10 @@
 .mt16{margin-top:16px}
 .mr8{margin-right:8px}
 .mr16{margin-right:16px}
-._mb8{margin-bottom:.5rem}
-._mb16{margin-bottom:1rem}
-._ml8{margin-left:.5rem}
-._ml16{margin-left:1rem}
-.aic{align-items:center}
-.aife{align-items:flex-end}
-.aifs{align-items:flex-start}
-.b0{bottom:0}
-.bct{background-color:transparent}
-.bn{border:none}
-.br0{border-radius:0}
-.br100\%{border-radius:100%}
-.bsbb{box-sizing:border-box}
-.bc_fff{background-color:#fff}
-.bc_000{background-color:#000}
-.c_000{color:#000}
-.c_fff{color:#fff}
-.cb{clear:both}
-.cp{cursor:pointer}
-.db{display:block}
-.df{display:flex}
-.di{display:inline}
-.dib{display:inline-block}
-.dif{display:inline-flex}
-.dn{display:none}
-.dt{display:table}
-.dtc{display:table-cell}
-.f1{flex:1;min-width:0}
-.fa{flex:auto}
-.fdc{flex-direction:column}
-.fdr{flex-direction:row}
-.fi{font:inherit}
-.fl{float:left}
-.fr{float:right}
-.fs0{font-size:0}
-.fs1{flex-shrink:1}
-.fsi{font-style:italic}
-.fsn{font-style:normal}
-.fvsc{font-variant:small-caps;text-transform:lowercase}
-.fw100{font-weight:100}
-.fw200{font-weight:200}
-.fw300{font-weight:300}
-.fw400{font-weight:400}
-.fw500{font-weight:500}
-.fw600{font-weight:600}
-.fw700{font-weight:700}
-.fw800{font-weight:800}
-.fw900{font-weight:900}
-.fwn{font-weight:400}
-.fww{flex-wrap:wrap}
-.h100\%{height:100%}
-.jcc{justify-content:center}
-.jcfe{justify-content:flex-end}
-.jcsa{justify-content:space-around}
-.jcsb{justify-content:space-between}
-.l0{left:0}
-.l100\%{left:100%}
-.l50\%{left:50%}
-.lh1{line-height:1}
-.lh1\.2{line-height:1.2}
-.lh1\.5{line-height:1.5}
-.lh1\.8{line-height:1.8}
-.lsn{list-style:none}
-.m0{margin:0}
-.mla{margin-left:auto}
-.mra{margin-right:auto}
-.mta{margin-top:auto}
-.mba{margin-bottom:auto}
-.o0{opacity:0}
-.oa{overflow:auto;-webkit-overflow-scrolling:touch}
-.oh{overflow:hidden}
-.p0{padding:0}
-.pa{position:absolute}
-.pen{pointer-events:none}
-.pf{position:fixed}
-.pr{position:relative}
-.pt100\%{padding-top:100%}
-.r0{right:0}
-.r100\%{right:100%}
-.t0{top:0}
-.t100\%{top:100%}
-.t50\%{top:50%}
-.mw100\%{max-width:100%}
-.tac{text-align:center}
-.taj{text-align:justify}
-.tal{text-align:left}
-.tar{text-align:right}
-.tdn{text-decoration:none}
-.tdu{text-decoration:underline}
-.tlf{table-layout:fixed}
-.ttc{text-transform:capitalize}
-.ttl{text-transform:lowercase}
-.ttn{text-transform:none}
-.ttu{text-transform:uppercase}
-.usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.vam{vertical-align:middle}
-.vat{vertical-align:top}
-.vh{visibility:hidden}
-.w100\%{width:100%}
-.wan{-webkit-appearance:none}
-.wsn{white-space:nowrap}
-.wwbw{word-wrap:break-word;word-break:break-all}
-.zi1{z-index:1}
+.g_mb8{margin-bottom:.5rem}
+.g_mb16{margin-bottom:1rem}
+.g_ml8{margin-left:.5rem}
+.g_ml16{margin-left:1rem}
 .mt8{margin-top:8px}
 .mt16{margin-top:16px}
 .mr8{margin-right:8px}

diff --git a/demo/less.less b/demo/less.less
@@ -4,41 +4,41 @@
 
 
 @prefix: '';
-@prefix_: '_';
+@prefix_: 'g_';
 
 @unit_px: 1px;
 @unit_rem: 1/16*1rem;
 
-#SACSS('margin-top'; '@{prefix}mt'; 8, 16; @unit_px);
-#SACSS('margin-right'; '@{prefix}mr'; 8, 16; @unit_px);
-#SACSS('margin-bottom'; '@{prefix_}mb'; 8, 16;@unit_rem);
-#SACSS('margin-left'; '@{prefix_}ml'; 8, 16; @unit_rem);
+#SACSS(@prefix; 'margin-top'; 'mt'; 8, 16; @unit_px);
+#SACSS(@prefix; 'margin-right'; 'mr'; 8, 16; @unit_px);
+#SACSS(@prefix_; 'margin-bottom'; 'mb'; 8, 16; @unit_rem);
+#SACSS(@prefix_; 'margin-left'; 'ml'; 8, 16; @unit_rem);
 
 @prefix: ''; // 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)
 @unit: 1px; // 单位换算表达式
 
 // 为核心文件添加前缀
-#WidthPrefix(@prefix);
+// #WidthPrefix(@prefix);
 
 // margin
-#SACSS('margin-top'; '@{prefix}mt'; 8, 16; @unit);
-#SACSS('margin-right'; '@{prefix}mr'; 8, 16; @unit);
-#SACSS('margin-bottom'; '@{prefix}mb'; 8, 16; @unit);
-#SACSS('margin-left'; '@{prefix}ml'; 8, 16; @unit);
+#SACSS(@prefix; 'margin-top'; 'mt'; 8, 16; @unit);
+#SACSS(@prefix; 'margin-right'; 'mr'; 8, 16; @unit);
+#SACSS(@prefix; 'margin-bottom'; 'mb'; 8, 16; @unit);
+#SACSS(@prefix; 'margin-left'; 'ml'; 8, 16; @unit);
 
 // padding
-#SACSS('padding-top'; '@{prefix}pt'; 8, 16; @unit);
-#SACSS('padding-right'; '@{prefix}pr'; 8, 16; @unit);
-#SACSS('padding-bottom'; '@{prefix}pb'; 8, 16; @unit);
-#SACSS('padding-left'; '@{prefix}pl'; 8, 16; @unit);
+#SACSS(@prefix; 'padding-top'; 'pt'; 8, 16; @unit);
+#SACSS(@prefix; 'padding-right'; 'pr'; 8, 16; @unit);
+#SACSS(@prefix; 'padding-bottom'; 'pb'; 8, 16; @unit);
+#SACSS(@prefix; 'padding-left'; 'pl'; 8, 16; @unit);
 
 // font
-#SACSS('font-size'; '@{prefix}fs'; 12, 16; @unit);
-#SACSS('line-height'; '@{prefix}lh'; 16, 24; @unit);
+#SACSS(@prefix; 'font-size'; 'fs'; 12, 16; @unit);
+#SACSS(@prefix; 'line-height'; 'lh'; 16, 24; @unit);
 
 // size
-#SACSS('width'; '@{prefix}w'; 16, 24; @unit);
-#SACSS('height'; '@{prefix}h'; 16, 24; @unit);
+#SACSS(@prefix; 'width'; 'w'; 16, 24; @unit);
+#SACSS(@prefix; 'height'; 'h'; 16, 24; @unit);
 
 // Helpers
 .clearfix {

diff --git a/demo/scss.scss b/demo/scss.scss
@@ -9,24 +9,24 @@ $unit: 1/16*1rem; // 单位换算表达式
 @include WidthPrefix($prefix);
 
 // margin
-@include SACSS('margin-top', '#{$prefix}mt', (8, 16), $unit);
-@include SACSS('margin-right', '#{$prefix}mr', (8, 16), $unit);
-@include SACSS('margin-bottom', '#{$prefix}mb', (8, 16), $unit);
-@include SACSS('margin-left', '#{$prefix}ml', (8, 16), $unit);
+@include SACSS($prefix, 'margin-top', 'mt', (8, 16), $unit);
+@include SACSS($prefix, 'margin-right', 'mr', (8, 16), $unit);
+@include SACSS($prefix, 'margin-bottom', 'mb', (8, 16), $unit);
+@include SACSS($prefix, 'margin-left', 'ml', (8, 16), $unit);
 
 // padding
-@include SACSS('padding-top', '#{$prefix}mt', (8, 16), $unit);
-@include SACSS('padding-right', '#{$prefix}mr', (8, 16), $unit);
-@include SACSS('padding-bottom', '#{$prefix}mb', (8, 16), $unit);
-@include SACSS('padding-left', '#{$prefix}ml', (8, 16), $unit);
+@include SACSS($prefix, 'padding-top', 'mt', (8, 16), $unit);
+@include SACSS($prefix, 'padding-right', 'mr', (8, 16), $unit);
+@include SACSS($prefix, 'padding-bottom', 'mb', (8, 16), $unit);
+@include SACSS($prefix, 'padding-left', 'ml', (8, 16), $unit);
 
 // font
-@include SACSS('font-size', '#{$prefix}fs', (12, 16), $unit);
-@include SACSS('line-height', '#{$prefix}lh', (16, 24), $unit);
+@include SACSS($prefix, 'font-size', 'fs', (12, 16), $unit);
+@include SACSS($prefix, 'line-height', 'lh', (16, 24), $unit);
 
 // size
-@include SACSS('width', '#{$prefix}w', (16, 24), $unit);
-@include SACSS('height', '#{$prefix}h', (16, 24), $unit);
+@include SACSS($prefix, 'width', 'w', (16, 24), $unit);
+@include SACSS($prefix, 'height', 'h', (16, 24), $unit);
 
 // Helpers
 .clearfix {

diff --git a/demo/stylus.css b/demo/stylus.css
@@ -0,0 +1,33 @@
+@charset "utf-8";
+.g_mt8{margin-top:.5rem}
+.g_mt16{margin-top:1rem}
+.g_mr8{margin-right:.5rem}
+.g_mr16{margin-right:1rem}
+.g_mb8{margin-bottom:.5rem}
+.g_mb16{margin-bottom:1rem}
+.g_ml8{margin-left:.5rem}
+.g_ml16{margin-left:1rem}
+.g_mt8{padding-top:.5rem}
+.g_mt16{padding-top:1rem}
+.g_mr8{padding-right:.5rem}
+.g_mr16{padding-right:1rem}
+.g_mb8{padding-bottom:.5rem}
+.g_mb16{padding-bottom:1rem}
+.g_ml8{padding-left:.5rem}
+.g_ml16{padding-left:1rem}
+.g_fs12{font-size:.75rem}
+.g_fs16{font-size:1rem}
+.g_lh16{line-height:1rem}
+.g_lh24{line-height:1.5rem}
+.g_w16{width:1rem}
+.g_w24{width:1.5rem}
+.g_h16{height:1rem}
+.g_h24{height:1.5rem}
+.clearfix:after{display:table;content:'';clear:both}
+.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.cell{display:table-cell;width:2000px}
+.ellipsis-mul{display:-webkit-box;overflow:hidden;word-wrap:break-word;-webkit-box-orient:vertical}
+.ellipsis-mul._2{-webkit-line-clamp:2}
+.c_m{color:#000}
+.c_s{color:#71717a}
+.c_info{color:#0891b2}
diff --git a/demo/stylus.styl b/demo/stylus.styl
@@ -0,0 +1,56 @@
+@import '../stylus/WidthPrefix'
+@import '../stylus/SACSS'
+@import "../stylus/Helpers"
+
+$prefix = 'g_' // 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)
+
+$unit =  1/16*1rem // 单位换算表达式
+
+// 为核心文件添加前缀
+// WidthPrefix($prefix)
+
+// margin
+SACSS($prefix,'margin-top','mt', 8 16, $unit)
+SACSS($prefix,'margin-right','mr', 8 16, $unit)
+SACSS($prefix,'margin-bottom','mb', 8 16, $unit)
+SACSS($prefix,'margin-left','ml', 8 16, $unit)
+
+// padding
+SACSS($prefix,'padding-top','mt', 8 16, $unit)
+SACSS($prefix,'padding-right','mr', 8 16, $unit)
+SACSS($prefix,'padding-bottom','mb', 8 16, $unit)
+SACSS($prefix,'padding-left','ml', 8 16, $unit)
+
+// font
+SACSS($prefix,'font-size','fs', 12 16, $unit)
+SACSS($prefix,'line-height','lh', 16 24, $unit)
+
+// size
+SACSS($prefix,'width','w', 16 24, $unit)
+SACSS($prefix,'height','h', 16 24, $unit)
+
+// Helpers
+.clearfix
+  Clearfix()
+
+.ellipsis
+  Ellipsis()
+
+.cell
+  Cell()
+
+.ellipsis-mul
+  Ellipsis-multiple()
+
+.ellipsis-mul._2
+  -webkit-line-clamp: 2
+
+// Color
+.c_m
+  color: #000
+
+.c_s
+  color: #71717a
+
+.c_info
+  color: #0891b2
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,6 +3,7 @@ var less = require('gulp-less');
 var autoprefixer = require('gulp-autoprefixer');
 var cleanCSS = require('gulp-clean-css');
 var sass = require('gulp-sass');
+var stylus = require('gulp-stylus');
 
 const core = function() {
   return src('./src/index.less')
@@ -40,16 +41,30 @@ const demoScss = function() {
     .pipe(dest('./demo/'));
 };
 
+const demoStylus = function() {
+    return src('./demo/stylus.styl')
+        .pipe(stylus())
+        .pipe(autoprefixer())
+        .pipe(
+            cleanCSS({
+                format: 'keep-breaks',
+            }),
+        )
+        .pipe(dest('./demo/'));
+};
+
 const watchFile = function() {
   // less/demo.less 有引用 css/core.css 文件，所以需要监听
   watch('./less/*.less', demoLess);
   watch('./sass/*.scss', demoScss);
-  watch('./src/index.scss', series(core, demoScss, demoLess));
+  watch('./stylus/*.styl', demoStylus);
+  watch('./src/index.scss', series(core, demoScss, demoLess, demoStylus));
 
   // demo
   watch('./demo/scss.scss', demoScss);
   watch('./demo/less.less', demoLess);
+  watch('./demo/stylus.styl', demoStylus);
 };
 
 exports.default = series(core, demoLess, demoScss, watchFile);
-exports.build = series(core, demoLess, demoScss);
+exports.build = series(core, demoLess, demoScss, demoStylus);
diff --git a/less/SACSS.less b/less/SACSS.less
@@ -1,17 +1,19 @@
 @charset "utf-8";
 /**
- * #SACSS(font-size; fs; 12, 16; 1px);
+ * #SACSS('', font-size; fs; 12, 16; 1px);
+ * @prefix: 前缀
  * @prop: 属性名
  * @name: 缩写名
  * @list: 值列表
  * @unit: 单位换算表达式, 默认为1px, 想要 rem 填写 1/16*1rem
  */
-#SACSS(@prop; @name; @list; @unit) when not(@list = false) {
+#SACSS(@prefix; @prop; @name; @list; @unit) when not(@list = false) {
   @escapeProp: escape(@prop);
   @escapeName: escape(@name);
   .loop(@i) when (@i < length(@list) + 1) {
     @item: extract(@list, @i);
-    .@{escapeName}@{item} {
+    @className: escape('@{prefix}@{name}@{item}');
+    .@{className} {
       @{escapeProp}: @item * @unit;
     }
     .loop(@i+1);
@@ -21,17 +23,19 @@
 }
 
 /**
- * #SACSS(font-weight; fw; 400, 700);
+ * #SACSS('', font-weight; fw; 400, 700);
+ * @prefix: 前缀
  * @prop: 属性名
  * @name: 缩写名
  * @list: 值列表
  */
-#SACSS(@prop; @name; @list;) when not(@list =false) {
+#SACSS(@prefix; @prop; @name; @list;) when not(@list =false) {
   @escapeProp: escape(@prop);
   @escapeName: escape(@name);
   .loop(@i) when (@i < length(@list) + 1) {
     @item: extract(@list, @i);
-    .@{escapeName}@{item} {
+    @className: escape('@{prefix}@{name}@{item}');
+    .@{className} {
       @{escapeProp}: @item;
     }
     .loop(@i+1);