HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ！？ | Crack the Game, Win a Jackpot
HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ！？ 長いタイトルですがつまりそういうことです。主にCODEPENで使えるHTML/CSS/JavaScriptのテンプレートエンジンとかプリプロセッサとか軽量プログラミング言語とかをまとめてみました。後半尻すぼみになってる感は否めません。 HTML関連 人気順 いきなりですがGoogleのトレンドを調べてみました。最初にこれを頭に入れておくと良いんじゃないかと思います。2010年10月から2014年10月までの期間です。（Markdownってなんでこんなに低いんでしょうか…Googleトレンドの使い方間違ってるのかなぁ？） Haml HTML Abstraction Markup Languageの
DRY-ing Out Your Sass Mixins
One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
Basscss
Code with ConfidenceUsing clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. No Side EffectsThings behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS. ComposableReusable, interoperable styles work like buil
Sass: Syntax
Sass supports two different syntaxes. Each one can load the other, so it’s up to you and your team which one to choose. SCSSSCSS permalink The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular. SCSS
How to structure a Sass project – TheSassWay.com
One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
Susy: Responsive grids for Compass
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
This page is moved
This page has moved to http://stylus-lang.com/
Jekyll, Haml, Sass and GitHub Pages - WinstonYW
24 FEBRUARY 2013 A recap of how I got this Jekyll blog ready.. To start, create a basic Jekyll directory following the instructions on Jekyll's Wiki. By default, Jekyll only works with HTML and CSS.. To use Jekyll with Haml and Sass, markup converters have to be added. However, by design, Jekyll doesn't evaluate layouts through any Haml converter. Therefore the converter will only work for index.h
Haml-4.0を使うときの6つの注意点 - 黒魔法使いの弟子
閉じタグに嫌悪感を抱く全国519万人のHamlファンの皆さんこんにちは。(ruby-toolbox調べ) bundle updateしたらHamlが4.0になったそうです。同時に、いろんな機能追加が行われたとのこと。 「一部のアプリは動かなくなるかもしれんよ」とあったので、ここに書き写しておく。 1 2 3 4 5 6 7 8 9 10 11 12 13 HEADS UP! Haml 4.0 has many improvements, but also has changes that may break your application: * Support for Ruby 1.8.6 dropped * Support for Rails 2 dropped * Sass filter now always outputs <style> tags * Data attribute
SlimかHamlか、Rails Rumbleで使われたGem
Slim Railsのテンプレートでは、ERBにするかHamlにするかという選択になるのが一般的ですが、比較的新しいSlimという、Hamlに似た優れたテンプレートがあります。 まだまだ十分に知られていないようなので、もっと普及させるべく、紹介したいと思います。 まずは見てみましょう。Slimはこんな感じ。 http://slim-lang.com/ Hamlはこんな感じになります。 http://haml.ursm.jp/ 一見してわかるように、SlimはHamlによく似た、インデントによってHTML構造を表すテンプレート言語です。 一番の違いはタグに%（パーセント）がつかないこと。 行の先頭はタグの扱われるため、%をつける必要がありません。 その代わり、先頭にテキストを書く場合は |（パイプ）が必要です。 細かい文法の違いがあり、後発であることからSlimのほうが少し洗練されているよう
Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time. Getting Started Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open yo
VimでSassのシンタックスハイライトをする方法 - Hello, world! - s21g
Sassを使うようになって、属性とタグの区別がつきにくいなと感じていたので、シンタックスハイライトをする方法を探してみました。 sass.vim これを使うと、こんな感じになります。 だいぶ見やすくなりました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
swipe.to - a really cool domain parked on Park.io
File: FAQ — Documentation by YARD 0.9.12
compass-style.org is almost here!
Bourbon - A Lightweight Sass Tool Set
Rails3.1でscssではなくsassを使う - Hello, world! - s21g
GitHub - tpope/vim-haml: Vim runtime files for Haml, Sass, and SCSS
