かもメモ

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

stylus

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

React create-react-app したプロジェクトで stylus を使いたい

React のプロジェクトを作る時に create-react-app とても便利です。 しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…

Gulp Stylusでautoprefixerを使うメモ

nibだけだと今は不要になってるベンダープレフィックスも出力してしまうのでautoprefixerを使って対象ブラウザをコントロールするメモ node: v9.6.1 npm: v6.1.0 gulp@3.9.1 gulp-stylus@2.7.0 gulp-autoprefixer@2.3.1 nib@1.1.2 install $ npm install --s…

Stylus プロパティ名に変数を使って一緒に"(ダブルコーテーション)や半角スペースを出力したい

例えばこんな感じのCSSを出力したくて [class^="icon-"], [class*=" icon-"] { font-family: 'webfont-icon' !important; ... } icon- の部分をを変数にしたい様な時。 変数と一緒に"(ダブルコーテーション)や(半角スペース)を出力させるのが結構落とし穴で…

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: …