首页 > 网页教程 > CSS > CSS工具之SASS样式开发指南

CSS工具之SASS样式开发指南

时间:2013-06-27    来源:伯乐在线

本站编注:SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。Sass扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。

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

这篇文章主要介绍了我个人比较感兴趣的一些特性,也许能够让你从中受用,形成一套属于自己的SASS使用指南。

继续保持自己常用的CSS格式规则和样式指南

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

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

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

首先列出@extend(s)

.weather {
  @extends %module; 
  ...
}

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

普通样式

.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在有些情况下做出决定(尤其是考虑到代码的可重用性和时效性)

选择器嵌套

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

在嵌套部分内,继续使用上述的样式规则。嵌套的部分永远都应该放在最后。

所有厂商前缀使用@mixins

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

嵌套的层次不要超过3层

.weather {
  .cities {
    li {
      // no more!
    }
  }
}

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

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

.weather
  > h3 {
    @extend %line-under;
  }
}

嵌套的代码不要超过50行

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

全局与区域化的SASS文件序列相当于表格内容

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

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

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

/* Vendor Dependencies */
@import "compass";

/* Authored Dependencies */
@import "global/colors";
@import "global/mixins";

/* Patterns */
@import "global/tabs";
@import "global/modals";

/* Sections */
@import "global/header";
@import "global/footer";

这些文件就像是一个指南针,颜色和mixins并不产生已编译好的CSS代码,他们纯粹是独立的库。在此之后引入模式,使得重写变得更安全,不会出现专一性的冲突。

将SASS合理的分割成多个小文件

这样做没有任何不好。在情况允许的时候,尽量使用小而精的多个文件,这样便于开发者在寻找一些特定文件,而不是在几个拥有冗长代码的大文件中大海捞针。

...

@import "global/header/header/";
@import "global/header/logo/";
@import "global/header/dropdowns/";
@import "global/header/nav/";
@import "global/header/really-specific-thingy/";

我经常做的就是在一个全局scss文件中逐个引用这些文件,而不是引用一个_header.scss文件,然后再_header.scss文件中在逐个引用。这样做能够降低索引的时间和提高阅读效率。

当这些文件过多导致import序列太长时,你可能会用到 Globbing

相关推荐
koala:LESS/Sass前端预处理器语言图形编译工具
初识CSS3的强大功能
如何用CSS3 border-radius来实现圆角DIV?
CSS1-CSS3选择器汇总表
微软的IE9将要支持CSS3和HTML5?
CSS3亮点前瞻之线性渐变实例详解
不同浏览器在CSS3和HTML5下的兼容速查表
CSS3属性box-shadow(图层阴影)的使用教程
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
让IE6/IE7/IE8支持CSS3属性的脚本
Smashing Magazine CSS3设计赛获奖作品赏析
前端设计必备的CSS3开发实用工具集
看这些用CSS3绘制的图标,你震撼了吗
利用CSS3技术嵌入Web字体格式及浏览器兼容性介绍
24款超级实用的免费CSS3在线工具宝典
HTML5和CSS3开发的功能检测类库 — Modernizr
CSS3教程:17种用CSS实现的很酷炫的立体网页按钮和字体效果
6个设计精致使用CSS3技术美化的表单教程
5款立体质感的CSS3导航菜单(附英文教程和下载)
用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮
关注一些鲜为人知、试验性的CSS属性
36款超级实用的CSS3在线生成器和工具推荐
7个基于CSS3的工具提示(tooltip)教程推荐
网页前端开发:微博CSS3适用细节初探
CSS3教程:创意独特漂亮的CSS动画导航菜单设计
20个基于CSS3制作的3D按钮教程分享(附DEMO演示)
25个超酷的CSS3动画按钮和菜单教程分享
CSS3新手入门教程:快乐的CSS3之旅!
21个视觉效果超棒的CSS3动画特效欣赏(附演示)
7款免费的CSS3代码在线自动生成工具推荐
30款最佳的CSS3工具和应用程序推荐 web开发必备
8个CSS3前端开发必备的实用在线帮助手册
29款web开发最佳CSS工具和应用推荐
9种网页设计有用的CSS3属性和使用技巧
10款超级实用的在线CSS3代码生成工具推荐

分类导航

教程推荐

热门特效

热门教程