Sass ã® @extend ã¯ã©ã“ãŒã™ã”ã„ã®ã‹ã“ã®è¨˜äº‹ã§ã¯ Less & Sass Advent calendar 2011 ã® 16 日目ã¨ã—ã¦ã€Sass ã® @extend 機能ã«ã¤ã„ã¦æ›¸ã„ã¦ã¿ã¾ã™ã€‚ãŒã€è«¸äº‹æƒ…ã«ã‚ˆã‚Šç· ã‚切りをéŽãŽã¦ã‹ã‚‰ã‚ã‚ã¦ã¦æ›¸ã„ã¦ãŠã‚Šã€ã‹ãªã‚Šã¨ã£æ•£ã‚‰ã‹ã£ãŸã‚‚ã®ã«ãªã‚‹ã§ã‚ã‚ã†ã“ã¨ã‚’ã‚らã‹ã˜ã‚ãŠæ–ã‚Šã—ã¦ãŠãã¾ã™ã€‚ ã•ã¦ã€ã¾ãšã¯ @extend ã®åŸºæœ¬çš„ãªæ©Ÿèƒ½ã«ã¤ã„ã¦ã–ã£ã¨ãŠã•ã‚‰ã„。@extend ã•ã‚Œã‚‹å´ã¨ã—ã¦ä¸€é€£ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’定義ã—ãŸã‚»ãƒ¬ã‚¯ã‚¿ãŒã‚ã‚Šã€ãã®ã‚»ãƒ¬ã‚¯ã‚¿ã‚’ @extend ã§ç¶™æ‰¿ã—ã¤ã¤ãƒ—ãƒãƒ‘ãƒ†ã‚£ã‚’è¿½åŠ ã—ãŸã‚Šã—ã¦ã€æ–°ã—ã„セレクタを作りã¾ã™: // SCSS // 継承元ã®ã‚»ãƒ¬ã‚¯ã‚¿ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
LESSã«extendを実装ã—ã¦ã¿ãŸ - hokaccha memo
{{#tags}}- {{label}}
{{/tags}}