技術ブログを開設する
ログイン
もっと気軽にアウトプットできる技術ブログプラットフォーム

stylusとは?

StylusはSassとLessのいいとこどりと言われているCSSメタ言語の一つ。
SASS記法、SCSS記法のどちらでも記入することができるので、.sass.scssを記載することができればstylusも入りやすいと思う。
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という名前で作成

fonts = helvetica, arial, sans-serif  

body  
  padding 50px  
  font 14px/1.4 fonts

stylusからcssに変換

test.stylのフォルダ上で

stylus test.styl

を実行。同ディレクトリに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
.hoge  
  width 100px //記号の省略が可能  

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

コメントアウト

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

複数クラス指定

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

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

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

入れ子

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

  • stylus
body  
  color #f00  
  p  
    color #000
  • 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
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
font-size = 14px  
red = #dc143c  

body  
  font font-size Arial, sans-serif  
  border 2px solid red
  • 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
.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
.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
.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
.hoge {  
  -webkit-box-shadow: 1px;  
  -moz-box-shadow: 1px;  
  box-shadow: 1px;  
}

囲み型のmixin

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

.test  
  +hover()  
    text-decoration underline
  • 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
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
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
body  
  foo01 foo + bar  
  foo02 'foo ' + bar  
  foo03 'foo ' + 'bar'  
  foo04 'foo ' + 5px  
  foo05 2s - 500ms  
  foo06 5000ms == 5s  
  foo07 50deg
  • css
body {  
  foo01: foobar;  
  foo02: 'foo bar';  
  foo03: foobar;  
  foo04: 'foo 5px';  
  foo05: 1.5s;  
  foo06: true;  
  foo07: 50deg;  
}

色の操作

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

文字列置換

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

条件分岐と繰り返し

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

if/else文

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

for/in文

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

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

  • ハッシュをCSSのプロパティ名と値に展開できる
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}
.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
@mixin font($size: 14px) {  
  font-family: sans-serif;  
  font-weight: normal;  
  font-size: $size;  
}  
.hoge {  
    @include font(16px);  
}
  • 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
.hoge {  
  padding-left: 10px;  
  font-size: 14px;  
  line-height: 24px;  
}

関連記事

この記事へのコメント

まだコメントはありません
2
いろいろなことを簡単にまとめる用
2
このエントリーをはてなブックマークに追加