• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > CSS的SASS样式编程指南

CSS的SASS样式编程指南

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含CSS,SASS等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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

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

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

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

  1. .weather {   
  2.   @extends %module;    
  3.   ...   
  4. }  

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

  1. .weather {   
  2.   @extends %module;    
  3.   background: LightCyan;   
  4.   ..   
  5. }   
  6.   @include(s)   
  7.     
  8. .weather {   
  9.   @extends %module;    
  10.   background: LightCyan;   
  11.   @include transition(all 0.3s ease-out);   
  12.   ...   
  13. }  

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

  1. .weather {   
  2.   @extends %module;    
  3.   background: LightCyan;   
  4.   @include transition(all 0.3s ease);   
  5.   > h3 {   
  6.     border-bottom: 1px solid white;   
  7.     @include transform(rotate(90deg));   
  8.   }   
  9. }  

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

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

  1. .weather {   
  2.   .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?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=baidu&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> {   
  3.     li {   
  4.       // no more!   
  5.     }   
  6.   }   
  7. }  

  如果你的嵌套多余三次,你很有可能写出一个坑爹的(差劲的?)选择器。坑爹的原因不外乎这个选择器过于依赖HTML的架构(不稳定), 过于详细(功能过于强大,没有弹性),或者是可重用性太差(不太可用)。同时,过多的嵌套层次容易导致代码处于晦涩难懂的境地。

  如果有的时候与类相关的代码真的太多了,使得你不得已使用标签选择器。你可能需对于某个类要写的非常具体,以避免不必要的层叠。 甚至有可能的话,利用extend来使用CSS里一些可重用性的特性。
 

  1. .weather   
  2.   > h3 {   
  3.     @extend %line-under;   
  4.   }   
  5. }  

  嵌套的代码不要超过50行

  若果SASS里的嵌套多于50行,那么它很可能不能完整的显示在编译器的一页中,这样会导致代码不易阅读,难以理解。嵌套本来是为了方便和简化思考与代码的组织。如果有违阅读性,请别嵌套。
  全局与区域化的SASS文件序列相当于表格内容

  换言之,它们并没有任何一种固定样式。开发者要提醒自己保持所有部分的样式风格一致,有序。

  首先列出厂商/全局的库,其次列出自定义库,然后是模式,最后是每个分部的用到的库。

  这样一来‘目录‘看起来就像下面这个例子一样,一目了然:
 

  1. /* Vendor Dependencies */  
  2. @import&n

您可能想查找下面的文章:

  • html、css和js注释规范用法小结
  • HTML+CSS项目开发经验总结(推荐)
  • CSS3文本阴影text-shadow属性详解
  • html/css基础篇——html代码编写过程中的几个警惕点(必看)
  • 简单html以及css的用法详解
  • HTML基础知识——css样式表,样式属性,格式与布局详解
  • HTML基础必看——全面了解css样式表
  • Html/Css(新手入门第一篇必看攻略)
  • 全面了解html.css溢出
  • HTML (css样式规范)必看篇

相关文章

  • 2017-08-05将html文本中所有的标签替换掉的方法
  • 2017-08-05修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
  • 2017-08-05html显示长度较大的数据时的处理方法
  • 2017-08-05html 中文乱码 HTML超链接中文乱码问题分析及解决方法
  • 2017-08-05HTML页面中复选框的操作方法
  • 2017-08-05让pre标签自动换行示例代码
  • 2017-08-05tbody标签的妙用 加速表格内容显示
  • 2017-08-05Form提交表单页面刷新不跳转
  • 2017-08-05如何弹出QQ临时对话框实现不添加好友在线交谈效果
  • 2017-08-05td单元格合并时 td宽度问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html,sHtml,XHtml区别分析小结
    • HTML超出文本多行截取实现原理及代码
    • 详解HTML中table表格的frame和rules属性
    • 超链接的宽度和高度直接设置不起作用的解决方法
    • HTML表格布局实例讲解
    • DIV常用属性大全自己整理
    • DIV背景半透明文字不半透明的样式
    • 文本框点击后自带蓝色边框解决办法
    • HTML实现页面自动跳转的五种方法
    • DOCTYPE 文档类型声明(网页爱好者必看)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有