首页 > 代码库 > [SCSS] Organize Styles with SCSS Nesting and the Parent Selector
[SCSS] Organize Styles with SCSS Nesting and the Parent Selector
SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions.
.box { &-container { /* .box-container, & --> .box*/ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } transition: all 0.8s ease-in-out; &:hover { background-color: #ff4d4d; transform: rotate(360deg); } background-color: #5fb3ce; border: 1px solid burlywood; font-size: 1.5em; width: 200px; height: 200px;}
To css:
.box { transition: all 0.8s ease-in-out; background-color: #5fb3ce; border: 1px solid burlywood; font-size: 1.5em; width: 200px; height: 200px; } .box-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } .box:hover { background-color: #ff4d4d; transform: rotate(360deg); }
[SCSS] Organize Styles with SCSS Nesting and the Parent Selector
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。