Stylus Objectでらくちんカラー管理したい

StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。

しかし、色のバリエーションがある時に

$primary = #158cba
$primary-dark = #127ba3
$success = #28b62c
$success-dark = #28b62c

の様に全て変数で書いていくのは、なかなか面倒です。
そこで、値をオブジェクトにして簡単に色を取得できる方法を考えてみました。

stylus カラーパレットでの管理方法

// variable.styl
// カラーパレットをオブジェクトで作成
$color-palette = {
  default: {
    color:      #555,
    base:       #eee,
    border:     #e2e2e2,
    dark:       #d5d5d5,
    border_dk:  #c3c3c3,
    darker:     #C8C8C8,
    border_dkr: #c3c3c3 
  },
  primary: {
    color:      #fff,
    base:       #158cba,
    border:     #127ba3,
    dark:       #127ba3,
    border_dk:  #0c516c,
    darker:     #106a8c,
    border_dkr: #0c516c
  },
  // 略
}

使い方

ex: 色を返すだけのミックスイン

// Mixin: Return color
// @param: $type: color type
// @param: $tone: color's tone
get-color($type = "default", $tone = "base")
  return $color-palette[$type][$tone]

// How to use
.c-bg-primary
  background-color: get-color("primary")
.c-bg-primary-darker
  background-color: get-color("primary", "darker")

stylusはオブジェクトから値を取得するのに、javascriptと同じようにObject[val]の形式でも取得することが可能なので、darkやlightといったカラーバリエーションがあっても1つのミックスインに$typeと$toneを渡せば、トーンに合った色を簡単に取得することができました。

応用

ボタンなど色の出力のパターンが決まっているものは、ミックスインで出力するCSSのテンプレートを作ってしまえば簡単にバリエーションのCSSを作成することができます。

ex: ボタン

// Mixin: Button Variation
button-variant($type)
  color: $type.color
  background-color: $type.base
  border-color: $type.border
  &:hover
    color: $type.color
    background-color: $type.dark
    border-color: $type.border_dk
  &:active,
  &.is-active
    color: $type.color
    background-color: $type.darker
    border-color: $type.border_dkr
  &:disabled,
  &.is-disabled
    color: $type.color
    background-color: $type.base
    border-color: $type.border

// ボタンのカラーバリエーションのCSSを出力
for $key, $colors in $color-palette
  .c-btn-{$key}
    button-variant($colors)

ex: ラベル

// Mixin: Label Variation
label-variant($type, $tone = "base")
  color: $type.color
  background-color: $type[$tone]

// ラベルのバリエーションのCSSを出力
// Label Variation
for $key, $colors in $color-palette
  .c-label-{$key}
    label-variant($colors)

  // Darker Labels Style
  .c-label-{$key}-darker
    label-variant($colors, "darker")

Demo

See the Pen Stylus Color Manage by KIKIKI (@chaika-design) on CodePen.

---

[参考]

• Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor
• Scssのcolor palette 管理についてのメモ - Qiita
• dynamic variables · Issue #1450 · sass/sass · GitHub
• CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM

TVアニメ『アイカツスターズ!』新OP/EDテーマ「1, 2, Sing for You!/So Beautiful Story/スタージェット!」

Gulp min化したJS・CSSに自動でコメントを入れたい

コーディングをする時、Gulpでコンパイル&min化をしています。
min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。

javascript

ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglifyのオプションでmin化する際に残すことができるみたいです。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    // console.logを削除するパッケージ
    stripDebug = require("gulp-strip-debug"),
    // jsをmin化するパッケージ
    uglify = require("gulp-uglify");

