$baseColor: #AD253A; 変数を代入 body{ background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
ãƒã‚¹ãƒˆã‚’覚ãˆãŸäººã®ãŸã‚ã®Sassã®ä¾¿åˆ©ãªä½¿ã„æ–¹
$baseColor: #AD253A; 変数を代入 body{ background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
sassã®æŠ‘ãˆã¦ãŠããŸã„functionã®ä½¿ã„æ–¹ « NAVER Engineers' Blog
ã“ã‚“ã«ã¡ã¯ã€‚ 年末ã®äºˆå®šã¯ã¶ã£é€šã—ã§ã‚¹ã‚«ã‚¤ãƒªãƒ ã«ã¤ãŽè¾¼ã‚€ã“ã¨ãŒæ±ºå®šã—ãŸUIT富田ã§ã™ã€‚ 今回ã¯ã€Less & Sass Advent calendar 2011ã®6日目ã¨ã—ã¦ã€ sassã®functionã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ ã™ã£ã½ã‚Šãƒãƒžã£ãŸå››å‰‡æ¼”ç®—ã®è½ã¨ã—ç©´ sassã¯å€¤ã®å››å‰‡æ¼”算をサãƒãƒ¼ãƒˆã—ã¦ãŠã‚Šã€10進数ã ã‘ã§ãªãã€16進数ã®å€¤ã§ã‚ã£ã¦ã‚‚よã—ãªã«è¨ˆç®—ã—ã¦ãã‚Œã¾ã™ã€‚ color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数ã¨10進数ã§ã‚‚エラーã«ãªã‚‰ãšè¨ˆç®—ã—ã¦ãã‚Œã¾ã™ã€‚（普通ã‚ã¾ã‚Šã‚„らãªã„ã¨ã¯æ€ã„ã¾ã™ãŒï¼‰ color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; ã“ã®16進数ã®è¨ˆç®—ã¯ã€çµæžœãŒ#fffffを上回ã£ãŸå ´åˆã€ä¸Šå›žã£ãŸåˆ†ã¯åˆ‡ã‚Šæ¨ã¦ã¦ã€ã™
Sass(Scss) Memo: @if | Culture27
今回ã¯@ifã«ã¤ã„ã¦ã§ã™ã€‚ @ifã€@else ifã€@elseãŒä½¿ãˆã¾ã™ã€‚ ã“ã‚“ãªæ„Ÿã˜ã€‚ Scss $var1: aaa; @if $var1 == 'bbb' { /* A:$var1 ㌠bbb ã®å ´åˆã«å‡ºåŠ›ã•ã‚Œã‚‹ */ } @else if $var1 == 'ccc' { /* B:最åˆã®æ¡ä»¶ã‚’満ãŸã•ãšã€$var1 ㌠ccc ã®å ´åˆã«å‡ºåŠ›ã•ã‚Œã‚‹ */ } @else if $var1 == 'aaa' { /* C:2ã¤ã®æ¡ä»¶ã‚’満ãŸã•ãšã€$var1 ㌠aaa ã®å ´åˆã«å‡ºåŠ›ã•ã‚Œã‚‹ */ } @else { /* D:ãれ以外ã®å ´åˆã«å‡ºåŠ›ã•ã‚Œã‚‹ */ }
Sass - ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
ã“ã®æ–‡æ›¸ã¯å¤ã„Sassウェブサイトã«è¼‰ã£ã¦ã„ãŸãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã®è¨³ã§ã€2013å¹´12月ç¾åœ¨ã‚‚ã†æ–°ã—ã„ウェブサイトã«ã¯å˜åœ¨ã—ã¾ã›ã‚“。新ã—ã„ウェブサイトã§ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã«ã‚ãŸã‚‹Sassã®åŸºæœ¬ã®æ—¥æœ¬èªžè¨³ã‚’å‚ç…§ã—ã¦ãã ã•ã„。 Translation of: Sass - Tutorial Ruby 㨠Sass ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ« ã¾ãšã€Sass ãŒã¡ã‚ƒã‚“ã¨å‹•ä½œã™ã‚‹ã‚ˆã†ã«ã—ã¾ã™ã€‚OS X を使用ã—ã¦ã„ã‚‹ã®ãªã‚‰ã€æ—¢ã« Ruby ãŒã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã•ã‚Œã¦ã„ã‚‹ã§ã—ょã†ã€‚Windows ユーザーãªã‚‰ã° Ruby ã®Windows インストーラーã§ã€Linux ユーザーãªã‚‰ãƒ‘ッケージ・マãƒãƒ¼ã‚¸ãƒ£ãƒ¼ã§ãã‚Œãžã‚Œ Ruby をインストールã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚ Ruby ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ãŒå®Œäº†ã—ãŸã‚‰ã€ä»¥ä¸‹ã®ã‚ˆã†ã«ã—㦠Sass ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã‚’è¡Œã„ã¾ã™: gem install sass 最åˆã® Sass スタイルシート éž
NAVERã§ã®Sassã®ä½¿ã„æ–¹ « NAVER Engineers' Blog
NAVER UITã®Sass Mixinsè·äººï¼ˆä»–称）ã®ä¸Šæ‘ã§ã™ã€‚ 今日ã¯Less & Sass Advent calendar 2011ã®21日目ã§ã™ã€‚ 3日目ã«æ›¸ã‹ã‚Œã¦ã„る通りã€NAVERã§ã¯åŠå¹´ã»ã©å‰ã‹ã‚‰å®Ÿå‹™ã§Sassを使ã£ã¦ã„ã¾ã™ã€‚ 今回ã¯å¼Šç¤¾ã§ä½¿ç”¨ã—ã¦ã„ã‚‹Sassã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒª/ファイル構æˆã‚„Mixinsã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ 基本ディレクトリ/ãƒ•ã‚¡ã‚¤ãƒ«æ§‹æˆ ä»Šã®ã¨ã“ã‚css/sassディレクトリã¯ä¸‹è¨˜ã®ã‚ˆã†ãªæ§‹æˆã‚’基本ã¨ã—ã¦ã„ã¾ã™ã€‚ project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}