标签：and tor splay nes eve transform produce amp ems
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
标签：and tor splay nes eve transform produce amp ems
原文地址：http://www.cnblogs.com/Answer1215/p/6697217.html
