adjust coding style for Sass converter

.gitignore

@@ -20,10 +20,12 @@ vendor/less.js/
 tools/app/public/style.css
 
 # build
+.sass-cache
 .build
 .cstmz-tmp
 dist/css
 dist/js
+dist/sass
 /js/amazeui.js
 less/amazeui.widgets.less
 

less/badge.less

@@ -35,15 +35,6 @@
     display: none;
   }
 
-  a& {
-    &:hover,
-    &:focus {
-      color: @badge-link-hover-color;
-      text-decoration: none;
-      cursor: pointer;
-    }
-  }
-
   &.@{ns}square {
      border-radius: 0;
   }
@@ -59,6 +50,16 @@
   .hook-badge;
 }
 
+// link badge
+a.@{ns}badge {
+  &:hover,
+  &:focus {
+    color: @badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
 
 // Color modifier
 // =============================================================================

less/close.less

@@ -40,23 +40,6 @@
     outline: none;
   }
 
-  // Additional properties for button version
-  // iOS requires the button element instead of an anchor tag.
-  // If you want the anchor version, it requires `href="#"`.
-  button& {
-    padding: 0;
-    cursor: pointer;
-    background: transparent; /* Needed for Sarari */
-    border: 0;
-    -webkit-appearance: none;
-  }
-
-  a&:hover {
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
   &[class*="@{ns}icon-"] {
     font-size: 16px;
   }
@@ -64,6 +47,25 @@
   .hook-close;
 }
 
+// Adjust code style for SASS converter
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.@{ns}close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent; /* Needed for Sarari */
+  border: 0;
+  -webkit-appearance: none;
+}
+
+a.@{ns}close:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
 
 /* Modifiers
  ============================================================================ */

less/comment.less

@@ -38,7 +38,7 @@
   border: 1px solid transparent;
 
   @media @medium-up {
-    .square(@comment-avatar-size * 1.5)
+    .square(@comment-avatar-size * 1.5);
   }
 
   .hook-comment-avatar;

less/form.less

@@ -43,9 +43,8 @@ label {
 // Normalize form controls
 
 // Override content-box in Normalize
-
 input[type="search"] {
-  .box-sizing(border-box);
+  box-sizing: border-box;
 }
 
 // Position radios and checkboxes better
@@ -460,12 +459,12 @@ input[type="checkbox"],
 
     &:first-child {
       top: 1px;
-      .border-top-radius(@input-border-radius) !important;
+      .border-top-radius(~"@{input-border-radius} !important");
     }
 
     &:last-child {
       top: -2px;
-      .border-bottom-radius(@input-border-radius) !important;
+      .border-bottom-radius(~"@{input-border-radius} !important");
     }
   }
   .hook-form-set;

less/icon.less

@@ -110,7 +110,7 @@
 ============================================================================= */
 
 .@{ns}icon-btn {
-  .box-sizing(border-box);
+  box-sizing: border-box;
   display: inline-block;
   .icon-btn-size(@icon-btn-width; @icon-btn-height; @icon-btn-font-size);
   border-radius: @icon-btn-border-radius;
@@ -2172,17 +2172,18 @@
 /* Modifier: `am-icon-spin`
 ============================================================================= */
 
-@-webkit-keyframes icon-spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(359deg); }
-}
 @keyframes icon-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(359deg);
+  }
 }
 
 .am-icon-spin {
-  .animation(icon-spin 2s infinite linear);
+  animation: icon-spin 2s infinite linear;
 }
 
 

less/input-group.less

@@ -201,6 +201,19 @@
 // Modifiers - colors
 // =============================================================================
 
+.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) {
+  .@{ns}input-group-label {
+    background: @bg;
+    color: @color;
+  }
+
+  .@{ns}input-group-label,
+  .@{ns}input-group-btn > .@{ns}btn,
+  .@{ns}form-field {
+    border-color: @border;
+  }
+}
+
 .@{ns}input-group-primary {
   .input-group-color-variant();
   .hook-input-group-primary;
@@ -226,19 +239,6 @@
   .hook-input-group-danger;
 }
 
-.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) {
-  .@{ns}input-group-label {
-    background: @bg;
-    color: @color;
-  }
-
-  .@{ns}input-group-label,
-  .@{ns}input-group-btn > .@{ns}btn,
-  .@{ns}form-field {
-    border-color: @border;
-  }
-}
-
 
 // Hooks
 // =============================================================================

less/list.less

@@ -13,6 +13,58 @@
 // =============================================================================
 
 
