2024.03.29
STAFF BLOG
スタッフブログ
TECHNICAL
テクログ

Stylus とは
StylusはSassとLessのいいとこどりと言われているCSSメタ言語の一つです。
Sassほどは機能は多くはありませんが、シンプルな記述方法で気軽にCSSが書けて、柔軟性が高いことが特徴です。
stylusの拡張子は
https://stylus-lang.com/.styl
か.stylus
です。
導入方法
導入にはnode.jsなどのインストールが必要ですが、インストール関係は今回は割愛します。
https://stylus-lang.com/docs/executable.html
また、
基本的な書き方、コメントアウト、複数クラス指定、入れ子、親要素参照
についても割愛します。
変数
定義した変数を呼び出すことができます
theme1 = #475CD1
で変数を用意してbody background
で変数を呼び出すことができます。
theme1 = #475CD1
theme2 = #BE2525
body
background theme1
color theme2
div {
background: #475cd1;
color: #be2525;
}
また、 @{属性}
でその属性のスタイルの情報をそのまま利用することもできます
border-bottom solid 1px @color
ではcolor
属性のスタイルの情報 #BE2525
を利用しています。
コンパイルした結果、border-bottom: solid 1px #be2525;
になります。
body
background #475CD1
color #BE2525
border-bottom solid 1px @color
border-top @border-bottom
body {
background: #475cd1;
color: #be2525;
border-bottom: solid 1px #be2525;
border-top: solid 1px #be2525;
}
Mixin
定義したスタイルを呼び出すことができます。
border-radius()
-webkit-border-radius 5px
border-radius 5px
body
border-radius()
main
border-radius()
body {
-webkit-border-radius: 5px;
border-radius: 5px;
}
body main {
-webkit-border-radius: 5px;
border-radius: 5px;
}
引数を入れることもできます
border-radius(radius)
-webkit-border-radius radius
border-radius radius
body
border-radius(5px)
main
border-radius(8px)
body {
-webkit-border-radius: 5px;
border-radius: 5px;
}
body main {
-webkit-border-radius: 8px;
border-radius: 8px;
}
ここで注意したいのが、呼び出し元で引数を用意しなかった場合コンパイルエラーをおこしてしまいます。
その時の為にデフォルト値を用意します
border-radius(radius = 5px)
-webkit-border-radius radius
border-radius radius
body
border-radius(5px)
main
border-radius(8px)
別stylusファイルのインポート
別stylusファイルを読むことができます
.styl
拡張子は省略できます
@import 'styl/variable'
@import 'styl/mixins'
また、ディレクトリ配下のすべてをインポートすることができます
@import 'styl/*'
ビルトイン関数 (複数紹介)
色関係の関数
color blue // #0000ff 参照用に置いてます
color grayscale(blue) // #808080 グレースケール
color tint(blue, 50%) // #7f7fff 明清色
color shade(blue, 50%) // #00007f 暗清色
color invert(blue) // #ff0 入力画像の色サンプルを反転
color complement(blue) // #ff0 色相の補色
color desaturate(blue, 50%) // #4040bf 彩度
数値操作の関数
margin-left -10px // -10px
margin-right abs(@margin-left) // 10px
margin ceil(4.6%) // 5%
margin unit(4.6%, 'px') // 4.6px
カスタム関数
add(a, b, c)
a + b + c
merg(a, b)
return a a*10 a*b
div
margin add(1px, 2px, 3px)
margin merg(10px, 20px)
div {
margin: 6px;
margin: 10px 100px 200px;
}
内挿
.hoge
クラスではborder-radius
関数を呼び出し値ますが
border-radius
関数はvendor
関数を呼び出しています。
vendor
関数の第一引数がproperty
で属性名が入ってきます。
vendor
関数ではproperty
を{}
で囲むことによって可変の属性を出力しています。
vendor(property, arg)
{property} arg
-webkit-{property} arg
-moz-{property} arg
border-radius(radius = 5px)
vendor('border-radius', radius)
transition(args)
vendor('transition', args)
.hoge
border-radius(5px)
transition(all 0.2s ease)
.hoge {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
if文
test(var)
if var === blue
background red
else
background blue
.fuga
color red
test(@color)
.piyo
color blue
test(@color)
.fuga {
color #00f
background: #f00;
}
.fuga .piyo {
color #f00
background: #00f;
}
おわりに
今回ご紹介させていただいたもの以外でも沢山メソッドはあります。
詳しくは公式document読破してみてください。
https://stylus-lang.com/docs/executable.html
基本的な書き方、コメントアウト、複数クラス指定、入れ子、親要素参照 だけでも勿論便利ですが、
今回ご紹介させいただいたmixinや関数等使いこなせたらstylusのコード量も減るし
客観的にもわかりやすいと思うので保守性も上がると思います。
是非、取り入れてみてください。