Stylus 部分的にborder-radius(角丸)にする

前にSASS (Compass)での方法を書きました。
個人的にはStylusが好きなのでStylusで部分的に角丸にする方法。忘れるのでメモしておきます。

SASSで言う所のCompassでしょうか？
Stylusではnibを使うと便利です。

nibをインストール

nibがない場合はnpmでインストールします。

$ npm install nib

stylusファイルの先頭でインポートします。

@import 'nib'

glupでstylusをコンパイルする場合はgulpでnibをインポートさせることもできます。

// gulpfile.js
var gulp    = require('gulp'),
    plumber = require('gulp-plumber'),
    stylus  = require('gulp-stylus'),
    nib     = require('nib'); // nib を読み込む

gulp.task('stylus', function() {
  return gulp.src( devDir + '/stylus/*.styl' )
    .pipe( plumber() )
    .pipe( stylus({
      import: ['nib'], // nib をインポート
      use: [nib()],     // nib を使用
      compress: true,
      linenos: false
    }) )
    .pipe( gulp.dest( destDir ) );
});

左上 (top left) だけ角丸。

border-radius: top left $radius

左上 (top right) だけ角丸。

border-radius: top right $radius

左上 (bottom left) だけ角丸。

border-radius: bottom left $radius

左上 (bottom right) だけ角丸。

border-radius: bottom right $radius

上側 (top left & top right) を角丸。

border-radius: top $radius

下側 (bottom left & bottom right) を角丸。

border-radius: bottom $radius

右側 (top right & bottom right) を角丸。

border-radius: right $radius

左側 (top left & bottom left) を角丸。

border-radius: left $radius

　
Compassとは違って、プロパティ名はborder-radiusで統一されていて、値にどこを角丸にするかを指定できるので覚えやすいように感じました。(プロジェクトごとにCompassだったり、Stylusだったりしてると混乱しそうですが...)

---

• This page is moved
• nib - CSS3 extensions for Stylus
• compass 部分的に角丸(border-radius)りたい。 - かもメモ
• Gulp stylus @import nib にハマる。 - かもメモ

吉成曜画集 イラストレーション編