LoginSignup
301

More than 5 years have passed since last update.

Stylus入門したときのまとめ

Last updated at Posted at 2014-03-24

Sassと比べると日本語の情報が少ないと感じたので、Stylusを始めるときに、 最低限これだけ知っておきたい 書き方をまとめてみた。

Stylusとは

Stylus は Node.js 製の CSS プリプロセッサ-。Express、Jade (Pug) と同じ人が開発してる。Sass と Less より後発で、2つの良いとこ取り をしていて、機能も豊富(らしい)。

インストールは npm から

$ npm install -g stylus

記述は SCSS 記法のように、CSS っぽい書き方と

.hoge {
  color: red;

  &:hover {
    color: blue;
  }
}

SASS 記法のように、インデントベースの記述もできる。:; も省略可能。せっかくなのでこの記法で書いてみた。

.hoge
  color red

  &:hover
    color blue

CSS っぽい書き方とインデントの書き方ができるが、拡張子は .styl のみで、記法を混在させることもできる。

変数と演算

変数に値を代入しておくことで、変数名で任意の場所から値を参照することができる。

base-color = #00a6fc

.title
  color base-color

@ をつけると、直前のそのプロパティを参照することもできる。かっこ必要。

演算もできる。

.container
  width 100%

  .sidebar
    width (@width * 0.3)

条件分岐と繰り返し

if / else 文

liquid = true

.hoge
  if liquid
    width 100%
  else
    width 960px
  ...

for / in 文

array = 1 2 3 4

 for num in array
   .mg-{num * 5}
     margin num * 5px

1行目が 配列の定義。,(カンマ)区切ることもできる。また、 変数の展開は{}でできる。

パーシャル

Stylus でも Sassと同じように、ファイル名の前に _ を付けることで、コンパイル後に CSS ファイルが生成されない。また、Sassと違って、 @import するときに_を省略することはできない。

@import '_setting'

.hoge
  ...

ミックスイン

ミックスインの定義と参照方法は以下の通り。

box-sizing(arg)
  -webkit-box-sizing arg
  -moz-box-sizing arg
  box-sizing arg

  .hoge
    box-sizing border-box

Sass のように、 @mixin とか @include とか付けなくてもいい。ミックスインを参照しているところを見ると、プロパティと同じように使えている( 透過的mixin )。

Stylusでは、 CSSと全く同じ記述方法で抽象化することができる。

継承(extend)

Stylus には、extend の機能もある。

.btn
  ...
  ...

.btn-blue
  @extend .btn
  background-color

ちなみに、 @extend@extends のどっちでもいい。

Stylusを使ってみて

個人的に、Grunt や CoffeeScript、Jade、Yoeman、そして Stylus、フロント開発で使うツールをすべて npm で管理できるのはいいと思った。

Stylus は CSS と全く同じ記述で機能をラップできるので、@import するファイルだけ作っておけば、生の CSS しか書けない人でも使うことができる。Sass か Less がプリプロセッサのデファクトになっている感はあるけど、Stylus という選択肢もありだと思う。

参考にしたサイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
301