gulp.task('js. minify', function(cb) {
  return gulp.src( FILE_PATH )
    .pipe( stripDebug() )
    .pipe( uglify({
      // このオプションを使うと/*! */のコメントは残る
      preserveComments: 'some'
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( DEST_DIR ) );
});

/*! License */

↑ この/*!で始まる形式でないコメントは消えてしまうので、違う形式でライセンスが書かれているファイルはライセンスのコメントを残すことができないので注意が必要。

CSS

いつもCSSのmin化につかっているgulp-clean-cssでは特定の形式のコメントを残す方法が無さそうでした…
ライセンス情報を残すオプションのある良い感じのライブラリがあれば教えてください。

ファイルの先頭にテキストを追加できるパッケージを使う

gulp-header を利用すればJS, CSSに関わらず好きなコメントをファイルの先頭に追加できるようです。
min化したファイルに最後にバージョン情報や最終更新日時を追加するのに良さそうです。

ex: min化したCSSにpackage.jsonに書かれている情報を元にコメントを追加する

var gulp = require("gulp"),
    rename = require('gulp-rename'),
    header = require('gulp-header'),
    cssminify = require('gulp-clean-css'),
    // 日付を簡単にフォーマットできるパッケージ
    moment = require('moment');

// package.jsonを読み込む
var pkg = require('./package.json');
// CSSに追加するテキスト
var banner = ['/**',
    ' * <%= pkg.name %>',
    ' * @version <%= pkg.version %>',
    ' * @author <%= pkg.author %>',
    ' * @lastmodified <%= today %>',
    ' */',
    ''].join('\n');


gulp.task('css.minify', function(cb) {
  var versionDate = moment().format('YYYY-MM-DD');

  return gulp.src( FILE_PATH )
    .pipe( cssminify() )
    .pipe( rename({
      extname: '.min.css'
    }) )
    .pipe( header(banner, {
      pkg: pkg,
       today: versionDate
     }) )
    .pipe( gulp.dest( DEST_DIR ) );
});

gulp css.minifyでタスクを実行すると、min化されたCSSファイルの先頭に下記のようなコメントが追加されます。

/**
 * PROJECT-NAME
 * @version 1.0.0
 * @author KiKiKi_KiKi
 * @lastmodified 2016-11-29
 */

完璧にライブラリなどに書かれたライセンス情報のコメントを自動的に残す方法は達成できませんでしたが、JSではuglifyのオプションを利用すればそれなりに上手く行きそうな気がします。
また、gulp-headerを使えばプロジェクトの情報などを動的に追加することができるので、CSSでも追加するコメントのテンプレートを予め作成しておけば、ある程度カバーできそうだなぁと思いました。

---

[参考]

• gulp-clean-css
• gulp-uglify
• gulp-uglifyで特定のコメントを残したままJavaScriptをminifyする - Qiita
• gulp-header
• Moment.js | Home

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！

高校生みたいなバックパックが思ったより便利だった

超ド田舎に住んでいるので終電時間がめちゃめちゃ早く、ちょっとした勉強会とかに参加しても一泊しなければならない事が多くラップトップ(ノートPC)と一泊分の着替え+本や筆記用具の入るいい感じのカバンを探していました。(ちょっとした勉強会に参加するにも片道90分くらいの都市部に行くしか無いのだ！終電は21時だぞ☆)
PCバックで検索してレビューとかを見ていても結構お高い商品ばかりだったのですが、amazonで見つけた高校生みたいなカバンがお値段以上に良い感じでたので情報共有します。

凄く高校生みたいです... ミソボーイの私が背負うのは見た目がアレかもしれませんが、私は気にしません!!!!

良かった点

• 13インチのラップトップが余裕で入る
  A4サイズの本やノートも余裕で入ります。
• ラップトップ+周辺機器と着替えを入れてもまだ本やペットボトルが入るくらい余裕がある
• 安い！amazonの値引きも合って3000円未満で買えた

とにかく、見た目以上に大容量でした。
ラップトップと着替えと本やノートを入れてますが、まだメインの部分には物が入る余裕があります。

少し残念だった点

• 底のクッションが薄い
  PCを直で入れた状態で雑に扱うと衝撃が大きそうなので、気にする人はPCもケースに入れた方が良いかも。
• 背負う面の通気が無い
  お高いバックパックには大抵ある背面の通気構造がないので、夏場や長時間背負ってると蒸れると思う。
• 前面収納がシングルジップ
  メインの所と同様にダブルジップだと尚良かったと思う。
• たくさん入るので、テキトーに入れると鞄の中がグチャグチャになる
  テキトーに詰めると取り出しにくくなります。

もう少し使ってみないと解らない所

• けっこう丈夫っぽい。
  安い商品は縫製が結構アレですぐ壊れたりってありがちですが、力がかかる部分には補強がされてたりして思ったよりしっかり縫製されてるように思いました。
  ただ沢山物を入れると重くなるので、上部の引っ掛ける部分は大丈夫かな〜ってなる部分はあります。(トイレに入ったときとかね！)
• 防水性
  カバーがあるのである程度防げると思いますが、どれくらい防水性があるのかは雨に打たれてないので今の所謎です。まぁ容量あるので折りたたみ傘でも入れておけよって感じかもですが。

色々書きましたがamazonの割引で3000円未満で買えたので、値段の割には良い買い物だったかなと思ってます。
大容量故に入れすぎると重くなってしまうので、欲張って入れすぎないようにする必要がありそうですw
(僕はすぐ本を入れすぎてしまうので...)
ブルジョアになれば、もっとお高いカバンに買い換えるかもしれませんが、それまではこの子を使い倒そうかなって思ってます。

Riorune リュック アースカラー リュックサック 大容量 高校生 大学生 メンズ レディース (ブラック)