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-bottombody {
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のコード量も減るし
客観的にもわかりやすいと思うので保守性も上がると思います。
是非、取り入れてみてください。
