SASS
haml付属ã®ã€Œcss2sassã€ãƒ„ールを使ã†ã¨ã€CSSã‚’SASSã«ã‚³ãƒ³ãƒãƒ¼ãƒˆã§ãã¾ã™ã€‚æ—¢å˜ã®CSSã‚’SASSã§æ›¸ãç›´ã™å ´åˆã«ä¾¿åˆ©ã€‚ $ css2sass <変æ›å…ƒCSSファイル> <変æ›å…ˆSASSファイル> 具体例。以下ã®CSSã‚’ /* コメント */ #nav { width: 650px; } #nav ul li { float: le…
Mixinã¯å¼•æ•°ã‚’å—ã‘付ã‘るよã†ã«ã§ãã€é–¢æ•°ã®ã‚ˆã†ã«ä½¿ã†ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚ // 引数をå—ã‘å–ã‚‹mixin =test(!color) color = !color border: 1px solid #{!color*3} .foo // 引数ã¤ãã§mixinã‚’é©ç”¨ã™ã‚‹ã€‚ +test(#111) font-size: 12px .var +test(#222) font-siz…
Mixinã§ã€ã‚らã‹ã˜ã‚定義ã—ãŸCSSプãƒãƒ‘ティã®é›†åˆã‚’ã€è¤‡æ•°ã®ãƒ«ãƒ¼ãƒ«ã‚»ãƒƒãƒˆã«é©ç”¨ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚よã使ã†ãƒ—ãƒãƒ‘ティセットをMixinã§ãるよã†ã«ã—ã¦ãŠã‘ã°ã€å®šç¾©ãŒé‡è¤‡ã—ã¦ã—ã¾ã†ã®ã‚’回é¿ã§ãã¾ã™ã€‚使ã„æ–¹ã¯ä»¥ä¸‹ã®é€šã‚Šã€‚ 「=ã€ã§ã€Mixinã™ã‚‹CSSプãƒãƒ‘ティ…
SASSã§ã¯ifã‚„forãªã©ã®åŸºæœ¬çš„ãªåˆ¶å¾¡æ§‹æ–‡ãŒä½¿ãˆã¾ã™ã€‚ æ¡ä»¶åˆ†å² 「@ifã€ã‚’使ã„ã¾ã™ã€‚ @if <æ¡ä»¶> ...<処ç†> @else if <æ¡ä»¶> ...<処ç†> @else ...<処ç†>以下ã¯ãƒ•ãƒ©ã‚°ã‚’見ã¦CSSプãƒãƒ‘ティを切り替ãˆã‚‹ä¾‹ã§ã™ã€‚ !debug = true div // フラグをã¿ã¦ãƒ—ãƒãƒ‘ティを…
「#{!}ã€ã§ã‚»ãƒ¬ã‚¯ã‚¿ã‚„プãƒãƒ‘ティåã«å¤‰æ•°ã‚’使ã†ã“ã¨ãŒã§ãã¾ã™ã€‚ !name="foo" !color="color" div.#{!name} background-#{!color}: #333 変æ›çµæžœã§ã™ã€‚ div.foo { background-color: #333; }
「+ã€ã‚„「*ã€ã¨ã„ã£ãŸæ¼”ç®—åãŒä½¿ãˆã¾ã™ã€‚ // 演算åを使ã†ã€‚ // 変数ã®å‚照時ã¨åŒã˜ã「=ã€ã‚’使ã†ç‚¹ã®ã¿æ³¨æ„。 .foo width = 10px + 10px height = 10px - 5px .var width = 10px * 10 height = 10px / 5 font-size = 10px % 2 変æ›çµæžœã§ã™ã€‚ .foo { width:…
!<変数å> = <値>ã§å®šç¾©ã—ã¦ã€ä»¥ä¸‹ã®ã‚ˆã†ãªæ„Ÿã˜ã§å‚ç…§ã—ã¾ã™ã€‚ .foo color = !<変数å>具体例。 // 変数を使ㆠ!color = #333 .foo // 作æˆã—ãŸå¤‰æ•°ã¯ã€Œ=ã€ã§å‚ç…§ã§ãる。 // 「:ã€ã˜ã‚ƒãªã„ã®ã§ã”注æ„。 color = !color // 変数ãªã®ã§å€¤ã‚’æ›´æ–°å¯èƒ½ã€‚ !color …
「-tã€ã‚ªãƒ—ションã§å¤‰æ›å¾Œã®CSSã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’指定ã§ãã¾ã™ã€‚ $ sass -t <スタイル> <変æ›å…ƒã®SASS> <変æ›å¾Œã®CSS>「ã€ã¨ã—ã¦æŒ‡å®šå¯èƒ½ãªå€¤ã¯ä»¥ä¸‹ã®4ã¤ã€‚ 値 説明 nested SASSã§ã®è¨˜è¿°ã«ä¼¼ãŸæ„Ÿã˜ã®ã‚¹ã‚¿ã‚¤ãƒ«ã§å‡ºåŠ›ã—ã¾ã™ã€‚(デフォルト) expanded 手書ãã®CSSã«è¿‘…
CleverCSS: Rich Python-like DSL for CSSã‹ã‚‰ã®ãƒªãƒ³ã‚¯ã‚ˆã‚Šã€SASSãªã‚‹ã‚‚ã®ã‚’発見。 「SASSã€ã¯CSSをより簡潔ã«èªã¿ã‚„ã™ã書ã為ã®DSLã§ã€ 以下ã®ã‚ˆã†ãªæ©Ÿèƒ½ã‚’æä¾›ã—ã¾ã™ã€‚ ãƒã‚¹ãƒˆã§ã®ãƒ—ãƒãƒ‘ティ指定 変数 一度定義ã—ãŸè¨å®šå€¤ã®å…±æœ‰(mixin) 定義ã—ãŸã€Œ.sassã€â€¦