Sass

Sass操作符

众所周知,Sass中有一些类似于其他编程语言的特性与功能,那么在本文中,我们将会解析一下Sass中的操作符。主要向大家介绍如何使用Sass中的操作符。

使用Sass制作菱形网格布局

自从我从事 WEB 开发以来,一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时,我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好,实际上这些布局就像是沃尔沃汽车一样,让人感到安稳和可靠。但是,拥抱变化何尝不是一件趣事?非常幸运的是,我能与众多才华横溢的设计师共同工作。在最近的一个项目中,他们提出了一种基于栅格布局的菱形布局。话不多说,迎战问题(•̀o•́)ง!

使用Sass自动化处理CSS动画

有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教,如果有可能,在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel动画,所以说使用一些数学计算是有可能得到相应改善。

辨析Sass中的Map和List

如果你使用过 Sass 3.3 之前的版本,那么你一定对那段时光颇有感触,那时候没有现如今这么好的条件,那时候的 Map 还只能用多重列表(lists of list)来模拟。多重列表可以实现复杂数据的嵌套定义,但却不是以键值对的形式实现的,所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式,非常便于组织数据。

使用Sassaby对Sass进行单元测试

在Wealthfront我们使用Sass编写所有CSS样式。Sass是一个强大的CSS预处理器,它使得用户可以利用编程语言中的常见特性,但是脱离了原生CSS。使用Sass变量,条件语句,循环和函数,可以让你在大型前端代码库中编写可扩展易维护的CSS。在Wealthfront我们对待测试这件事非常认真。作为使用所有Sass特性的先驱,尤其是可复用函数,我们需要一个方式来保证Sass代码的独立测试。因此我们开发并开源了Sassaby,一个为Sass编写的单元测试库。在这篇文章中我将详细描述一些引领我们至此的思考过程并且列举一些Wealthfront代码库中的例子来展示Sassaby的部分特性。

使用Sass制作居中效果

虽然使用 CSS 创建居中效果需要耍一些花招,特别是垂直居中效果,但我认为由此生出的诋毁,对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了,而且作为一名前端开发者,你真的有必要对其中的原理了解一二。写这篇文章的目的不是为了向各位解释这些方法的工作原理,而是介绍将这些方法编写为 Sass mixin 的方式,继而将它们复用到各类项目中。如果你还不熟悉使用 CSS 创建居中效果的方法,我建议你仔细阅读以下这篇文章:Centering In CSS: A Complete Guide

使用Sass Map实现响应式排版

本来要管理Rhythm排版一致不是一件易事,响应式中的Rhythm排版就更加困难。幸运的是,Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm,并不局限于我的建议。然而,这是我很多次工作中总结出来的经验之谈。

开始使用Sass(Part2)

在本系列文章的第一部分,我简单介绍了Sass,一种CSS的预处理器。我展示了如何在Codekit中创建一个工程来编写Sass文件,并且介绍了一些Sass的语言格式,关于partials,变量,注释和错误。在第二部分,我们将要深入的研究一下变量和进行变量运算以实现垂直节奏。我也将谈谈使CSS更加容易阅读和维护的Sass的嵌套规则。

Sass中五个有用的代码片段

使用Sass,其中最喜欢的就是Sass的mixin和function功能。他们能自动化的重复使用一段CSS代码或功能以及更好的维护CSS。这些功能让人实在是折服。但我常常发现许多开发人员为一个简单的任务创建一个复杂的系统,比如管理一个字体堆栈或颜色方案。这些设置和使用都让人感到非常的繁琐。在这篇文章中,我将解释这些自动化实现的功能。

如何通过Sass将工具转换成可用的混合宏

为了提高码农的开发效率,现在在线上有很多在线小工具,这些小工具可以帮助大家快速实现自己需要的效果,并且可以生成可用代码。前几天看到一个制作三角的小工具,尝试着使用Sass来将其转换成可用的混合宏。尝试成功,来说说怎么实现的。其实只要你有时间,很多小工具都可以用类似的方法来实现。

页面

返回顶部