今天小编跟大家讲解下有关使用Sass来编写面向对象的CSS代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用Sass来编写面向对象的CSS代码 的相关资料，希望小伙伴们看了有所帮助。
自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统 用来组织你的CSS代码方式之一。
OOCSS不同于其他组织CSS代码方法 比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上 我也通常将SMACSS与OOCSS混为一谈。
OOCSS、SMACC和BEM在CSS中是很有内涵的东东 早就在W3cplus站点上有相关内容科普过。可以说理解了这些内容将能更好的帮助您组织、管理您的CSS代码或者说CSS模块。
今天 我要和大家一起探讨的是OOCSS的一些基本原则。主要跟大家一起探讨的是如何将Sass和OOCSS更好结合在一起的一些建议。什么是对象
在视觉是这是一个重复的模块 可以将HTML、CSS和JavaSctrip独立抽取出来 成为一个独立的片段——Nicole Sullivan
将一个CSS对象抽取出来要考虑的第一件事情就是怎么将样式与结构分离出来 组织代码的最佳方式是什么 OOCSS的创始人Nicole Sllivan提了两个主要原则：
结构与样式分离：你应该在对象中定义结构和位置 而对于样式特性应该使用类名分离出来 比如说background或border。这样一来你就不需要去覆盖一些特征性样式。 容器与内容分离：不要在你的HTML结构中插入样式。换句话说 你的样式中尽量不要使用html标签或者id标识符。相反 应该定义一些类名来定义样式 而且选择器的嵌套的层级应该尽量的少。
我们快速做一个示例
运用这些原则可能比较困难（理解理论的东西总是蛋疼的）。让我们来看一个简单的实例 看看是如何组织这样的代码:
CSS Code复制内容到剪贴板 .box-1{ border:1pxsolid#ccc; width:200px; height:200px; border-radius:10px; } .box-2{ border:1pxsolid#ccc; width:120px; height:120px border-radius:10px; }你不难发现 有一些重复的样式出现。在这个例子中 border样式在两个类中都定义了。如果你想改变border-radius或border属性值时 不得不在两个地方修改。
为了解决这个问题 把这个样式放在另一个新增加的类名中：
CSS Code复制内容到剪贴板 .box-1{ width:200px; height:200px; } .box-2{ width:120px; height:120px; } .box-border{ border:1pxsolid#CCC; border-radius:10px; }在HTML结构中 我们可以这样使用：
XML/HTML Code复制内容到剪贴板 <divclass="box-2box-border">Loremipsum</div> <divclass="box-1box-border">Loremipsum</div>语义化和维护
你在意没有语义化 而我更关心的是代码的维护。比如说这个示例所示。
纯CSS来定义对象就没有语义化 但这样就存在一些问题:
每次改为样式风格时 都需要修改HTML 没有一种安全的方式来访问DOM元素
对于OOCSS来说 除了维护HTML比较困难之外 其他都是很完美的。我们的CSS很容易扩展 也非常方便用于新的内容中。
因此我们写了部分CSS代码用于在HTML结构中进行扩展。这样的方式真的会变得更好 Sass的到来
[email protected]如何工作的。因此 要非常感谢选择器的占位符%placeholder [email protected] 如此一来在CSS就是可以创建一些有语义化的类名 也解决了HTML中的存在的问题。
我们必须使用%placeholder来创建对象 [email protected] 将其合在一起。这样就可以自己组织代码：
CSS Code复制内容到剪贴板 a.twitter{ min-width:100px; padding:1em; border-radius:1em; background:#55acee color:#fff; } span.facebook{ min-width:100px; padding:1em; border-radius:1em; background:#3b5998; color:#fff; }[email protected] 这样就可以得到一个干净的CSS对象 在Sass中是十分容易的事情 我们也不必要再花时间来修改HTML。
CSS Code复制内容到剪贴板 %button{ min-width:100px; padding:1em; border-radius:1em; } %twitter-background{ color:#fff; background:#55acee; } %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呢 请与我们一起分享。
来源：爱蒂网
