如何在项目中使用Sass
想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识,也让自己初步掌握了一些Sass一些基础知识与技能,当然也让自己喜欢上了Sass,并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass,也希望Sass能真正为前端人员带来好处。
想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识,也让自己初步掌握了一些Sass一些基础知识与技能,当然也让自己喜欢上了Sass,并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass,也希望Sass能真正为前端人员带来好处。
Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用,可以帮助前端开发人员节省很多时间,而且能更好的利用。Sass中的Mixins在实际开发中能帮助我们做非常多的事情,可以说是一劳永逸。可以将所有的Mixins放置在文件中,需要的时候直接调用即可。大家可以将自己看到的,在使用的,觉得好的Mixins收集起来。慢慢的,你将会有很多优秀的Mixins,而这些Mixins就可以帮你做很多的事情,节省很多时间,让你做更多有意义的事情。
借着这篇译文,向各位在使用Sass的同行朋友征集Sass的Mixins和Functions代码集,大家行动起来吧,让更多的同学一起分享您的成果。
在编写HTML结构时,多类名的运用大家都应该有使用过,虽然这样使用能给制作带来极大的方便,但也存在一定的风险。为了更好的区分,很多时候在使用BEM的命名方式,以有让多类名在同一个元素中变得更独立性,不至于覆盖样式。但在Sass中运用BEM的时候,很多时候提倡使用@extend来扩展。那么是使用多类名更好呢?还是使用@extend扩展更强呢?
在第一篇文章中,分享了如何组织一个成功的回顾总结会议。那么在此文章中,主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。
在几个月之前,我阅读了Harry Roberts写的《Grouping related classes in your markup》一文。他介绍了一个很有趣的概念——用来处理CSS类名。在这篇文章中介绍了使用[]
来使用相关的属性,快速选择需要的目标元素。介绍的示例中,讨论了使用类名还是属性声明更易于一目了然选择元素。
自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统,用来组织你的CSS代码方式之一。
OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上,我也通常将SMACSS与OOCSS混为一谈。其实John W. Long在The Sass Way上面写了很多篇有关于CSS模块化的教程。
Sass Guidelines是法国一位前端工程师Hugo Giraudel编写的一份有关于Sass相关的规范指南。有一份规范的指南能协助您更理智的,更好维护和更好扩展Sass。而且这份指南已经翻译成多个语言版本,受到Sass爱好都的一致好评。那么在我们大中华区域,我和@南北同学一起将其译成中文,希望能对大家有所帮助。如果译得不对之处,还请多多指正
上篇Sass Guidelines中文版本之一:相关信息主要介绍了Sass Guidelines相关的信息,那么在这一节中将进入正轨,向大家开始介绍Sass Guidelines有关于Sass的相关内容。主要介绍了为什么要一份这样的指南,其原则是什么,以及Sass的一些语法书写规范围等等。
通过Sass Guidelines中文版本之一:相关信息和Sass Guidelines中文版本之二:简介的阅读,我想大家对Sass Guidelines或多或少有一点了解,如果你对此规范指南感兴趣的话,那么接下来可以阅读这篇文章,这是Sass Guidelines第三部分,主要介绍了如何在Sass编写中命名和写注释。里面提供的一些细节还是值得大家编码中注意一二的。
经常会有初学者问,使用Sass时要如何管理自己项目中的文件。也有不少同行朋友针对此问题做过总结与探讨,网上相关的案例也不少,比如说很好的参照案例有:Bootstrap和Foundation等。在Sass Guidelines中也特意针对 这一部分做了详细的描述。作者将文件结构按七合一模式向大家展开介绍,并且如何与组件结合在一起管理。