Sass

使用Sass来写OOCSS

自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统,用来组织你的CSS代码方式之一。

OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上,我也通常将SMACSS与OOCSS混为一谈。其实John W. LongThe Sass Way上面写了很多篇有关于CSS模块化的教程

引进AM-CSS属性模块

在几个月之前,我阅读了Harry Roberts写的《Grouping related classes in your markup》一文。他介绍了一个很有趣的概念——用来处理CSS类名。在这篇文章中介绍了使用[]来使用相关的属性,快速选择需要的目标元素。介绍的示例中,讨论了使用类名还是属性声明更易于一目了然选择元素。

BEM在Sass3.4中的提升

BEM在Sass3.3中就已经实现,很容易使用,不过他还是受到一定的限制。Sass3.4的出现,其选择器功能上做了进一步的优化,所以在Sass3.3中使用BEM受到的限制在这里将不在是问题,可以通过自定义的Function做一定的处理,让BEM在Sass中更为强大。

关于Sass3.4你应该知道的一些事情

Sass3.4并不是离开Sass3.3的一个开创性版本,并没有做过多的改变,但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些,但后面会得到更好的细化。我们来看看这些东西,这些东西对于Sass爱好者还是非常值得期待的。

BEM修饰符:多类名 VS Sass @extend

在编写HTML结构时,多类名的运用大家都应该有使用过,虽然这样使用能给制作带来极大的方便,但也存在一定的风险。为了更好的区分,很多时候在使用BEM的命名方式,以有让多类名在同一个元素中变得更独立性,不至于覆盖样式。但在Sass中运用BEM的时候,很多时候提倡使用@extend来扩展。那么是使用多类名更好呢?还是使用@extend扩展更强呢?

编写Sass的八个技巧

Sass可以编译出非常优秀的CSS样式表,或者说,这就是Sass要做的事情。有效的使用Sass可以帮助你构建出干净的有效的CSS,但如果运用不好,Sass其实会让你的CSS文件变得更大,并且添加一些不必要的和重复的CSS代码。下面一些编写Sass小技巧,可以有效帮助你编写出更好的Sass。

十个有用的Sass Mixins

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用,可以帮助前端开发人员节省很多时间,而且能更好的利用。Sass中的Mixins在实际开发中能帮助我们做非常多的事情,可以说是一劳永逸。可以将所有的Mixins放置在文件中,需要的时候直接调用即可。大家可以将自己看到的,在使用的,觉得好的Mixins收集起来。慢慢的,你将会有很多优秀的Mixins,而这些Mixins就可以帮你做很多的事情,节省很多时间,让你做更多有意义的事情。

借着这篇译文,向各位在使用Sass的同行朋友征集Sass的Mixins和Functions代码集,大家行动起来吧,让更多的同学一起分享您的成果。

GithubSass Meister

如何在项目中使用Sass

想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识,也让自己初步掌握了一些Sass一些基础知识与技能,当然也让自己喜欢上了Sass,并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass,也希望Sass能真正为前端人员带来好处。

保持Sass的简单

还有两个月时间,我使用Sass就有两年时间了。几乎每一天,在工作中,在家里,在项目中,都有人问我,怎么更好使用Sass。很高兴他们这么相信我,每天能为他们提供帮助,我感到非常高兴。有些需求是合理的,有些需求是烦死人的。嘿嘿,我们可以从任何地方开始。也有些是抽象的。每个人都希望使用Sass能变得更简单(其他预处理器也在做这样的事情)。包括我在内,我也一直在这么做。

使用Sass管理颜色

在我做过的web项目中,几乎都用到了css预处理器,这样一来,变量的使用为我们带来了极大的方便,也成为了使用css预处理器的一个主要优点。一般来说,颜色、十六进制等其他一些重复性的、难于记忆的代码片段,是最先被我们用变量存储起来的。在很多Sass或者Less的项目中,我都把颜色值和变量建立起一定的关系,变量的名字同时也描述了它们的用途,这样在项目当中就会避免一些问题,比如过分的纠结于具体实现过程。

页面

返回顶部