Stylus入門
Stylus入門 StylusはSASSやLESSのようなCSSメタ言語。某所で話題にあがったのでどんなことができるのか一通り触ってみました。 実行環境ですが通常はnode.jsなどのインストールが必要です。私の場合、CodeKitを利用しているので特になにもインストールせずに利用できました。 stylus用のファイルをstylus/○○.stylとして保存すると、css/○○.cssと書き出されます。それではざっくりと基本機能の紹介します。 Selectors（セレクタ） stylusはPythonようにインデントベースの記述を行います。 .hoge color blue font-weight bold と記述すると以下のようなCSSが出力されます。 .hoge { color: #00f; font-weight: bold; } このように基本的に括弧やセミコロン、コロンなどは省略
Stylusの使い方 - Milk+ea
Stylus（スタイラス）を使うことでCSSをパワフルに記述できます。 Stylusのインストール Stylusをインストールします。インストールにはNodeJSがインストールされている必要があります。 npm i -g stylus StylusとCSS 試しに適当なCSSを書いてみました。 .css { color: #000; } Stylusでも同じことを書いてみます。 .stylus color #000 見ての通り、{},:,;を記述する必要はありませんが、それらを記述しても大丈夫です。 例えば、color: #000としてもOK。 ちなみにEmmetは、:を挟まない形で展開されるので、記述しない方に慣れたほうがいいかも。 追記。Atomでですが、：（コロン）を間に挟んで展開するように設定する記事を書きました。 Stylueの使い方 セレクタのネスト 次のように.parent内
ATOMのStylus + Emmetで：（コロン）を間に挟んで展開されるようにする - Milk+ea
Macでの設定方法です。 emmet-atomをATOMへインストールした後、preferences.jsonファイルを作成し、そこへ設定を書きます。 emmet-atomのREADME.mdを読むと、設定ファイルは~/emmetへ置けばいいとのこと。 なので、~/emmet/preferences.jsonという形になるように作成し、開きます。 mkdir ~/emmet && touch ~/emmet/preferences.json && open ~/emmet/preferences.json そして次をコピペ。 { "stylus.valueSeparator": ": " } ここまでした所で、一度ATOMを再起動。 .stylファイルを開いて、dbと入力し、tabを押します。 display block が、間にコロンがない状態で展開されてしまいました。 ちゃんとしたコロ
Sass と Stylus の比較 - CSS Preprocessor Advent Calendar 2012 - kojika17
CSS Preprocessor Advent Calendar 2012 19日目の記事です。 CSS Preprocessorは、CSSに拡張機能を持たせるメタ言語と呼ばれるものです。 CSS Preprocessorでよく耳にするものに、SassやLessがあります。 私も以前からSassを使用していましたが、最近Stylusを使い始めたので、SassとStylusの比較を行ってみます。 拡張子とシンタックス 使用できる拡張子は.sassと.scssの2つ。 拡張子によってSass記法かSCSS(Sassy CSS)記法に分かれます。 Sass記法(.sass) #header color: #000 h1 font-size: 2em SCSS記法(.scss) #header { color: #000; h1 { font-size: 2em; } } SCSS記法の方がもとも
FlexboxベースのレスポンシブStylus/CSSフレームワークBasisをつくったので設計思想や特徴など
これまで Basis は Sass/CSS フレームワークとして開発していましたが、先日書いた記事（SassからStylusに乗り換えてみたので違いや躓いたところなど）のとおり Stylus がなかなか良さ気だったので Stylus 版の Basis を作りました。 その中で、Stylus でやるなら単純に Sass を書き換えるだけじゃなく設計から変えたほうが良いのではないか？という気がして内部的には結構書き換えを行ったりしたので、その辺りも含め、Basis とは何か、どういう思想に基づいて開発しているのか、等改めてまとめてみたいと思います。 Basis Stylus 版ドキュメント https://getbasis.github.io Basis の設計思想 Basis は「どんな Web サイトの制作にも適用でき、簡単に使え、邪魔にならない CSS フレームワークが欲しい」との思いか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svelte-preprocess/docs/getting-started.md at main · sveltejs/svelte-preprocess
GitHub - enja-oss/stylus: stylusドキュメント日本語訳
Stylus