Pushing BEM to the next level with Sass 3.4
With the release of the new parent selector in Sass 3.4 it is possible to deal with your selector as you do with lists. I thought this must be damn usable for your BEM (block element modifier) mixins. .test { @debug type-of(&); //returns list }Problems with the parent selector in Sass 3.3The parent selector has already been reworked in Sass 3.3. Since then you could combine the selector with any k
Sassã®å¤‰æ•°å‘½åè¦å‰‡ã¨BEM
$type-subtype-component-contextã¨ã„ã†ã‚ˆã†ãªå½¢ã§Sassã®å¤‰æ•°ã‚’命åã—ã¦ã„ãŸã‘ã©ã€ã“ã‚Œã«ã‚‚BEMを使ã†ã‹ã¨ã„ã†æ„Ÿã˜ã«ãªã£ã¦ããŸã€‚ãŸã ã§ã•ãˆé•·ã„ã®ãŒã€ã‚»ãƒ‘レーターã§æ›´ã«é•·ããªã‚‹ã‘ã©ã€å…ƒã€…ãã‚“ãªã«çŸããªã„ã®ã§æ°—ã«ã—ãªã„ã“ã¨ã«ã—ãŸã€‚BEMをクラスåã§ä½¿ã†ã‚ˆã†ãªå½¢ã§å˜ç´”ã«åˆ©ç”¨ã™ã‚‹ã‚±ãƒ¼ã‚¹ã¨ã€3.3ã§å°Žå…¥ã•ã‚Œã‚‹äºˆå®šã®ãƒžãƒƒãƒ—を使ã£ã¦æ§‹é€ 化ã—ã¦å®šç¾©ã—ã€è¤‡é›‘ã«å‚ç…§ã™ã‚‹ã‚±ãƒ¼ã‚¹ã‚’比較ã—ã¦æ¤œè¨¼ã—ã¦ã„る。 検索ボックスã«ä½¿ã†ã€ä»¥ä¸‹ã®8ã¤ã®è‰²ã®å¤‰æ•°å®šç¾©ã‚’例ã«ã™ã‚‹ã€‚ 検索フォーム背景色 入力フォーム文å—色 背景色 æž ç·šè‰² フォーカス æž ç·šè‰² ボタン æ–‡å—色 背景色 オンマウス æž ç·šè‰² BEMを使ã£ãŸç°¡å˜ãªå®Ÿè£… $color-bg_searchbox: #f9f9f9; $color-fg_searchbox__input: black; $color-bg_searchbox__inp
［翻訳］MCSS (Multilayer CSS)
ã“ã‚Œã¯ã€ŒBEM Advent Calendar 2013ã€19日目ã®è¨˜äº‹ã§ã™ã€‚ タイトルã«æ›¸ã„ã¦ã‚る通りã€Robert Haritonovã«ã‚ˆã‚‹MCSSã®ãƒ‰ã‚ュメントを日本語訳ã—ã¾ã—ãŸã€‚ ã»ã¼åŒå†…容ã®ã‚‚ã®ã‚’プルリクエストã—ã¦ã‚ã‚‹ã®ã§ã€ãã®ã†ã¡æœ¬å®¶ã§ã‚‚公開ã•ã‚Œã‚‹ã¨æ€ã„ã¾ã™ã€‚ å…¬å¼ãƒšãƒ¼ã‚¸ã§ã‚‚公開ã•ã‚Œã¾ã—ãŸã€‚ 英語版ãŒã‚ã£ãŸã®ã§åŸºæœ¬çš„ã«ã¯è‹±èªžç‰ˆã‹ã‚‰æ—¥æœ¬èªžè¨³ã—ãŸã®ã§ã™ãŒã€è‹±èªžç‰ˆã§æ„味ãŒã‚ˆã分ã‹ã‚‰ãªã„部分ãŒã‚ã£ã¦ã€ãã†ã„ã†ã®ã¯ã‚ªãƒªã‚¸ãƒŠãƒ«ã®ãƒã‚·ã‚¢èªžç‰ˆã‚’機械翻訳ã§è‹±èªžã«ã—ã¦ã€ãれを元ã«ã—ãŸã‚Šã—ã¾ã—ãŸã€‚ã®ã§ã€è‹±èªžç‰ˆã‹ã‚‰ã®å®Œå…¨ç¿»è¨³ã§ã¯ã‚ã‚Šã¾ã›ã‚“。 本当ã¯ãƒã‚·ã‚¢èªžã§ãる人ãŒã‚ªãƒªã‚¸ãƒŠãƒ«ã®ãƒ‰ã‚ュメント群を翻訳ã—ãŸã»ã†ãŒã‚ˆã„ã¨æ€ã„ã¾ã™ã€‚ MCSSã¯ä¸»ã«CSSã®ç®¡ç†æ–¹æ³•ã«ã¤ã„ã¦ã®è€ƒãˆæ–¹ã§ã€èªã‚“ã§ã„ã¦è‡ªåˆ†ã®ã‚„ã‚Šæ–¹ã«ä¸€ç•ªå‘ã„ã¦ã„ã‚‹ã®ã§ã¯ãªã„ã‹ã¨æ€ã„ã¾ã—ãŸã€‚ ãã“ã§ã€ã¡ã‚ƒã‚“ã¨ç†è§£ã—ã¦ãŠããŸã„ã¨ã„ã†ã“ã¨ã‚‚ã‚ã£ã¦ç¿»è¨³ã—ã¦ã¿ã¾ã—
BEM it!
The document discusses the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code. It describes BEM as a system that defines three basic entities - Blocks, Elements, and Modifiers - to structure user interfaces and components. Blocks are standalone parts of the interface, Elements are integral parts of Blocks, and Modifiers define properties or states. The documen
Sassã¨BEM
SCSSファイルを整ç†ã—ç›´ã—ã¦ã„る時ã€ä¸€æ°—ã«BEMãªã‚¯ãƒ©ã‚¹ã‚’使ã£ã¦æ›¸ããªãŠã—ã¦ã‚„ã‚ã†ã‹ã¨ã‚‚考ãˆã¦ã„ãŸã€‚ã‘ã©é€”ä¸ã§Sassãªã‚‰SCSSファイルã®åˆ†å‰²ã¨ãã®ä¸ã§ã®å·¥å¤«ã«ã‚ˆã£ã¦BEMã®æ§‹é€ を表ç¾ã§ããã†ã¨æ„Ÿã˜ãŸã®ã§ã€ä»Šã¯ãã†ã„ã†æ–¹å‘ã§è©¦è¡ŒéŒ¯èª¤ã—ã¦ã„る。実際BEMã®ã‚¦ã‚§ãƒ–サイトã§ã‚‚ファイルシステムを使ã£ãŸBEMã®è¡¨ç¾æ–¹æ³•ã¨ã„ã†ä¼¼ãŸè©±ãŒæ›¸ã‹ã‚Œã¦ã„ã‚‹ã®ã§è’å”無稽ãªè€ƒãˆã§ã¯ãªã•ãã†ã€‚ SCSSファイルåã§blockã‚’è¡¨ç¾ ãã®ä¸ã§placeholder selectorを使ã£ã¦elementã¨modifierã‚’è¡¨ç¾ å¤–ã‹ã‚‰ã¯ã“ã®placeholder selectorã¯ä½¿ã‚ãªã„ æ—¢å˜ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—を利用ã—ãŸã‚»ãƒ¬ã‚¯ã‚¿ãƒ¼ã‹ã‚‰@extendã§BEMæ§‹é€ ã‚’é–¢é€£ä»˜ã‘ HTMLファイルã§ã¯BEMãªã‚¯ãƒ©ã‚¹ã¯æŒ¯ã‚‰ãªã„ å¿…è¦ãªå ´åˆã¯ã‚·ãƒ³ãƒ—ルãªã‚¯ãƒ©ã‚¹ã‚’振る イメージã¯ã“ã®ã‚ˆã†ãªæ„Ÿã˜ã€‚HTMLã§ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®ç°¡æ½”ã•ã¯ç¶æŒã§
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
BEM
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
{{#tags}}- {{label}}
{{/tags}}