Sass

【Sass高级】Sass中的反三角函数

有可能你会认为数学在CSS中用不上,但实际上,在写CSS时运用一些数学可以帮你做一些令人惊讶的事情。数学(尤其是三角函数)可以帮助你模拟一个真实的世界。如果你想做这样的事情,你需要了解复杂的三维变换。如果你只是想在朋友面前展示一下你的才华,这将是一件非常有兴趣的事情。在这篇译文中,将带大家领略Sass编写反正弦,反余弦和反正切等三角函数(因为在Compass中没有这几个函数功能),并且通过这些函数完成一个旋转的三十二面体案例效果。

将你的CSS项目转换成Sass

在过去的一年里,我花了很多的时间在学习Sass知识以及提高Sass的技术水平。在与别人的交谈中,我发现从CSS项目转到CSS预处理器时,都有这样的担忧:我不知道从哪里,从什么时候开始,将CSS项目转换成Sass。有大量的文档和技术诀窍介绍使用Sass和Compass来创建一个新的项目,但考虑到如何将一个CSS项目转换成Sass项目对部分同学有所帮助的时,我整理了这样的一个教程。

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

页面

返回顶部