2020.05.13
stylusが予想以上に便利すぎてウケた。新しいCSSの書き方を紹介するよ。

みなさーん、CSSは使ってますかぁ〜!(耳)

皆さんお馴染みのCSS。説明しておこうか。CSSとは、サイトのデザインを指定するために1996年に開発されたWeb開発の言語です。CSSを使って、サイトのデザインと配置をどんな形にでも構成できます。 Web開発では、欠かせない特別な存在で、みんなに使われている言語なんですが、実はCSSにいくつか問題があるのです!

stylusってなんなの?

StylusはSassとLessの"いいとこどり”と言われているCSSメタ言語の一つ。

CSSの問題

長い間CSSを愛用してた皆様にはきっとわかりますが、ぶっちゃけCSSって面倒ですよね?いっぱい記号文字が入ってますし、色々面倒なんよね。

section.top {
    background: black;
    color: white;
    font-size: 40px;
    line-height: 1.5;
}
section.top .inner {
    margin: 0px auto;
    max-width: 1000px;
}

もしSass/SCSSを使うのなら、こうなりますよね?

section.top {
    background: black;
    color: white;
    font-size: 40px;
    line-height: 1.5;

    .inner {
        margin: 0px auto;
        max-width: 1000px;
    }
}

こうすると、もっとわかりやすいですが、セミコロンを打つことが多すぎて癖になっちゃいませんか? 「;」とか、「:」とか、「{}」まで、書かなくてもいいじゃん!まじコーヒーぶち撒けるよ。

そんで、もしStylusを使うのならこうなるのだ。

section.top
    background black
    color white
    font-size 40px
    line-height 1.5

    .inner
        margin 0px auto
        max-width 1000px

ちょー綺麗じゃない???

もうひとつStylusの例を挙げてみる:

a {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
    color: red;
}
a.disabled {
    color: grey;
}
a.disabled:hover {
    text-decoration: none;
    color: gray;
}

Stylusを使うのなら

a
    text-decoration none
    color black

    &:hover
        text-decoration underline
        color red

    &.disabled
        color gray

        &:hover
            text-decoration none
            color gray

ほかにも様々な機能が!

Stylusにもいろいろ便利な機能があります!

  • rgba(x, x, x, x)の代わりに、#RRGGBBAAが書ける(CSS出力では自動的にrgba()に変換される)
  • 10px/2みたいに、計算ができる(CSS出力では自動的に計算される)
  • グローバル変数が指定できる。もし主に#0FFを使っているのなら、「brand_color = #0FF」みたいに指定して、あとでその色を使いたいなら、「color brand_color」などと書けばオッケー。後でサイトの全体的な色を変えたくなったら、この変数だけ変えれば反映される!
  • 2色混合の際、Photoshopを起動させるのがクッソ面倒。いいえ、大丈夫です!rgba(#FFF, 0.5)#000を混ぜたいなら、blend(rgba(#FFF, 0.5), #000)で書けばStylusが計算してくれる超いいやつ!
  • #D62828を30%暗くしたいときは、darken(#D62828, 30%)みたいに書けば、自動的に計算される!
  • その他もたくさんあるのです〜

すべての搭載機能を確認したい場合は、こちらからアクセスできます(英語です)。

きっとあなたもstylusを使いたくなってるはず!!!!

気になりませんか?オンラインで使ってみたい方は、こちらからアクセスできます。

もし仕事で実際に使いたいのなら、NPMからインストールすることができます。まずはNode.jsをお使いのパソコンにインストールします。そのあとはNPMを使って、Stylusをインストールしましょう。

LinuxとMac:

$ sudo npm install -g stylus

Windows:

C:\WINDOWS\system32>npm install -g stylus

StylusをCSSに変換したい場合は、これを実行します:

stylus [file].styl

同じ名前のCSSファイルが作成されます。

もしStylusファイルが変更された度、新しくCSSに再変換したい場合は、「-w」(ウォッチ)フラグが指定できます。

stylus -w [file].styl

Stylusの公式サイト

詳しい情報を確認したい方は、Stylusの公式サイトをご確認ください。

http://stylus-lang.com/ (英語)

SEDNDAI CREATOR SCHOOL【センスク】は、在宅ワークできる専門的なスキルの一つ、Webデザイナーのスキルを身につけることができるサービスとなっております。ぜひ、ご興味のある方は、まずはお問い合わせください!