Sassã§ã‚«ãƒ©ãƒ¼ã‚’変数ã«è¨å®šã—ã¦CSSã®ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’速ãã™ã‚‹æ–¹æ³• | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作ã©ã†ã‚‚ã§ã™ã‚ˆã€ã¯ã‚„ã¡ã§ã™ã‚ˆâœŒ(´ʘ‿ʘ｀)✌ ã“ã®ã‚ã„ã 昼休ã¿ä¸ã«æ€ã„切ã£ã¦PS4ã¨ã€Œé¾ãŒå¦‚ã0ã€ã¨ã€ŒFinal Fantasy 零å¼ã€ã‚’ãƒãƒã£ã¦ã—ã¾ã„ã¾ã—ãŸ( ˘ω˘)＜計65,000円ãªã‚Š ã—ã°ã‚‰ã節約ã®ãŸã‚ãŠæ˜¼ã®ãŠå¼å½“生活ãŒã‚“ã°ã‚Šã¾ã™(◞‸◟) ãã‚“ãªã“ã¨ã¯ã©ãƒ¼ã§ã‚‚ã„ã„ã§ã™ã。 今回ã¯Sassã§1ã¤ã®ã‚«ãƒ©ãƒ¼ã‚³ãƒ¼ãƒ‰ã‚’使ã„色々ã¨ç®¡ç†ã‚’ã™ã‚‹æ–¹æ³•ã‚’ã”紹介ã—ã¾ã™( ˘ω˘)☠è¨å®šæ–¹æ³• ã¾ãšã‚«ãƒ©ãƒ¼ã‚’変数ã§å®šç¾©ã—ã¾ã™ã€‚ $base:#46AFED; $baseã®è‰²ã‚’明るãè¨å®šã—ãŸã„å ´åˆã¯lightenã§è¨å®šã—ã¾ã™ã€‚ %ã§æ˜Žã‚‹ã•ã®å€¤ã‚’変ãˆã¾ã™ã€‚ color:lighten($base, 10%); ã“れをã¾ãŸå¤‰æ•°ã§å®šç¾©ã™ã‚‹ã¨ã„ã„ã‹ã‚‚ã§ã™ã。 $Lighten10:lighten($base, 10%); è¨å®šæ–¹æ³•ã¯ä»¥ä¸Šã«ãªã‚Šã¾ã™ã€ã‚«ãƒ³ã‚¿ãƒ³ã§ã™ã( ˘ω˘)☠è¨å®šã§ãる種類 è¨å®šã§ãる色åˆã„ã¯ä»¥ä¸‹
ä»»æ„ã®è‰²ã‹ã‚‰ã‚«ãƒ©ãƒ¼ãƒˆãƒ¼ãƒ³ã®CSS指定をSassã®å¤‰æ•°ã§è‡ªå‹•çš„ã«ç”Ÿæˆã™ã‚‹
ãã†ã ã€Sass使ãŠã†ï¼ˆRailsフãƒãƒ³ãƒˆé–‹ç™ºè€…å‘ã‘）
Sassã®å¤‰æ•°å‘½åè¦å‰‡ã¨BEM
知ã£ã¦å¾—ã™ã‚‹Sass/Compassã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨ä½¿ã„æ–¹
パフォーマンスã‹ã‚‰è€ƒãˆã‚‹Sass/Compassã®å°Žå…¥ãƒ»é‹ç”¨
{{#tags}}- {{label}}
{{/tags}}