关于CSS 和 SCSS

SCSS的嵌套

.login { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; min-width: 1000px; .login-wrapper { width: 100%; height: 100%; background: url( "../../../../assets/img/mpass-login-bg.jpg") top center no-repeat; background-size: cover; position: relative; min-height: 640px; .login-foot { position: absolute; bottom: 5px; height: 80px; line-height: 80px; width: 100%; border-top: rgba( 255, 255, 255, .15) 1px solid; .copyright { text-align: center; color: white; } } } }

转为CSS

.login { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; min-width: 1000px; }

.login-wrapper { width: 100%; height: 100%; background: url( "../../../assets/img/mpass-login-bg.jpg") top center no-repeat; background-size: cover; position: relative; min-height: 640px; }

.login-foot { position: absolute; bottom: 5px; height: 80px; line-height: 80px; width: 100%; border-top: rgba( 255, 255, 255, .15) 1px solid; }

.copyright { text-align: center; color: white; }

对于包含组件的SCSS，表示对于class为mpass-logo的组件，期中div类型使用定义好的div

.mpass-logo { position: absolute; top: 5%; width: 40%; left: 100px; height: 120px; padding: 20px; border-bottom: rgba( 255, 255, 255, .15) 1px solid; display: flex; display: -webkit-flex; div { margin: auto 18px; font-style: normal; font-weight: 400; color: white; font-size: 36px; } }

转为css

.mpass-logo { position: absolute; top: 5%; width: 40%; left: 100px; height: 120px; padding: 20px; border-bottom: rgba( 255, 255, 255, .15) 1px solid; display: flex; display: -webkit-flex; }

.mpass-logo div{ margin: auto 18px; font-style: normal; font-weight: 400; color: white; font-size: 36px; }

• 为所有p元素指定一个样式
• 为所有class="marked"的元素指定一个样式
• 为所有class="marked"元素内的p元素指定一个样式

p

{

color:blue;

text-align:center;

}

.marked

{

background-color:red;

}

.marked p

{

color:white;

}