Sass

提高Sass水平的小技巧

在写CSS的时候有一些小技巧,这些小技巧可以帮助你写出更好的CSS,也能让你的代码更简单、更整洁和更好的维护。那么在Sass编写的时候有没有这样的小技巧呢?回答是肯定的。在Sass编写过程同样有很多小技巧,这些小技巧同样能帮助你更好的编写Sass代码,同样能让你的代码变得更整洁,更好维护。今天这篇译文就介绍了编写Sass的一些小技巧,在你编写Sass过程中可以使用这些技巧,让你的Sass水平更往上提高一层。

Sass有什么优势

或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数?对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的。无论如何,我都要给大家分享一下,为什么我认为Sass是一个很好的东西。对于那些不熟悉web前端开发的人,Sass和CSS或许只是一些让人感觉凌乱的词语,但就是这些词语,对于幕后的开发过程是很重要的,而这些过程,形成了一个美丽的、响应式的网站。

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)。

页面

返回顶部