サイトはこれ。 http://sasstocss.appspot.com/ 元ネタはこちら。 Try Online: Sass - Syntactically Awesome Stylesheets 元ネタは、インデント構文(*.sass)しかサポートしてませんが、 作ったサイトは、SCSS(*.scss)もサポートしていますし、出力フォーマ…

補足 つまり、これからSassを使い始めるなら、SCSSの構文（ファイル名 *.scss）で書いた方が良いってことです。 原文ページ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax 超意訳 Sassには二つの構文があります。一つ目は、SCSS（Sassy…

Sencha TouchをCompassを使って、色々カスタマイズしてみようと思い、 $base-colorってのを探してみると、 resources/themes/stylesheets/sencha-touch/default/_variables.scss で見つかる。 が、中を見てみると、 ... // These are the only variables whi…

Tutorialでカバーされていない範囲をドキュメントから拾ってみます。 まずは@extend命令。 @extend (@extend命令) 原文 There are often cases when designing a page when one class should have all the styles of another class, as well as its own spec…

概要 原文 Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That's why Sass's @import directive pulls i…

概要 原文 The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variables is assigned a value each time the mixin is used. Mixin arguments c…

概要 原文 Mixins are one of the most powerful Sass features. They allow re-use of styles properties or even selectors without having to copy and paste them or move them into a non-semantic class. Mixins are defined using the “@mixin” direc…

概要 原文 Variables can be used for more than just property values. You can use #{} to insert them into property names or selectors. 超意訳 変数は、ただのプロパティの値という枠を超えて使うことができます。#{}を使うことで、プロパティ名やセレ…

概要 原文 In addition to just using variable values as they're defined, you can also modify and combine them using math and useful predefined functions. This allows you to compute element sizing and even coloration dynamically. The standar…

概要 原文 Sass allows you to declare variables that can be used throughout your stylesheet. Variables begin with $ and are declared just like properties. They can have any value that's allowed for a CSS property, such as colors, numbers (w…

概要 原文 What about pseudoclasses, like :hover? There isn't a space between them and their parent selector, but it’s still possible to nest them. You just need to use the Sass special character &. In a selector, & will be replaced verbati…

概要 原文 Often when writing CSS, you'll have several selectors that all begin with the same thing. For example, you might have “#navbar ul”, “#navbar li”, and “#navbar li a”. It's a pain to repeat the beginning over and over again, especi…

なんでSass? Sencha Touchで使われていて、今後出てくるExt JS4でも採用されるとのこと。 先日の勉強会で取り上げられていたので、概要は分かったつもりになっているのですが、 実際に自分で手を動かしてみよう。という企画です。 Sassってなんぞや 原文 Sas…