LoginSignup
77
68

More than 5 years have passed since last update.

@miwashutaro0611(miwa shuntaro)

stylusについて

Last updated at Posted at 2018-09-23

stylusとは？

StylusはSassとLessのいいとこどりと言われているCSSメタ言語の一つ。
SASS記法、SCSS記法のどちらでも記入することができるので、.sassか.scssを記載することができればstylusも入りやすいと思う。
node.jsのexpressやjadeと同じ人が開発している。
stylusの拡張子は.stylか.stylus
stylus公式サイト

SASS記法とは

div
  margin: 0
  p
    font-size: 16px

Sassがもともと採用していた記法。
拡張子は.sass
記述が非常に簡素化されているため、コーディングがコンパクト、簡潔に書くことができる。
rubyに慣れていると描きやすいかも・・・！

SCSS記法とは

div {
  margin: 0;
  p {
    font-size: 16px;
  }
}

SASSがCSSとの互換性が乏しかったために作られた記法。
拡張子は.scss
CSSの書き方がそのまま使える。
SCSSの方が書き方がCSSに近いので、CSSに慣れているとこっちの方がいいかも・・・!

stylusをとりあえず使う

stylusのインストール

$ npm install stylus -g

stylusのインストールされているのか確認

$ stylus -V

stylusのフォルダの場所

-gを使ってインストールした場合、
- windows
C:\Users\ユーザ名\AppData\Roaming\npm\node_modules\stylus
- Mac
/usr/local/lib/node_modules/stylus

にインストールされる。

stylusファイルの作成

test.stylという名前で作成

test.styl
fonts = helvetica, arial, sans-serif

body
  padding 50px
  font 14px/1.4 fonts

stylusからcssに変換

test.stylのフォルダ上で

stylus test.styl

を実行。同ディレクトリにtest.cssという名前で作成され、

test.css
body {
  padding: 50px;
  font: 14px/1.4 helvetica, arial, sans-serif;
}

という中身で出力される。

コンパイルについて

同じディレクトリに同じファイル名でコンパイル

$ stylus test.styl

出力先を指定してコンパイル

$ stylus test.styl --out path/to/directory
$ stylus test.styl -o path/to/directory

ファイルを監視して変更があればコンパイル

$ stylus -w test.styl
$ stylus --watch test.styl

stylusの書き方について

基本的な書き方

普通のcssの記載のやり方も可能。
「:（コロン）」、「;（セミコロン）」、「,（カンマ）」、「{ }（波括弧）」を省略することもできる。
- stylus

stylus
.hoge
  width 100px //記号の省略が可能

.hoge2 {
  width: 100px; //従来通りの描き方でもOK
}
  • css
css
.hoge {
  width: 100px;
}
.hoge2 {
  width: 100px;
}

コメントアウト

  • stylus
// インラインコメント（コンパイル時になくなる）
/*
   通常のコメント（コンパイル時に残る）
*/
  • css
css
/*
   通常のコメント（コンパイル時に残る）
*/

複数クラス指定

  • stylus
//カンマ（,）区切り
textarea, input
  border 1px solid #eee
// 又は改行
textarea
input
  border 1px solid #eee
  • css
css
textarea,
input {
  border: 1px solid #eee;
}

stylusで行うことができること1

基本的にはscssなどでできることと同じ。

入れ子

インデントで入れ子にできる。
- stylus

stylus
body
  color #f00
  p
    color #000
  • css
css
body {
  color: #f00;
}
body p {
  color: #000;
}

親要素参照

&で親のスタイルやセレクタを参照できる
- stylus

// 擬似クラス
a
input
  color #a7a7a7
  text-decoration underline
  &:hover
    color #000
    tect-decoration none

// カラーなどのパターン
.footer
  background-color #fff
  &.typeA
    background-color #000
  &.typeB
    background-color #333
  • css
css
a,
input {
  color: #a7a7a7;
  text-decoration: underline;
}
a:hover,
input:hover {
  color: #000;
  tect-decoration: none;
}

.footer {
  background-color: #fff;
}
.footer.typeA {
  background-color: #000;
}
.footer.typeB {
  background-color: #333;
}

変数

あらかじめ名前を決めて=でつないで使うことができる
.scssとは違うので、注意。
（.scssの場合だと、$font-size: 14px;のように記載。）
- stylus

stylus
font-size = 14px
red = #dc143c

body
  font font-size Arial, sans-serif
  border 2px solid red
  • css
