読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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だったりしてると混乱しそうですが...)


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

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