+// Mixins
+// =============================================================================
+
+.list-item() {
+  position: relative;
+  display: block;
+  margin-bottom: -1px;
+  background-color: @list-bg;
+  border: 1px solid @list-border;
+  border-width: 1px 0;
+
+  // linked
+  > a {
+    .list-item-linked();
+  }
+
+  > .@{ns}badge {
+    float: right;
+  }
+  > .@{ns}badge + .@{ns}badge {
+    margin-right: 5px;
+  }
+}
+
+.list-item-linked() {
+  display: block;
+  padding: 1rem 0;
+  //color: @list-link-color;
+
+  // Hover state
+  &:hover,
+  &:focus {
+    //background-color: @list-hover-bg;
+  }
+
+  &.@{ns}active,
+  &.@{ns}active:hover,
+  &.@{ns}active:focus {
+    z-index: 2;
+    color: @list-active-color;
+    background-color: @list-active-bg;
+    border-color: @list-active-border;
+
+    .@{ns}list-item-heading {
+      color: inherit;
+    }
+    .@{ns}list-item-text {
+      color: lighten(@list-active-bg, 40%);
+    }
+  }
+}
+
 /* ==========================================================================
    Component: List
  ============================================================================ */
@@ -83,59 +135,6 @@
 }
 
 
-// Mixins
-// =============================================================================
-
-.list-item() {
-  position: relative;
-  display: block;
-  margin-bottom: -1px;
-  background-color: @list-bg;
-  border: 1px solid @list-border;
-  border-width: 1px 0;
-
-  // linked
-  > a {
-    .list-item-linked();
-  }
-
-  > .@{ns}badge {
-    float: right;
-  }
-  > .@{ns}badge + .@{ns}badge {
-    margin-right: 5px;
-  }
-}
-
-.list-item-linked() {
-  display: block;
-  padding: 1rem 0;
-  //color: @list-link-color;
-
-  // Hover state
-  &:hover,
-  &:focus {
-    //background-color: @list-hover-bg;
-  }
-
-  &.@{ns}active,
-  &.@{ns}active:hover,
-  &.@{ns}active:focus {
-    z-index: 2;
-    color: @list-active-color;
-    background-color: @list-active-bg;
-    border-color: @list-active-border;
-
-    .@{ns}list-item-heading {
-      color: inherit;
-    }
-    .@{ns}list-item-text {
-      color: lighten(@list-active-bg, 40%);
-    }
-  }
-}
-
-
 // Custom content
 // =============================================================================
 

less/mixins.less

