Preprocessor

开始使用Sass(Part2)

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

Sass中五个有用的代码片段

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

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

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

使用 Sass 美化表单控件

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素,所以有必要使用 Sass 来快速美化项目中的表单控件。

Sass 混合宏灵活传参的秘技——Null

在 Sass 混合宏中,我们可以向其传递参数列表,便于快速地配置相关属性。如果定义的混合宏定义了参数,在实际调用就需要为每个参灵敏传递一个合理的值,否则就会出现错误提示。这往往强迫开发者为非必须的变量传值,甚至重置非必要的初始值。那么,怎么样才能避免必须为每一个变量传值 呢?这就是这篇文章要介绍的相关知识。

Sass 的自意识混合宏

几天前的一个晚上,我在 Up Front Berlin 上就过去几年 Sass 的某些特性谈了谈自己的使用方法。点击这里可以查看当时的幻灯片。但就我个人而言,更乐意发表几篇笔记,深入地探讨相关的问题——本文就取材自这些笔记中的一些片段。我所探讨的焦点在 map 这种数据类型上,特别是使用 @content@at-rootunique-id() 等指令合并 maps 所实现的奇妙方法。其中之一就是混合宏的设计模式,这一设计模式通过使用 @extend 指令和占位符选择器来解决 Sass 的一些实际问题。

理解Sass中变量作用域

在这篇文章中我们将一起深入探讨Sass的变量和变量作用域。变量作用域的描述是根据上下来定义和在哪使用变量。首先,我们将介绍Sass作用域范围。然后,将解释两个用在变量值中标签,这两个标签非常有用。最后将简单介绍可用的函数,用来检查是否存在一个变量。

Susy 2.2 中文文档

Susy 是一款进行栅格布局的辅助工具,它让开发者摆脱了冗杂的数学计算,同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大。感兴趣的,可以阅读此文档,做进一步的了解与学习。

使用Foundation 5和Sass制作语义化模板

在我之前的一篇文章里,我比较了一下Foundation 5Bootstrap 3的栅格系统。然而这一次,我将继续深入到Foundation的基础栅格结构。这就是说,我将给你展示如何利用它预建立的Sass mixins来做出更多语义化栅格。为了说明它,我将重建上述文章中的demo页面。首先,请先让我介绍一下在这篇文章将要使用到的项目。

开始使用Sass(Part1)

Sass是一种CSS预处理语言,当你使用Sass这门语言时,你使用编译程序来转换Sass文件,通常以SCSS文件格式书写然后转换成CSS文件。Sass通过添加方便的函数,变量以及其他类似脚本的助手使CSS能更加快速得书写和更加简单的控制。

起初我躲避Sass是因为它好像是针对程序员的(它的文档到处充斥着程序的专业术语),但是在我学习Sass一段时间后,我发现它不是那么的复杂。它方便的运算和函数会令程序员非常满意,以及它也加入了一些很酷的东西使我们能更快的书写CSS,这使我们的工作变得更高效。

页面

返回顶部