现代 CSS

SCSS

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

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

Sass带来的变革

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

引进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能变得更简单(其他预处理器也在做这样的事情)。包括我在内,我也一直在这么做。

页面

返回顶部