CSS的SASS样式编程指南,包括对于嵌套器和注释的使用

2019-09-09 郑州网站建设  

随着越来越多的开发者使用SASS,我们有必要关注一下SASS的代码的个数问题。 我们可以从CSS(层叠样式表)的语法出发,来解释SASS语法的一些非常之处,毕竟,CSS样式指南是很常见的。

  这篇新闻主要介绍了我个人比较感兴趣的一些特性,也许能够让你从中受用,形成一套属于自己的SASS使用指南。
继续保持自己常用的CSS格式规则和样式指南

  这篇新闻着重讨论了关于SASS的一些内容,但是在此基础上,开发者需要保持自己已有并且良好的格式规则。如果你还没有发展出一套属于自己的格式规则,那么这里有一些样式指南的综述,需要可以帮你形成属于自己的CSS编写习惯。这里仅列出一些其中所包含的部分内容:

1. 保持行缩进一致
    2. 保持冒号/大括号前后空格数的一致
    3. 保持一行一个选择器,一行一个规则
    4. 相关的属性尽量写在一起
    5. 对于类名命名规则由一个规划
    6. 避免使用CSS id选择器
    7. 等等

  接下来我们就了解一下怎么写出美观的SASS代码吧,以编写一个.weather类的属性为例:
首先列出@extend(s)
 

CSS Code复制内容到剪贴板

.weather {   

  @extends %module;    

  ...   

}  

  这样做能够使开发者保持一个清楚的思路,能够立刻知道这个类与其属性和其他类及其属性的关系,保持属性的一致和属性重用的清楚思路。
  普通样式
 

CSS Code复制内容到剪贴板

.weather {   

  @extends %module;    

  background: LightCyan;   

  ..   

}   

  @include(s)   

    

.weather {   

  @extends %module;    

  background: LightCyan;   

  @include transition(all 0.3s ease-out);   

  ...   

}  

  这样做能够使开发者一眼看出@extend(s)和@include(s)的部署,便于自己以及其他开发者对代码的解读。你可能还会对是否区分自定义的@includes和公共来源的@includes在有些情况下做出决定(尤其是考虑到代码的可重用性和时效性)
  选择器嵌套
 

CSS Code复制内容到剪贴板

.weather {   

  @extends %module;    

  background: LightCyan;   

  @include transition(all 0.3s ease);   

  > h3 {   

    border-bottom1px solid white;   

    @include transform(rotate(90deg));   

  }   

}  

  在嵌套部分内,继续使用上述的样式规则。嵌套的部分永远都需要放在最后。
 所有厂商前缀使用@mixins

  厂商前缀(CSS前缀)具有特别强的时效性。 由于现代浏览器的更新,这些前缀的使用将越来越少。你可以通过更新mixins里的内容(或者在你mixin里用到的一些库将自动更新)去适应这些变化。 哪怕mixin只有短短一行,也没有关系。
但当某些厂商前缀的私有化特别严重时,这些前缀将特别难以标准化并且应用其他前缀或者无前缀的版本会得不偿失,我会选择放弃@mixin这些厂商前缀。比如像-webkit-line-clamp, -mscontent-zoom-chaining或者类似情形。
  嵌套的层次不要超过3层
 

CSS Code复制内容到剪贴板

.weather {   

  .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=cities&kdi0=0&luki=6&n=10&p=百度&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">cities</span></a></span> {   

    li {   

      // no more!   

    }   

  }   

}  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1565.html转载请标明出处,谢谢合作!
标签:
  • 随着
  • 使用
  • 越来越
  • 开发者
  • CSSSASS
  • SA