9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CeresAdvent Calendar 2018

Day 19

Sassからの、はじめてのStylus

Posted at

今までSass(SCSS)を使ってきた人が、はじめてStylusを使ってみた備忘録です。

Stylusとは?

プロジェクトにおけるSass(SCSS)事情

今までのプロジェクトでは、

  • SCSS記法
  • 拡張子は.scss
  • 呼称はSass(さす)

という形態をとってきました。

なぜSCSS記法かと言うと、

  • デザイナーもコーディングをするシーンがある
  • でもコーディングがちょっと苦手だったりもする
  • CSSなら基本的なものは組める(positionとかはちょっとごにょごにょ)

これらの状況から『CSSの書き方+便利に書ける!』という触れ込みでハードルを下げつつ、Sass(SCSS)とプロジェクトに馴染んで貰おうという狙いで採用しています。

一方で、

「そろそろ他のCSSプリプロセッサを試したい!」という欲求もあり、新プロジェクトではStylusを導入してみました。
実際に調査・実装してくれたのは、@m-shinozaki@g-taguchiのお二人なので、自分は触ってみた所感を基本部分からまとめてみます。

Sass(SCSS)とStylusの比較

##基本編

項目 SCSS記法 Stylus
括弧{ } 必要 不要
コロン:
セミコロン;
必要 不要
入れ子 {}
インデント
インデントのみ

コードで比較すると以下のようになります。
実際にコードを書くと、この括弧やセミコロンを不要とした書き方の楽さだけで感動します。

SCSS
.sample {
    color: #f00;
    p {
        margin-bottom: 16px;
    }
}
Stylus
.sample
    color #f00
    p
        margin-bottom 16px

変数と親要素の参照

項目 SCSS記法 Stylus
変数 $:;が必要 =
親要素の参照 & &
SCSS
// 変数
$black: #000;

// 親要素の参照
.sample {
    color: $black;
    &.box {
        background-color: #ccc;
    }
}

Stylus
// 変数
black = #000

// 親要素の参照
.sample 
    color black
    &.box
        background-color #ccc

セレクタ編

項目 SCSS記法 Stylus
隣接セレクタ + +
直下セレクタ > >
SCSS
.sample {
    color: #000;
    + small {
        font-size: 10px;
    }
    > p {
        margin-bottom 16px
    }
}
Stylus
.sample 
    color #000
    + small
        font-size 10px
    > p
        margin-bottom 16px

mixin編

項目 SCSS記法 Stylus
mixin @mixinで定義
@includeで呼び出し
@〜の記載不要
SCSS
// mixin
@mixin Set-box {
    padding: 10px;
}

.sample {
    @include Set-box; // mixin呼び出し
    background: #ccc;
}
Stylus
// mixin
Set-box()
    padding 10px

.sample
    Set-box()  // mixin呼び出し
    background #ccc

extend編

項目 SCSS記法 Stylus
extend @extendで呼び出す @extendで呼び出す
プレースホルダーセレクタ %で定義 $で定義
※プレースホルダーセレクタを使用することで、コンパイル時に出力されなくなります
SCSS
// extend
%Set-box {
    padding: 10px;
}

.sample {
    @extend %Set-box; // extend呼び出し
    background: #ccc;
}
Stylus
// extend
$Set-box()
    padding 10px

.sample
    @extend $Set-box()  // extend呼び出し
    background #ccc

Stylusとエディターについて

Stylus導入時、どのエディターを使う?という話題もあったので。

項目 Sass(SCSS) Stylus 備考
SublimeText メインで利用
Atom
Php(Web)Storm ※1
  • 個人的にAtomも併用していましたが、プロジェクト内での差分等は特に出ず、問題なく使えました
  • ※1)Storm系では、Emmetを利用した記述では:がついてしまうので少し不便でした
    • 実はStorm系でも使えるよなどありましたらツッコミお願いします

Stylusに触れてみての所感

  • {}:;からの開放に、仕事が捗るようになった
    • 上記記法はSASS記法でも実現できるので、いきなりStylusは…という場合はSASS記法の選択からでも良いかなと思います
  • Stylusに慣れたあとSCSS記法に戻ると{ }が!括弧が〜〜〜となるので要注意
    • (他のプロジェクトも移行したい欲が湧きます)
  • Sass(SCSS)をStylusに変換するツールもあります(参考まで)

最後に

これからSass(SCSS記法)→Stylusへと移行するかもしれない方の参考になればと思います。

9
6
0

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
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?