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,这使我们的工作变得更高效。

[转载]再谈 CSS 预处理器

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。网上已经有不少对比目前最主流的三个预处理器 Less、Sass 和 Stylus(按字母顺序排名)的文章了,但是似乎都不是很详细,或者内容有些过时。下面我会更详细地探讨一下这三种预处理器的特性和它们的差异。

LibSass + Susy + Grunt 整合实践

我所熟悉的每一个开发者,都急切地盼望着在开发中使用上 LibSass。当 Eric 宣布 Susy 已经可以完美融入 LibSass 的时候,我激动的跳了起来,并开始思考使用 Grunt 来创建一个构建流程。本文中我将会向你演示,我是如何配置 Grunt 来整合 LibSass 和 Susy 的。

Susy 2 入门教程

Susy 是一款优秀的辅助工具,可以让开发者更得心应手地实现各式栅格布局。官方发布 Susy 2 已经有些时间了,如果你很喜欢 Susy 1,那么相信你也一定会爱上 Susy 2——新版本的配置和使用更加灵活而富有弹性。在本文中,我将会和大家分享一些创建复杂 AG 栅格布局的经验。

页面

返回顶部