[B! Sass] ronaのブックマーク

実践Sass 後編

HTML5 Conference 2012 で使用したスライドです。前編のスライドはこちらです。 http://www.slideshare.net/azusatomita3/sass-14212266

rona 2012/09/10

Sass

リンク

実践Sass 前編

17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconﬁg.rbが読めない • githubの最新版は、conﬁg.rbとSass3.2対応 • Sass3.2の対応が遅かった（一昨日ようやくリリース）

rona 2012/09/10

Sass

リンク

Sassでは@importをうまく使うと、SCSSファイルを目的別に整理して管理することができます。モジュール化できるということですね。プライマリSCSSファイルとは僕が勝手に付けた呼称ですが、つまり各モジュールを読み込むだけのSCSSファイルのことです。グローバルに使用する変数の設定ファイルなども含めて整理して、プライマリSCSSファイルではそれらを読みこむだけとしておくと管理が少し楽になるんじゃないかと。このWebサイトのプライマリSCSSファイルは以下のようなものです。 $version: "6.10.21"; /*! * style.css v#{$version} * * LICENSE: http://hail2u.mit-license.org/2011 */ // Web Fonts @import url("http://fonts.google apis.com/css

rona 2012/07/26

コメントアウトの中で変数を使う場合は、/*!　コメント　*/　とする

sass
CSS3

リンク

OOCSS の Spacing クラスのようなものを Sass で

「OOCSS (Object Oriented CSS) の Spacing クラスのようなもの」というのは、よくあるこういったやつです: /* p,m = padding,margin a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical */ .pt0, .pv0, .pa0 { padding-top: 0px !important; } .pr0, .ph0, .pa0 { padding-right: 0px !important; } .pb0, .pv0, .pa0 { padding-bottom: 0px !important; } .pl0, .ph0, .pa0 { padding-left: 0px !important; } .pt10, .pv10, .pa10 { padding-top:

rona 2012/07/26

マージン・パディング　クラスをループで処理

CSS3
sass

リンク

Compass CSS3 | Compass Documentation

The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow. What rendering engines you support for the experimental css properties is governed by the configurable variables defined in the browser support module. This file can be imported using: @import "compass/css3" Imports Animation – Specify the CSS3 animation property and all