Help us understand the problem. What is going on with this article?

Stylus入門したときのまとめ

More than 1 year has passed since last update.

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 という選択肢もありだと思う。

参考にしたサイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした