应用Sass来撰写朝向目标的CSS编码

日期:2021-03-05 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就变成1个领跑的控制模块系统软件,用来机构你的CSS编码方法之1。

OOCSS不一样于别的机构CSS编码方式,例如SMACSS或BEM。根据将CSS编码和构造分离出来让你的控制模块可重用。客观事实上,我也一般将SMACSS与OOCSS混为1谈。

OOCSS、SMACC和BEM在CSS中是很有内函的东东,早就在W3cplus站点上有有关內容科普过。能够说了解了这些內容将能更好的协助您机构、管理方法您的CSS编码或说CSS控制模块。

今日,我要和大伙儿1起讨论的是OOCSS的1些基础标准。关键跟大伙儿1起讨论的是怎样将Sass和OOCSS更好融合在1起的1些提议。
甚么是目标?

    在视觉效果是这是1个反复的控制模块,能够将HTML、CSS和JavaSctrip单独抽取下来,变成1个单独的片断——Nicole Sullivan

将1个CSS目标抽取下来要考虑到的第1件事儿便是如何将款式与构造分离出来出来,机构编码的最好方法是甚么?OOCSS的创办人Nicole Sllivan提了两个关键标准:

    构造与款式分离出来:你应当在目标中界定构造和部位,而针对款式特点应当应用类名分离出来出来,例如说background或border。这样1来你就不必须去遮盖1些特点性款式。
    器皿与內容分离出来:不必在你的HTML构造中插进款式。换句话说,你的款式中尽可能不必应用html标识或id标志符。相反,应当界定1些类名来界定款式,并且挑选器的嵌套循环的等级应当尽可能的少。

大家迅速做1个示例

应用这些标准将会较为艰难(了解基础理论的物品一直蛋疼的)。让大家看来1个简易的案例,看看是怎样机构这样的编码:

CSS Code拷贝內容到剪贴板
  1. /* 不太好的方法 */  
  2. .box⑴ {   
  3.   border1px solid #ccc;   
  4.   width200px;   
  5.   height200px;   
  6.   border-radius: 10px;   
  7. }   
  8. .box⑵ {   
  9.   border1px solid #ccc;   
  10.   width120px;   
  11.   height120px  
  12.   border-radius: 10px;   
  13. }  

你不难发现,有1些反复的款式出現。在这个事例中,border款式在两个类中都界定了。假如你想更改border-radius或border特性值时,迫不得已在两个地区改动。

以便处理这个难题,把这个款式放在另外一个新提升的类名中:

CSS Code拷贝內容到剪贴板
  1. /* 好的方法 */  
  2. .box⑴ {   
  3.   width200px;   
  4.   height200px;   
  5. }   
  6. .box⑵ {   
  7.   width120px;   
  8.   height120px;   
  9. }   
  10. .box-border{   
  11.   border1px solid #CCC;   
  12.   border-radius: 10px;   
  13. }  

在HTML构造中,大家能够这样应用:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="box⑵ box-border">Lorem ipsum</div>  
  2. <div class="box⑴ box-border">Lorem ipsum</div>  

词义化和维护保养

你在乎沒有词义化,而我更关注的是编码的维护保养。例如说这个示例所示。

纯CSS来界定目标就沒有词义化,但这样就存在1些难题:

    每次改成款式设计风格时,都必须改动HTML
    沒有1种安全性的方法来浏览DOM元素

针对OOCSS来讲,除维护保养HTML较为艰难以外,别的全是很完善的。大家的CSS很非常容易拓展,也十分便捷用于新的內容中。

因而大家写了一部分CSS编码用于在HTML构造中开展拓展。这样的方法真的会变得更好?
Sass的来临

我能够毫无疑问你毫无疑问听过Sass的@extend指令和掌握他是怎样工作中的。因而,要十分谢谢挑选器的占位符%placeholder,在Sass中能够根据@extend来拓展,这般1来在CSS便是能够建立1些有词义化的类名,也处理了HTML中的存在的难题。

大家务必应用%placeholder来建立目标,根据@extend在类中启用,将其合在1起。这样便可以自身机构编码:

CSS Code拷贝內容到剪贴板
  1. /* 不太好的方法 */  
  2. a.twitter {   
  3.   min-width100px;   
  4.   padding: 1em;   
  5.   border-radius: 1em;   
  6.   background#55acee  
  7.   color#fff;   
  8. }   
  9. span.facebook {   
  10.   min-width100px;   
  11.   padding: 1em;   
  12.   border-radius: 1em;   
  13.   background#3b5998;   
  14.   color#fff;   
  15. }  

全部的目标都应用@extend和基础目标混和在1起,这样便可以获得1个整洁的CSS目标,在Sass中是10分非常容易的事儿,大家也无须要再花時间来改动HTML。

CSS Code拷贝內容到剪贴板
  1. /* 好的方法 */  
  2. %button {   
  3.   min-width100px;   
  4.   padding: 1em;   
  5.   border-radius: 1em;   
  6. }   
  7. %twitter-background {   
  8.   color#fff;   
  9.   background#55acee;   
  10. }   
  11. %facebook-background {   
  12.   color#fff;   
  13.   background#3b5998;   
  14. }   
  15.   
  16. .btn {   
  17.   &--twitter {   
  18.     @extend %button;   
  19.     @extend %twitter-background;   
  20.   }   
  21.   &--facebook {   
  22.     @extend %button;   
  23.     @extend %facebook-background;   
  24.   }   
  25. }  

具备词义化了,完善?Sass处理了大家的一直。记牢:@extend让你的HTML维持最整洁,并且又具备词义化,这在Sass中是件10分非常容易的事儿。

我喜爱把其称为OOSass,由于他是OOCSS和Sass的混和物。自然,你无须应用它。假如你不在有意在HTML中追求完美词义化,你依然可使用OOCSS。每一个人都有自身的方法,那末你又是怎样搭建你自身的CSS呢?请与大家1起共享。

上一篇:详解CSS中的字体样式特性的应用 返回下一篇:没有了