现代 CSS

Sass

Sass Guidelines中文版本之二:简介

上篇Sass Guidelines中文版本之一:相关信息主要介绍了Sass Guidelines相关的信息,那么在这一节中将进入正轨,向大家开始介绍Sass Guidelines有关于Sass的相关内容。主要介绍了为什么要一份这样的指南,其原则是什么,以及Sass的一些语法书写规范围等等。

Sass Guidelines中文版本之一:相关信息

Sass Guidelines是法国一位前端工程师Hugo Giraudel编写的一份有关于Sass相关的规范指南。有一份规范的指南能协助您更理智的,更好维护和更好扩展Sass。而且这份指南已经翻译成多个语言版本,受到Sass爱好都的一致好评。那么在我们大中华区域,我和@南北同学一起将其译成中文,希望能对大家有所帮助。如果译得不对之处,还请多多指正

Sass带来的变革

接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中,我一直都在使用Sass做为前端开发,用来处理CSS。其实,在W3cplus站点上,已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文,也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者,其实我也更想做为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

页面

返回顶部