Preprocessor

Sass @at-root

说到BEM,很多人并不很喜欢,看见那些特长的类名就烦了,而且在写样式的时候,选择器要那么长,更是让人感到烦感。那么告诉大家一个解决的好文案,就是使用CSS的预处理器。在SassConf大会上,给我们传递了Sass3.3的新特性。这些新特性有很多意义,特别是指令,这让你的代码会得更佳清洁。今天我们主要一起来了解Sass中的特性的使用规范。使用@at-root和BEM的结合,让你尽显BEM的优势。

Sass制作Font Awesome图标

Font AwesomeDave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大,并通过CSS中字体相关的CSS对图标进行美化,比如说可以改变图标颜色、大小和增加阴影等,但他也存在一定的弊端。为了使用部分图标,不得不加载所有图标的样式。如果你使用Sass将可以改变这一切,今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

使用Sass减少重复性代码

在Web开发中,每一位写CSS的同学不管使用什么方式进行开发,都必须面对CSS代码中有很多重复性代码。就算你使用OOCSS或者大家讨论激烈的模块化开发,都会有一些代码使用不上。这样直接的后果就是让你的文件变得臃肿,并且难以维护。但是使用Sass,他可以让你避免这些问题。今天我们就通过Sass的@each、@for和@function等方法,来解决这个问题,帮助你减少重复性的代码,甚至是无用的代码,真正做到按需生产。

Sass函数功能——rem转px

性能对于Web前端开发人员是必备的一项技能。CSS3和HTML5的新特性帮助我们改善了应用程序,但有时这些特性并没有得到很好的支持。这就是优雅降级。你想在新的浏览器中使用这些特性,但不能忽视对传统浏览器的支持。我最近开始在做一个新的项目,他必须要支持IE8。由于级联问题的嵌套,使用EM单位时不好把控,所以我决定在这个项目中开始使用有用的rem单位,这样更容易理解和维护。这种方法的主要问题是IE8不支持rem单位。最后,我们需要针对于这种情景创建一个后备方案:使用px单位做降级处理。

Sass Mixins——支持Retina的Icons Sprite

Sprites(国内称之为雪碧图),平常很多时候都是依赖于手工在制作软件中完成,或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图,但在来很多工作量。如果你开始使用Sass或者Compass,你可以发现他们有一个强大的功能,可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代,使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇的《Sass Mixins Icons Sprite with Retina Support》所译,在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

停止使用很多的Sass变量

变量是Sass中很重要的一个部分,不过如何更好的使用好Sass中的变量也是一个很关键的知识点。从定义变量到使用变量,也延伸出类似于定义类名以及使用多类名的问题。Sass中的变量需要语义化定义变量名吗?需要定义多个变量名吗?在您使用Sass过程中是否也探讨过类似的问题?如果没有,我们就以这篇文章开始吧,一起探讨这个很有意义的问题。本文根据的《Stop using so many Sass variables》所译,初步探讨了Sass中变量名的定义以及是否多用更多的变量名。希望大家能喜欢。

写CSS最好方法:OOCSS+Sass

OOCSS非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在HTML标签上的类名会改变就是一件很有趣的事情。如果你把OOCSS和Sass结合在一起,你会得到两个优势:CSS模块不臃肿和HTML维持不变。

OOCSS+Sass

Krasimir Tsonev在《Starting to Write CSS》(中文版本,请点击这里)让你领略了CSS其实也是有思想的,也很有意思的。虽然介绍的各种思想都很强大,但始终没有离开CSS的层面,而CSS却又是非常的脆弱。那么有没有办法,能否结合文中多个思想在一起。你思考过吗?如果你还没有思考并不要紧,今天我们一起跟随Takeshi Takatsudo写的PPT来领略一下OOCSS与Sass的结合。

在这篇文章,主要以两个按钮的制作,来探讨OOCSS的思想以及如何结合Sass更完美的实现。或者说,通过按钮的制作,一起探讨在Sass中如何使用OOCSS的思想。希望大家喜欢。

理解Sass的list

Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松,你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能,我们就必须的深入了解他。Hugo写了几篇教程,其深入的培析了Sass的List功能,以及其使用方法。而在Sass的社区中对List的功能讨论也是相当的激烈。这些天我也一直在阅读这几篇文章,想让自己能更好的理解Sass中的List功能。今天根据这几篇文章,对List功能的介绍做了一些翻译与整理。

IcoMoon+@font-face+Sass制作Icons

自从CSS3的@font-face属性的出现,使用@font-face制作ICON变得越来越流行,使用的频率也越来越高,在很多网站上都能见到他们的影子。随着IcoMoon的在线生成工具的出现,可以使用IcoMoon制作自己你自己的ICON。今天阅读了jaydenseric写的《FUN WITH SASS & FONT ICONS》教程,介绍了如何使用Sass和结合制作字体图标。实在是强大而又有意思,自己动手操作了一回,准备向大家介绍一下,我自己是如何使用IcoMoon@font-faceSass三者结合在一起,制作出自己需要的字体图标。

页面

返回顶部