SCSS

【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项目

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让你实现自动化功能。感兴趣的同学请点击阅读正文。

《Sass for Web Designers》之Sass和媒体查询

在这本书中,我想要把主要精力都集中在讲解Sass的基础使用,和证明Sass并不会和你的工作流程脱节。但在最后一章中,我想讨论一些使用Sass结合媒体查询的高级技术和一些我每天工作中用到的将复杂CSS简化的例子。只要你能想到的,Sass就可以办到。使用变量和一些mixin会让你的生活变得更轻松。如果你想的话,Sass完全不局限于这些简单的功能。下面这个例子再一次举重若轻的展示了Sass的建立兼容高清屏幕的响应式网站。

《Sass for Web Designers》之Sass的用法

在这一章中,我将分享在我项目中每天使用到的一些Sass的特性。我还特别为这本书建立了一个虚拟项目来保证我们谈论的Sass的功能是在一个真实环境中进行的。这个项目就叫做Sasquatch Records–一个很简单的专注于神话,晦涩难懂的,牲畜类等超自然音乐风格的唱片公司网站。

页面

返回顶部