css
body {
  font: 14px Arial, sans-serif;
  border: 2px solid #dc143c;
}

継承

他のセレクタに指定したスタイルを、好きなセレクタへ適用させることもできる
使い方として、使いたいセレクタのクラスを@extendで指定して使う。
- stylus

.btn
  color #000
  background-color #fff
  border:solid 1px #666
  width 80px

// 呼び出し
.btn-A
  @extend .btn
  width 200px
.btn-B
  @extend .btn
  width 150px
  • css
css
.btn,
.btn-A,
.btn-B {
  color: #000;
  background-color: #fff;
  border: solid 1px #666;
  width: 80px;
}
.btn-A {
  width: 200px;
}
.btn-B {
  width: 150px;
}

また、.（ドット）ではなく$を使うことでコンパイル時に出力されない
単体で使わない場合には、$の方がよい。
- stylus

$btn
  color #000
  background-color #fff
  border:solid 1px #666
  width 80px

// 呼び出し
.btn-A
  @extend $btn
  width 200px
.btn-B
  @extend $btn
  width 150px
  • css
css
.btn-A,
.btn-B {
  color: #000;
  background-color: #fff;
  border: solid 1px #666;
  width: 80px;
}
.btn-A {
  width: 200px;
}
.btn-B {
  width: 150px;
}

mixin（ミックスイン）

定義したスタイルを呼び出すという点では継承と同じだが、セレクタのグループ化はされない。
引数を使うこともできるので、定義したスタイルの値の一部を変更を行うこともできる。
- stylus

