Preprocessor

【Sass中级】模块化CSS更要避免选择器嵌套

我们之前介绍了选择器嵌套过深将会带来的有关风险。该基本规则可以很好的帮助你避免一些错误选择器的嵌套。但实际上,采用此概念有一个很大的好处,让你的选择器更为干净。但当你避免嵌套主要选择器时,又将会发生什么呢?

【Sass中级】使用Sass和Compass制作雪碧图

作为一名Web开发人员,在关注浏览器性能的时候,雪碧图("image spriting")这样的技术诞生了,旨在减少HTTP的请求数。事实证明,更少的请求数(当文件大小没有显著的区别时)对于一个页面的加载速度有明显的区别。“Image Spriting”的工作原理是一堆的图像(称为“sprites”,精灵)合并成一张大的图像(国内称为雪碧图),以达到减少HTTP的请求数。然后通过巧妙的显示雪碧图中需要呈现的图像。

【Sass中级】如何根据背景颜色动态修改文本颜色

设计选择文本颜色(前景色)一般都是在背景颜色的基础做选择。如果背景颜色是亮色,文本颜色就是暗色;如果背景颜色是暗色,文本颜色就亮色。因为这是亮色和暗色的配合,文本更容易阅读。那么我们如何利用Sass在背景色的基础上选择合适的文本颜色呢?

【Sass初级】开始使用Sass和Compass

如果你的朋友、同事或网友有跟你说过Sass或者Compass,或者两者,那太棒了。现在怎么办?在这篇初学者指南中,我首先带领大家使用Sass和Compass。我将告诉大家如何完成安装和创建一个测试项目。怎么使用Sass编译CSS,甚至还会告诉大家有关于Sass中的"mixin"。

使用Compass生成雪碧图

CSS雪碧图是将几个图片拼合成一张图片,以此来减少HTTP请求的方法,并且可以提升网站加载性能。除了使用传统方法在Photoshop中手动拼合,还有一些简便的方法和便捷的工具来帮助我们完成这项工作。但是,以我处理CSS雪碧图的经验来说,没有哪种方法比使用CompassSprite函数更轻松容易的了。现在就让我们来看看他是如何工作的。

【Sass初级】嵌套选择器规则

众所周知Sass是一种高效、可靠而又精确的工具,给了我们很多自由空间,让开发者减少使用CSS的一些痛苦,当然,这也意味着一种新的责任到来。在CSS中,我们都知道所有代码都在一个“根级别”的选择器中,每个CSS的样式声明都写嵌套的话,那意客味需要写很多的代码。今天我要带领大家进入到Sass的最基本原则中。这就是所谓的“基础规则(Inception rule)”。此规则可以帮助你避免一些常见错误(使用Sass的常见错误),不管是你Sass的初学者,还是中级或者高级Sass开发者。

【Sass初级】如何组织一个Sass项目

Sass最有用的一个特性就是可以将你的样式表分隔成很多个单独的文件。然后,你可以在主样式文件中通过@import引入你所需要的.scss文件。但是你应该如何组织你的Sass项目呢?有没有分离样式文件的一个标准呢?Hugo Giraudel早前写过一篇关于这方面的教程《管理Sass项目文件结构》,今天我们一起看看John W. Long对Sass项目文件组织有何看法或经验,值得我们去学习。

【Sass初级】定义好的变量名

Sass中的定义变量是非常的强大的,你可以在一个地方定义好变量,在项目的多个地方使用这个定义的变量。它允许你在集中的一个地方做变化,而不需要在项目和多个文件中使用查找替换的方式来做修改。但是选择一个好的变量名是一件比较困能的事情。如果你不小心,在项目中变量很容易失控。最常见的就是你会忘记了在项目中定义了什么变量名,因为你很难记住你定义的所有变量名,这样有可能会给你在项目开发中带来不必要的挫折。

探索Sass3.3中的Maps(二):Sass Maps和Memoization

在介绍Sass Maps的博客系列中,第一篇文章主要介绍了Sass3.3 引入了Sass Maps,而在第二部分(这篇文章),我将向大家阐述Sass Maps更强大用途之一:memoization。Memoization技术已经常期用于其他语言当中,以来提高性能。它涉及到一个函数结果的缓存,是这样的,如果一个函数使用相同的的参数调用两次,那么缓存的副本可以用来替代需要再次计算的值。

使用CSS3 Gradients创建图片占位符

图片占位符,我们最常用的方案就是留空白区域,或者使用空的div标签来模拟,甚至使用一张背景图片来做。但这些方案都不是一个完美的方案,那么什么是完美的方案呢?今天我们通过CSS3的渐变来实现图像的占位符功能,这种方案既让你的代码更为干净,而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。

页面

返回顶部