@@ -232,7 +232,7 @@
   }
 
   .horizontal-3c(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
-    .gradient-horizontal-3c(@start-color; @mid-color; @color-stop; @end-color)
+    .gradient-horizontal-3c(@start-color; @mid-color; @color-stop; @end-color);
   }
 
   .vertical-3c(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
@@ -820,7 +820,7 @@
   &:focus,
   &:active,
   &.@{ns}active,
-  .@{ns}active .@{ns}dropdown-toggle& {
+  .@{ns}active &.@{ns}dropdown-toggle {
     color: @color;
     background-color: darken(@background, 12%);
     border-color: darken(@border, 12%);
@@ -828,7 +828,7 @@
 
   &:active,
   &.@{ns}btn-active,
-  .@{ns}active .@{ns}dropdown-toggle& {
+  .@{ns}active &.@{ns}dropdown-toggle {
     background-image: none;
   }
 

less/nav.less

@@ -21,6 +21,42 @@
 // =============================================================================
 
 
+// Tabs justify mixin
+// =============================================================================
+
+.nav-tabs-justify() {
+  border-bottom: 0;
+
+  /*  > li > a {
+      margin-right: 0;
+      border-radius: @global-radius;
+    }
+
+    > .am-active > a {
+      &,
+      &:hover,
+      &:focus {
+        border: 1px solid @nav-tabs-justify-link-border-color;
+      }
+    }*/
+
+  // @media @medium-up {
+  > li > a {
+    margin-right: 0;
+    border-bottom: 1px solid @nav-tabs-justify-link-border-color;
+    border-radius: @global-radius @global-radius 0 0;
+  }
+
+  > .am-active > a {
+    &,
+    &:hover,
+    &:focus {
+      border-bottom-color: @nav-tabs-justify-active-link-border-color;
+    }
+  }
+  // }
+}
+
 /* ==========================================================================
    Component: Nav
  ============================================================================ */
@@ -190,43 +226,6 @@
 }
 
 
-// Tabs justify mixin
-// =============================================================================
-
-.nav-tabs-justify() {
-  border-bottom: 0;
-
-/*  > li > a {
-    margin-right: 0;
-    border-radius: @global-radius;
-  }
-
-  > .am-active > a {
-    &,
-    &:hover,
-    &:focus {
-      border: 1px solid @nav-tabs-justify-link-border-color;
-    }
-  }*/
-
-  // @media @medium-up {
-    > li > a {
-      margin-right: 0;
-      border-bottom: 1px solid @nav-tabs-justify-link-border-color;
-      border-radius: @global-radius @global-radius 0 0;
-    }
-
-    > .am-active > a {
-      &,
-      &:hover,
-      &:focus {
-        border-bottom-color: @nav-tabs-justify-active-link-border-color;
-      }
-    }
-  // }
-}
-
-
 // Hooks
 // =============================================================================
 

less/thumbnail.less

@@ -34,9 +34,9 @@
   }
 
   // Add a hover state for linked versions only
-  a&:hover,
-  a&:focus,
-  a&.active {
+  a.@{ns}thumbnail:hover,
+  a.@{ns}thumbnail:focus,
+  a.@{ns}thumbnail.active {
     border-color: @thumbnail-hover-border;
     background-color: @thumbnail-hover-bg;
     .hook-thumbnail-hover;

less/topbar.less

@@ -154,7 +154,7 @@
           content: "";
           .caret-up(7px, @topbar-bg);
           opacity: 0;
-          .transition(opacity .1s);
+          transition: opacity .1s;
         }
 
         &:hover:after {
@@ -341,7 +341,7 @@
   right: 0;
   left: 0;
   z-index: @z-index-topbar-fixed;
-  .translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 .@{ns}topbar-fixed-top {

less/ui.alert.less

@@ -141,7 +141,7 @@
 
 // Misc
 // =============================================================================
-.hook-alert-misc();
+.hook-alert-misc;
 
 
 // Hooks

less/ui.component.less

@@ -15,7 +15,7 @@
 
 .@{ns}fade {
   opacity: 0;
-  .transition(opacity .2s linear);
+  transition: opacity .2s linear;
   &.@{ns}in {
     opacity: 1;
   }
@@ -30,14 +30,18 @@
   &.@{ns}in {
     display: block;
   }
-  tr&.@{ns}in {
-    display: table-row;
-  }
-  tbody&.@{ns}in {
-    display: table-row-group;
-  }
 }
 
+// change code style for sass converter
+tr.@{ns}collapse.@{ns}in {
+  display: table-row;
+}
+
+tbody.@{ns}collapse.@{ns}in {
+  display: table-row-group;
+}
+
+
 .@{ns}collapsing {
   position: relative;
   height: 0;

less/ui.pureview.less

@@ -76,7 +76,6 @@
 
     &.@{ns}pureview-slide-next {
       transform: translate(100%, 0);
-      .translate3d(100%);
       // visibility: visible;
       z-index: 109;
     }

tools/tasks/sass.js

-'use strict';
-
-/* jshint node: true */
-
-var path = require('path');
-var fs = require('fs');
-var _ = require('lodash');
-var format = require('util').format;
-var browserify = require('browserify');
-var transform = require('vinyl-transform');
-var del = require('del');
-var runSequence = require('run-sequence');
-var gulp = require('gulp');
-var $ = require('gulp-load-plugins')();
-var replace = require('gulp-replace');
-
-gulp.task('sass:copy', function() {
-  return gulp.src('./less/*.less')
-    .pipe($.rename(function(path) {
-      path.extname = '.scss';
-    }))
-    .pipe(gulp.dest('./dist/scss'));
-});
-
-gulp.task('sass:convert', function() {
-  return gulp.src('./dist/scss/*.scss')
-    // change less/ dir to scss/ on imports
-    .pipe(replace(/\/less\//g, '/scss/'))
-    // gradient filter
-    .pipe(replace(/filter:\s*e\(\%\("progid:DXImageTransform\.Microsoft\.gradient\(startColorstr='\%d',\s*endColorstr='\%d',\s*GradientType=(\d)\)",\s*argb\((@.+)*\),\s*argb\((@.*)\)\)\)/g, function(all, $1, $2, $3) {
-      return format("filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='\#{ie-hex-str(%s)}', endColorstr='\#{ie-hex-str(%s)}', GradientType=%d)", $2, $3, $1);
-    }))
-    // reset-filter()
-    .pipe(replace(/filter:\s*e\(\%\(.+\)\);/g, 'filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);'))
-    .pipe(replace(/\.less/g, '.scss'))                                 // change .less extensions to .scss on imports
-    .pipe(replace(/@/g, '$'))                                          // convert variables
-    .pipe(replace(/ e\(/g, ' unquote('))                               // convert escape function
-    // covert mixin
-    .pipe(replace(/\.([\w-]*)\s*\((.*)\)\s*\{/g, function(match, $1, $2) {
-      return '@mixin ' + $1 + '(' + $2.replace(/;/g, ',') + ') {';
-    }))
-    // .size() in .square
-    .pipe(replace('.size($size; $size);', '@include size($size, $size);'))
-    .pipe(replace(/\.clearfix(\(\))?;/g, '@include clearfix;'))
-    .pipe(replace(/\.tab-focus(\(\))?;/g, '@include tab-focus;'))
-    // media query variables
-    .pipe(replace(/[\$|@]media\s*(\$\w+-\w+)\s*\{/g, '@media #{$1} {'))
-    // comment empty mixins
-    .pipe(replace(/@mixin ([\w\-]*)\s*\((.*)\)\s*\{\s*\}/g, '// @mixin $1($2){}'))
-    // hook calls
-    .pipe(replace(/\.(hook[a-zA-Z\-\d]+);/g, '// @include $1();'))
-    .pipe(replace(/\$(import|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes)/g, '@$1')) // replace valid '@' statements
-    .pipe(replace(/(\$[\w\-]*)\s*:(.*);\n/g, '$1: $2 !default;\n'))    // make variables optional
-    .pipe(replace(/\$\{/g, '#{$'))                                      // string literals: from: /~"(.*)"/g, to: '#{"$1"}'
-    .pipe(replace(/~("[^"]+")/g, 'unquote($1)'))                       // string literals: for real
-    .pipe(gulp.dest('./dist/scss'));
-});
-
-gulp.task('sass', function(cb) {
-  runSequence('sass:copy', 'sass:convert', cb);
-});

tools/tasks/sass/README.md

+## Amaze UI Sass Converter
+---
+
+将 Less 转换为 Sass。

tools/tasks/sass/index.js

+'use strict';
+
+/* jshint node: true */
+
+var path = require('path');
+var format = require('util').format;
+var del = require('del');
+var runSequence = require('run-sequence');
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+var replace = require('gulp-replace');
+var sassPath = './dist/sass';
+var paths = {
+  scss: path.join(sassPath, 'scss'),
+  widget: path.join(sassPath, 'widget')
+};
+
+gulp.task('sass:clean', function(callback) {
+  del(sassPath, callback);
+});
+
+gulp.task('sass:copy:less', function() {
+  return gulp.src('./less/*.less')
+    .pipe($.rename(function(path) {
+      path.extname = '.scss';
+    }))
+    .pipe(gulp.dest(paths.scss));
+});
+
+gulp.task('sass:copy:components', function() {
+  return gulp.src('./widget/**/*')
+    .pipe($.rename(function(path) {
+      if (path.extname === '.less') {
+        path.extname = '.scss';
+      }
+    }))
+    .pipe(gulp.dest(paths.widget));
+});
+
+gulp.task('sass:convert', function() {
+  return gulp.src([
+    paths.scss + '/*.scss',
+    paths.widget + '/*/src/*.scss'
+  ])
+    // change less/ dir to scss/ on imports
+    .pipe(replace(/\/less\//g, '/scss/'))
+    // gradient filter
+    .pipe(replace(/filter:\s*e\(\%\("progid:DXImageTransform\.Microsoft\.gradient\(startColorstr='\%d',\s*endColorstr='\%d',\s*GradientType=(\d)\)",\s*argb\((@.+)*\),\s*argb\((@.*)\)\)\)/g, function(all, $1, $2, $3) {
+      return format("filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='\#{ie-hex-str(%s)}', endColorstr='\#{ie-hex-str(%s)}', GradientType=%d)", $2, $3, $1);
+    }))
+    // reset-filter()
+    .pipe(replace(/filter:\s*e\(\%\(.+\)\);/g, 'filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);'))
+    // change .less extensions to .scss on imports
+    .pipe(replace(/\.less/g, '.scss'))
+    // convert variables
+    .pipe(replace(/@/g, '$'))
+    // convert escape function
+    .pipe(replace(/ e\(/g, ' unquote('))
+    // covert mixin
+    .pipe(replace(/\.([\w-]*)\s*\((.*)\)\s*\{/g, function(match, $1, $2) {
+      return '@mixin ' + $1 + '(' + $2.replace(/;/g, ',') + ') {';
+    }))
+    // gradient mixins
+    .pipe(replace(/\.(gradient-[\w-]+[\d\w]*)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // button.less
+    .pipe(replace(/\.(button-\w+)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // form.less
+    .pipe(replace(/\.(form-field-\w+)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // nav.less
+    .pipe(replace(/\.nav-tabs-justify(\(\))?;/g, '@include nav-tabs-justify();'))
+    // caret: .caret-up
+    .pipe(replace(/\.(caret-\w+)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // .size() in .square
+    .pipe(replace('.size($size; $size);', '@include size($size, $size);'))
+    // .square();
+    .pipe(replace(/\.square\((.*)\);/g, '@include square($1);'))
+    // .border-*-radius();
+    .pipe(replace(/\.(border-\w+-radius)\((.*)\)/g, '@include $1($2)'))
+    // comment.less
+    .pipe(replace(/\.(comment-highlight-variant)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // icon.less: .icon-btn-size();
+    .pipe(replace(/\.(icon-btn-size)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // input-group.less
+    .pipe(replace(/\.(input-group-color-variant)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // list.less
+    .pipe(replace(/\.(list-item.*)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // panel.less
+    .pipe(replace(/\.(panel-variant)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // progress.less
+    .pipe(replace(/\.(progress-bar-variant)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // utility.less
+    .pipe(replace(/\.(spacing-.*|text-align-variant|angle-\w+-variant)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);',
+          $1, $2.replace(/;/g, ',').replace(/~/g, 'unquote'));
+      }))
+    // plugin style
+    .pipe(replace(/\.(alert-variant|nav-divider)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // widgets style
+    .pipe(replace(/\.(line-clamp-height|max-thumb-height)\((.*)\);/g,
+      function(match, $1, $2) {
+        return format('@include %s(%s);', $1, $2.replace(/;/g, ','));
+      }))
+    // .clearfix
+    .pipe(replace(/\.clearfix(\(\))?;/g, '@include clearfix;'))
+    // .am-icon-font();
+    .pipe(replace(/\.am-icon-font(\(\))?;/g, '@include am-icon-font;'))
+    .pipe(replace(/\.tab-focus(\(\))?;/g, '@include tab-focus;'))
+    .pipe(replace(/\.(text-hide|angle-base|reset-filter)(\(\))?;/g, '@include $1();'))
+    // .text-overflow()
+    .pipe(replace(/\.(text-overflow|scrollable)\((.*)\);/g, '@include $1($2);'))
+    // media query variables
+    .pipe(replace(/[\$|@]media\s*(\$\w+-?\w+)\s*\{/g, '@media #{$1} {'))
+    // comment empty mixins
+    .pipe(replace(/@mixin ([\w\-]*)\s*\((.*)\)\s*\{\s*\}/g, '// @mixin $1($2){}'))
+    // hook calls
+    .pipe(replace(/\.(hook[a-zA-Z\-\d]+)(\(\))?;/g, '// @include $1();'))
+    .pipe(replace(/\$(import|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes)/g, '@$1')) // replace valid '@' statements
+    .pipe(replace(/(\$[\w\-]*)\s*:(.*);\n/g, '$1: $2 !default;\n'))    // make variables optional
+    .pipe(replace(/\$\{/g, '#{$'))                                      // string literals: from: /~"(.*)"/g, to: '#{"$1"}'
+    // string literals: for real
+    .pipe(replace(/~("[^"]+")/g, 'unquote($1)'))
+    .pipe(gulp.dest(function(file) {
+      if (file.path.indexOf('/widget/') > -1) {
+        return paths.widget;
+      }
+      return paths.scss;
+    }));
+});
+
+gulp.task('sass:replace', function() {
+  return gulp.src(['amui.scss', 'amazeui.scss'], {cwd: paths.scss})
+    .pipe(replace('@import "grid.scss";', ''))
+    .pipe(replace('@import "block-grid.scss";', ''))
+    .pipe(replace('@import "table.scss";', ''))
+    .pipe(gulp.dest(paths.scss));
+});
+
+gulp.task('sass', function(callback) {
+  runSequence(
+    'sass:clean',
+    ['sass:copy:less', 'sass:copy:components'],
+    'sass:convert',
+    'sass:replace',
+    callback);
+});

widget/gallery/src/gallery.less

@@ -7,7 +7,7 @@
   }
 }
 
-&[data-am-gallery*='pureview'] {
+[data-am-gallery*='pureview'] {
   img {
     cursor: pointer;
   }

widget/list_news/src/list_news.default.less

@@ -54,7 +54,7 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       line-height: 1.3em;
-      .line-clamp-height(2)
+      .line-clamp-height(2);
     }
 
     // 缩略图在上

widget/pagination/src/pagination.select.less

@@ -46,7 +46,7 @@
     }
   }
 
-  .hook-am-pagination-select();
+  .hook-am-pagination-select;
 }
 
 .hook-am-pagination-select() {}