// スタイル定義
btn(font-color = #000)
  color font-color
  font-size 14px
  font-weight bold

// スタイル呼び出し
.btn-A
  btn()
  width 200px
.btn-B
  btn(#f0f)
  width 150px
.btn-C
  btn #ff0
  width 100px
  • css
css
.btn-A {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  width: 200px;
}
.btn-B {
  color: #f0f;
  font-size: 14px;
  font-weight: bold;
  width: 150px;
}
.btn-C {
  color: #ff0;
  font-size: 14px;
  font-weight: bold;
  width: 100px;
}

また、ミックスインの機能を使ってベンダープレフィックスを定義することもできる

  • stylus
vendor(prop, args)
    -webkit-{prop} args
    -moz-{prop} args
    {prop} args

.hoge
    vendor 'box-shadow' 1px 0  0 #CCC
  • css
css
.hoge {
  -webkit-box-shadow: 1px;
  -moz-box-shadow: 1px;
  box-shadow: 1px;
}

囲み型のmixin

  • stylus
hover()
  &:hover, &:active
    {block}

.test
  +hover()
    text-decoration underline
  • css
css
.test:hover,
.test:active {
  text-decoration: underline;
}

パーシャル

Cssのコンパイルが必要ないファイルは、ファイル名の前に「（アンダースコア）」を付与させることで、コンパイル後にCSSファイルが生成されない。
@importでファイルを指定すれば読み込むことができる。
この際、「（アンダースコア）」と拡張子は省略できる。
- stylus

@import component/btn
@import component/alert
@import component/nav

*を使って一気にインポートを行うこともできる

  • stylus
@import component/*

このように記載することで.stylファイルを追加するたびに読み込まなくても良いので、ちょっと楽。
※IR9以前の場合だと
- 1つのCSSファイル、又は1つのstyleタグ内のセレクタは4095個目までしか適応されない
- CSSファイル、またはstyleタグは31個目までしか適応されない
という制限もある。

演算

計算や文字列の操作を行うこともできる

計算と真偽値

  • stylus
stylus
body
  foo01 5px + 10
  foo02 2 ** 8
  foo03 5px * 2
  foo04 !!''
  foo05 hoge and fuga and pugya
  foo06 hoge or fuga or pugya
  foo07 1..5
  foo08 1...5
  foo09 'hoge' is a 'string'
  foo10 (1 2 3) == (1 2 3)
  foo11 (1 2 3) == (1 2)
  foo12 ((one 1) (two 2)) == ((one 1) (two 2)) 
  foo13 ((one 1) (two 2)) == ((one 1) (two)) 
  foo14 ((one 1) (two 2))[0]
  foo15 3 in (1 2 3 4)
  • css
css
body {
  foo01: 15px;
  foo02: 256;
  foo03: 10px;
  foo04: false;
  foo05: pugya;
  foo06: hoge;
  foo07: 1 2 3 4 5;
  foo08: 1 2 3 4;
  foo09: true;
  foo10: true;
  foo11: false;
  foo12: true;
  foo13: false;
  foo14: one 1;
  foo15: true;
}

値や文字列の操作

  • stylus
stylus
body
  foo01 foo + bar
  foo02 'foo ' + bar
  foo03 'foo ' + 'bar'
  foo04 'foo ' + 5px
  foo05 2s - 500ms
  foo06 5000ms == 5s
  foo07 50deg
  • css
css
body {
  foo01: foobar;
  foo02: 'foo bar';
  foo03: foobar;
  foo04: 'foo 5px';
  foo05: 1.5s;
  foo06: true;
  foo07: 50deg;
}

色の操作

  • stylus
stylus
body
  foo01 white - 50%
  foo02 black + 50%
  foo03 #eee - #f00
  foo04 #eee - rgba(black,.5)
  foo05 #cc0000 + 30deg
  • css
css
body {
  foo01: #808080;
  foo02: #808080;
  foo03: #0ee;
  foo04: rgba(238,238,238,0.5);
  foo05: #c60;
}

文字列置換

  • stylus
stylus
body
  foo '%s / %s' % (5px 10px)
  • css
css
body {
  foo: 5px / 10px;
}

条件分岐と繰り返し

forループやif文などを用いた条件分岐をプログラミング言語に近い感じで行うことができる。
1行目が 配列の定義。,（カンマ）区切ることもできる。また、 変数の展開は{}で行える。

if/else文

  • stylus
liquid = true
.hoge
  if liquid
    width 100%
  else
    width 960px
  • css
css
.hoge {
  width: 100%;
}

for/in文

  • stylus
array = 1 2 3 4
for num in array
  .mg-{num * 5}
    margin num * 5px
  • css
css
.mg-5 {
  margin: 5px;
}
.mg-10 {
  margin: 10px;
}
.mg-15 {
  margin: 15px;
}
.mg-20 {
  margin: 20px;
}

stylusで行うことができること2

  • ハッシュをCSSのプロパティ名と値に展開できる
stylus
foo = {
  width: 100px,
  height: 200px,
  background: #f0f
  '&:hover': {
    background: #ff0
  }
}
foo2 = {
  bar: {
    width: 100px,
    height: 100px,
    background: #00f,
    opacity: 0.5
  }
}
sample2 = foo2.bar

.sample1
  {foo}
.sample2
  {sample2}
css
.sample1 {
  width: 100px;
  height: 200px;
}
.sample1:hover {
  background: #ff0;
}
.sample2 {
  width: 100px;
  height: 100px;
  background: #00f;
  opacity: 0.5;
}

See the Pen QYWRqJ by miwa_shuntaro (@miwashutaro0611) on CodePen.

  • JSONを読み込んで色々できる
  • JavaScriptの関数を呼べる

参考 : http://memowomome.hatenablog.com/entry/2016/07/28/080000

sassとstylusの違いについて

参考 : SassからStylusに乗り換えてみたので違いや躓いたところなど – モンキーレンチ

Stylusの良い点について(自己判断)

@mixinとか@includeを記入しなくても良い

Sassだとmixinやincludeの部分で@を書かなければならないが、それを使わなくてもよい

  • scss
scss
@mixin font($size: 14px) {
  font-family: sans-serif;
  font-weight: normal;
  font-size: $size;
}
.hoge {
    @include font(16px);
}
  • stylus
stylus
font(size = 14px)
  font-family sans-serif
  font-weight normal
  font-size size

.hoge
    font 16px

CSSを直接読み込める

StylusはSass記法（セミコロンや括弧を省略する書き方）とscss記法（普通のCSSみたいな書き方）の両方が使えるので、外部のcssを直接読み込んだり、@importができる

プログラミングっぽく書ける？

使ったことはないんで、どっかで使いたい。。。

  • stylus
$style($conf = {}) {
  $conf_default = {
    paddingLeft: 20px,
    fontSize: 14px,
    lineHeight: 24px,
  };
  $paddingLeft   = $conf.paddingLeft || $conf_default.paddingLeft;
  $fontSize      = $conf.fontSize || $conf_default.fontSize;
  $lineHeight    = $conf.lineHeight || $conf_default.lineHeight;

  padding-left: $paddingLeft;
  font-size: $fontSize;
  line-height: $lineHeight;
}

.hoge {
  $style($conf = {
    paddingLeft: 10px
  })
}
  • css
css
.hoge {
  padding-left: 10px;
  font-size: 14px;
  line-height: 24px;
}
77
68
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
Sign upLogin
77
68