编写Sass的八个技巧
Sass可以编译出非常优秀的CSS样式表,或者说,这就是Sass要做的事情。有效的使用Sass可以帮助你构建出干净的有效的CSS,但如果运用不好,Sass其实会让你的CSS文件变得更大,并且添加一些不必要的和重复的CSS代码。下面一些编写Sass小技巧,可以有效帮助你编写出更好的Sass。
Sass可以编译出非常优秀的CSS样式表,或者说,这就是Sass要做的事情。有效的使用Sass可以帮助你构建出干净的有效的CSS,但如果运用不好,Sass其实会让你的CSS文件变得更大,并且添加一些不必要的和重复的CSS代码。下面一些编写Sass小技巧,可以有效帮助你编写出更好的Sass。
Sass3.4并不是离开Sass3.3的一个开创性版本,并没有做过多的改变,但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些,但后面会得到更好的细化。我们来看看这些东西,这些东西对于Sass爱好者还是非常值得期待的。
BEM在Sass3.3中就已经实现,很容易使用,不过他还是受到一定的限制。Sass3.4的出现,其选择器功能上做了进一步的优化,所以在Sass3.3中使用BEM受到的限制在这里将不在是问题,可以通过自定义的Function做一定的处理,让BEM在Sass中更为强大。
接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中,我一直都在使用Sass做为前端开发,用来处理CSS。其实,在W3cplus站点上,已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文,也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者,其实我也更想做为Sass在中国的布道者,让更多的人了解他,学习他,使用他。
为了提高码农的开发效率,现在在线上有很多在线小工具,这些小工具可以帮助大家快速实现自己需要的效果,并且可以生成可用代码。前几天看到一个制作三角的小工具,尝试着使用Sass来将其转换成可用的混合宏。尝试成功,来说说怎么实现的。其实只要你有时间,很多小工具都可以用类似的方法来实现。
CSS画图形在Web运用中时常看到,比如三角形、五角星,心形,Ribbon等。不过以前使用CSS绘制图形一般都是借助于border
来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path
来完成正多边形的绘制,并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数,实现正多边形的开发。
CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation
可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes
,让动画可以根据帧定制不同的动画效果。
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n)
、:nth-of-type(n)
这样的选择器,其好处在这里就不多说了。如果你对这方面感兴趣的话,你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。
去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下,就是没动手,今天体验了一下,还是很有意思的。今天花点时间整理一下,跟大家一起分享。
PostCSS是一种工具,一款已成长为像Sass和LESS一样主流的处理器,这一切都归功于它的强大、速度和易用性。《深入PostCSS Web设计》是使用PostCSS的完全指南,《深入PostCSS Web设计》将指导你如何编写优秀的样式,并将其运用到Web页面,同时让你的样式保持可维护性。这本《深入PostCSS Web设计》将向你展示如何利用PostCSS简化样式表的整个过程。它涵盖了给Web页面添加动态的、现代的样式特性的各种技术。随着内容的深入,你将学习如何使用PostCSS来让CSS更具模块化的特性、更易于维护。读完《深入PostCSS Web设计》,你将掌握如何给Web添加CSS样式表,以及如何创建高执行,可维护的样式表。