読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Stylus Objectでらくちんカラー管理したい

StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。 しかし、色のバリエーションがある時に $primary = #158cba $primary-dark = #127ba3 $success = #28b62c $…

Ruby Stylusでnibを使いたい。

前回 Ruby(sinatra)でStylusを使えるようにしました。 しかし、このままではSassで言うところのCompassにあたるnibを使うことができていませんでした。nibを使えるようにした際のメモです。 nibはnode(npm)でインストールしておく必要がある $ npm install n…

Ruby Sinatraでstylusを使いたい。

久々にRubyの勉強に戻ってきました。 作りながら学ぶRuby入門 第2版作者: 久保秋真出版社/メーカー: SBクリエイティブ発売日: 2013/11/21メディア: Kindle版この商品を含むブログ (3件) を見る けっこう古い書籍ですが、1つのアプリを作りながらRubyに慣れよ…

Stylus 変数の計算で不等号を変更するときのメモ。

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。 Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。 NGな例 変数名のまま出力される $posX = 100 .myClass back…

Stylus ループ中に配列から値を取得する際に気をつけること

Stylusでループ中に配列から値をとってCSSを作ろうとした時にちょっとハマったのでメモ。 Stylusで配列から値をとって使う方法 // stylusの配列はの中にスペース区切りで書く colors = red blue yellow for i in (0..2) .font-color-{i} color: colors[i] 配…

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

Express4 stylusのコンパイルにハマる

Express4系でstylusを使おうとミドルウェアのを書いたのですが、コンパイルできなかかったりとはハマったのでメモ stylusとnibを導入 $ npm install --save stylus nib コンパイルできなかった例 // app.js var stylus = require('stylus'), nib = require('…

Stylus 部分的にborder-radius(角丸)にする

前にSASS (Compass)での方法を書きました。 個人的にはStylusが好きなのでStylusで部分的に角丸にする方法。忘れるのでメモしておきます。 SASSで言う所のCompassでしょうか? Stylusではnibを使うと便利です。 nibをインストール nibがない場合はnpmでイン…

Gulp stylus @import nib にハマる。

最近Glupに慣れようと頑張っています。 世間一般でCSSのプリプロセッサーははSCSSやCompassがやはり多いのでしょうか? 僕は個人的にStylusが好きなので、今日は今までGruntでやっていたstylus+nibのコンパイルをGulpでしようとしてハマってしまったのメモで…

Stylus インデントをミスすると危険があぶない!

Stylusのインデントをミスすると意図せずセレクタの親指定が吹っ飛んでしまう場合があるっぽい! p color: #444 #main .heading color: #0a9b94 p color: #f2a620 インデントはスペース2つで統一しているつもりが。 間違えて.headingのインデントがスペース4…

Stylus mixinの引数を値の文字列に入れたい

例えばCSSで指定してある画像を言語毎に切り替えたい。 言語のごとに各言語のprefixがついた画像にbackground-imageを変更したいようなケース。 .myLabel { background-image: url('/assets/images/label.png'); } .lang-ja { .myLabel { background-image: …