Preprocessor

LibSass + Susy + Grunt 整合实践

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

Susy 2 入门教程

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

使用Susy构建Web布局更简单

Susy 是一款用来为网站创建栅格布局的工具,它所带来的灵活和洒脱超乎想象。无论是 5 列,14 列,还是 48 列,一切都不是问题。不等宽列?So easy。我们为什么要在浩如烟海的互联网框架库中选择 Susy?它的魅力是否就是肤浅的表面呢?在过去几个月,使用 Susy 可以说是我前端开发流程中最美好的事情。它让我们摆脱了诸多的麻烦,而且我决定要写本书分享使用经验,告诉全世界它的美丽。本文将会深入的介绍使用 Susy 创建布局的方式——任何天马行空的布局都不在话下。

Sass 愿景

在最近的一个 CSS 见面会上,我向与会者提问,“有人会在日常的工作流中使用 Sass 吗?”回答结果压倒性的表示肯定——保守谨慎地使用 Sass 已经成为过去式。Sass 正迅速成长为编写 CSS 的标准方式。这真是难得的好消息!Sass 包含了诸多 CSS 规范未定义的特性,比如变量、控制指令、混合宏等。这些特性赋予了开发者强有力的工具,以应对复杂和持续更迭的样式表。Sass 的灵活性和健壮性,也足以实现开发者天马行空的创意思维。

流行框架的 Sass 体系结构解析

为了应对项目开发中不断增长的复杂度和整体规模,开发者有必要使用恰当的逻辑,规划 Sass 文件的结构层次。遵循公认的编程规范,有助于开发者快速融入大型项目或团队的开发流程。下面就详细解析流行框架的结构层次。

使用 Sass 实现反相滤镜效果

在理清制作固定背景的反相效果后,我脑海中自然而然地想到了,使用 Sass 让不支持滤镜的浏览器实现这种效果。Sass 本身存在一个 invert 函数,但是只能模拟出 filter: invert(100%) 的效果。我们的目标是适用于任意比例。

使用Sass编写CSS Blend Modes

CSS Blend Modes是CSS的一个新功能,可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。在这篇文章中,我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin,并且怎么使用。

Sass 3.4 最新特性

仅仅在 Sass 3.3 发布几个月后,官方就放出了 3.4 版本 —— “Selective Steve”。虽然名字有点怪异,但却很准确,因为新版本的诸多特性就是关于选择器的。

从 CSS 到 SCSS 的规模化过渡

有些天真的看法认为, CSS 看起来很容易理解——它没有繁多的编程结构,并且还只是一种用来描述 DOM 外观的声明式语法,而不是一种可执行语言。非常具有讽刺意味的是,功能性的缺失恰让 CSS 难以推断其效果。此外,在选择器所处位置及其处于执行状态时,开发者是不能添加脚本的,从长远来看这也增加了使用 CSS 的风险。

抽像命名Sass变量

Phil Karlton 认为,在计算机科学中,最大的难题之一就是:命名。这一问题在给变量命名时显得尤为突出。目前,通过使用变量处理颜色、断点和字体大小,是一个很棒的实践。更进一步,你也可以通过使用 SASS Maps 和混合宏生成动态类名。这种方式在不影响用户视觉体验的基础上,还能让你的工作更有效率。

页面

返回顶部