使用Sass来编写面向对象的CSS代码

2020-04-30 15:15:25易采站长站整理

}   
%facebook-background {   
  color: #fff;   
  background: #3b5998;   
}   
  
.btn {   
  &–twitter {   
    @extend %button;   
    @extend %twitter-background;   
  }   
  &–facebook {   
    @extend %button;   
    @extend %facebook-background;   
  }   
}  

具有语义化了,完美?Sass解决了我们的总是。记住:@extend让你的HTML保持最干净,而且又具有语义化,这在Sass中是件十分容易的事情。

我喜欢把其称为OOSass,因为他是OOCSS和Sass的混合物。当然,你不必使用它。如果你不在刻意在HTML中追求语义化,你仍然可以使用OOCSS。每个人都有自己的方式,那么你又是如何构建你自己的CSS呢?请与我们一起分享。