stylusのmixinでメディアクエリ指定をわかりやすく書く

stylus
 
まずはgulpでstylusが動く環境を用意します。

gulp導入についての記事を書いていないのでそのうち書きます(゚Д゚;)

下記はstylusタスクになります。
パスは適宜変更してください。

var
  gulp          = require('gulp'),
  stylus        = require('gulp-stylus');

gulp.task('stylus', function() {
  return gulp.src([
        './src/**/*.styl',
        '!./src/**/_*.styl'
      ])
  .pipe(stylus())
  .pipe(gulp.dest('../'))
});

 
次にstylusで下記のようなmixinを作成します。

pc()
  @media screen and (min-width: 769px)
    {block}

sp()
  @media screen and (max-width: 768px)
    {block}


 
実際に使用してみます。

.var
  background-color #000
  +pc()
    margin 20px
  +sp()
    margin 10px
  .foo
    h1
      +pc()
        font-size 18px
      +sp()
        font-size 14px

 
コンパイル結果

.var {
  background-color: #000;
}
@media screen and (min-width: 768px) {
  .var {
    margin: 20px;
  }
}
@media screen and (max-width: 767px) {
  .var {
    margin: 5%;
  }
}
@media screen and (min-width: 768px) {
  .var .foo h1 {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  .var .foo h1 {
    font-size: 14px;
  }
}

 
う~ん。。stylusの書き方はわかりやすいけど、cssをもうちょっとすっきりさせたい。。

その場合は、下記のmoduleを使いましょう。

gulp-postcss
css-mqpacker

stylusのタスクに追記します。

var
  gulp          = require('gulp'),
  stylus        = require('gulp-stylus'),
  postcss       = require('gulp-postcss');

gulp.task('stylus', function() {
  return gulp.src([
        './src/**/*.styl',
        '!./src/**/_*.styl'
      ])
  .pipe(stylus())
  .pipe(postcss([
    require('css-mqpacker')
  ]))
  .pipe(gulp.dest('../'))
});

 
再度コンパイルしてみます。

.var {
  background-color: #000;
}
@media screen and (min-width: 768px) {
  .var {
    margin: 20px;
  }
  .var .foo h1 {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  .var {
    margin: 5%;
  }
  .var .foo h1 {
    font-size: 14px;
  }
}

 
すっきりしましたね。