Preprocessor

Sass Maps

对于一位程序员来说,对数组并不会陌生。但对于前端人员(像我这样不算前端的前端)对于数组,只是听过,看过,但不知道如何使用?然而在Sass3.3版本中开始引入一个新的数据类型maps,他长得跟数组非常的相似。但也让我极其的苦逼,因为我不懂数组呀,不知道如何下手开始使用Sass的map功能。

Sass进阶

先简单的说一下 Sass 这个东西。CSS 是一些非常基础简单得语句的组合,既然简单的语句,就不可避免的有很多重复,冗余的东西。而且没有传统编程语言变量、控制语句等高级特性,所以造成了 CSS 编写低效,往往需要通过查找替换、大量复制来修改或者编写。Sass 就是用来弥补这个缺陷,为 CSS 提供额外的高级功能,使其开发更加方便快捷,更加方便管理。所以你需要使用 Sass 的语法来编写代码,然后通过 Sass 编译成具体的 CSS 代码,然后使用。所以这里就需要学习一下 Sass 的语法。

使用list-maps将你的Sass技术水平提高到另一层次

一直以来Sass的能定义变量都是其核心功能。但随着项目的越来越庞大,越来越让你感觉管理项目的变量,和调用变量是件蛮麻烦的事情。但随着Sass3.3的出现,随着map功能的出现,我们不应该还仅停留在以前最古老的基础上使用Sass的变量,我们应该使用map的特性来管理和调用变量,让新功能帮助大家做更多的事情。特别的Lunelson的List-map中的map和list的功能的结合,将让你的Sass技术水平提高到另一个层次。

使用Sass管理z-index更好的解决方案

z-index在一个Web的应用可以说简单也可以说是复杂。特别是一个复杂的系统上要管理好多个z-index并不是件容易的事情,不过通过Sass这样的预处理器来管理会让你变得容易与简单很多。而且有关于如何使用Sass更好的管理z-index的值文章介绍如雨后春笋般的涌现,比如Jackie Balzer的Sass z-index Management for Complex Layouts,Doug Avery的Sass and z-indexes: a (slightly) better way以及Chris Coyier去年发布的Handling z-index等。今天Sass大师Hugo Giraudel在前几篇文章的基础整理了一篇使用Sass管理z-index更好的解决方案,我想这篇文章会让你受益无穷。

Sass管理复杂的z-index

z-index本身就是一个棘手的事情,在一个复杂的布局中管理z-index的顺序(层级)更是困难。不同的层叠顺序和内容,要跟踪他们的数字增加是很难的事情——而且他们来自CSS文件,忘了他吧!因为z-index可以造就一个UI元素可见或不可见,使您的网站的用户界面工作秩序是很微妙的。

选择器使用Sass变量?

Sass中最大的特点之一就是可以设置变量,可以给变量赋值,此值可以是字符串,可以是值,也可是以列表,甚至是map。在样式中可以引用这些变量,甚至在Sass指令中也可以调用这些变量。大常看到最多的一个示例就是颜色的运用,通过给颜色设置一个变量,需要更换成别的颜色时,仅仅改一个值就行了。有人探讨将变量用到选择器中。那么选择器中使用变量真的好吗?如果你不清楚是好还是不好,不仿看看这篇文章。你或许会找到你需要的答案

使用Sass Maps

Sass的第三个版本给我们带来了新的数据类型,叫做map。虽然你可以不知道这个名称,但在其他的语言中我们使用过map,通常就是关联数组。换句话说,Sass的map就是用关键名匹配对应值的一个数组。不清楚为什么在CSS中为什么要使用(Sass也是CSS),因此这篇文章将告诉你为什么?这个列表虽然不能面面俱到可以随意查找和分享其他用例。

用Sass的占位符和混合宏创建可复用的样式

Sass的最大好处之一就是具有创建可重用代码块的能力。我经常用%placeholders或者@mixins创建可重用代码模块。占位符(%placeholders)和混合宏(@mixins之间有很大不同。简而言之:当你需要传递变量时使用混合宏(@mixins),若不需要,则使用占位符(%placeholder)。

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

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

将你的CSS项目转换成Sass

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

页面

返回顶部