[CSSチュートリアル】SCSS50%スタイルコード削減のための14の実践レッスン

$color-primary: #3ecacb;  
$color-success: #4fc48d;  
$color-warning: #f3d93f;  
$color-danger: #f6588e;  
$color-info: #27c6fa; 

$common-path: '. /primary/assets/img/';  
$icon-see: $common-path+'icon-see.png';  
$icon-play: $common-path+'icon-play.png';  
$icon-comment: $common-path+'icon-comment.png';  
$icon-checkbox: $common-path+'icon-checkbox.png'; 

@import ". /base.scss";  
@import ". /webupload.scss";  
@import ". /message-hint.scss"; 

.tea-assignhw {   
 &__top {    
  margin: 0;    
}   
 &__content {   
   padding-left: 45px;   
 }    
&__gradeselect {  
   width: 158px;    
 } 
} 

&__hint {  
  margin: 20px;   
   font-size: 14px;   
  > p:first-child {   
     font-weight: bold;    
 }  
} 

&__input {   
 width: 220px;   
 & + span {     
   margin-left: 10px;    
 }  
} 

&__browse {  
  background: url($btn-search) no-repeat;   
&:hover {     
  background: url($btn-search) -80px 0 no-repeat;   
}    
&:visited {   
  background: url($btn-search) -160px 0 no-repeat;   
 }  
} 

@mixin paneactive($image, $level, $vertical) {   
  background: url($image) no-repeat $level $vertical;    
  height: 100px;    
  width: 30px;   
  position: relative;    
  top: 50%;  
}  
&--left-active {    
  @include paneactive($btn-flip, 0, 0);  
}  
&--right-active {   
  @include paneactive($btn-flip, 0, -105px);  
} 

.common-mod {    
  height: 250px;   
  width: 50%;    
  background-color: #fff; 
  text-align: center;  
}  
&-mod {   
  @extend .common-mod;    
  float: right; 
 }  
&-mod2 {   
  @extend .common-mod;  
} 

@mixin pane($dir: left) {    
  width: 35px;   
  display: block;    
  float: $dir;    
  background-color: #f1f1f1;  
}  
&__paneleft {   
  @include pane;  
}  
&__paneright {  
  @include pane(right);  
} 

@mixin home-content($class) {   
 . #{$class} {     
   position: relative;  
    background-color: #fff;   
    overflow-x: hidden;    
    overflow-y: hidden;    
  &--left {      
    margin-left: 160px;  
  }     
  &--noleft {   
     margin-left: 0;    
 }   
 }  
} 

ps-input {   
   display: block;    
   &__inner {     
    -webkit-appearance: none;    
     padding-left: #{$--input-height + 10  
   };      
     padding-right: #{$--input-height + 10  
   };     
  }  
} 

&:focus {   
  color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);    
  border-color: transparent;    
  background-color: transparent;}  
&:active {    
  color: mix($--color-black, $--color-primary, $--button-active-shade-percent);   
  border-color: transparent; background-color: transparent;  
} 

@for $i from 2 through 8 {    
.com-hwicon {      
 > div:nth-child(#{$i}) {  
    position: relative;  
    float: right;    
   }    
 }  
} 

$img-list: (    
 (accessimg, $papers-access),   
  (folderimg, $papers-folder),  
  (bmpimg, $papers-bmp),    
  (xlsimg, $papers-excel),    
  (xlsximg, $papers-excel),    
  (gifimg, $papers-gif),   
  (jpgimg, $papers-jpg),    
  (unknownimg, $papers-unknown) 
 ); 
 @each $label, $value in $img-list { 
  .com-hwicon__#{$label} {  
    @include commonImg($value);   
 }  
} 

npm install gulp stylelint gulp-postscss postcss-reporter   
stylelint-config-standard--save-dev 

var reporter = require('postcss-reporter');  
var stylelint = require('stylelint');  
var stylelintConfig = {    
  'extends': 'stylelint-config-standard',   
  'rules': {      
  'at-rule-no-unknown': [  
     true, {        
     'ignoreAtRules': [    
     'extend',       
      'include',  
      'mixin',       
      'for'       
      ]     
     }  
   ]  
  }  
};  
gulp.task('scss-lint', function() {
    var processors = [     
    stylelint(stylelintConfig),     
    reporter({       
      clearMessages: true,      
      throwError: true      
   })    
   ];    
 return gulp.src(    
   ['src/style/*.scss']// scss file to be checked by the tool   
  ).pipe(postcss(processors));});  
 gulp.task('default', ['scss-lint']); 

var stylefmt = require('gulp-stylefmt'); // css formatting autotuning tool  
gulp.task('stylefmt', function() {  
  return gulp.src(     
  ['src/style/student/index.scss' // the scss file to be checked by the tool     
  ]).pipe(stylefmt(stylelintConfig))  
    .pipe(gulp.dest('src/style/dest/student'));});  
 gulp.task('fix', ['stylefmt']); 

var gulpsass = require('gulp-sass');  
gulp.task('gulpsass', function() {   
  return gulp.src('src/style/components/hwIcon.scss')   
  .pipe(gulpsass().on('error', gulpsass.logError))     
  .pipe(gulp.dest('src/style/dest'));});  
  gulp.task('watch', function() {    
  gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);  
});