现代 CSS

Sass

使用 Sass 美化表单控件

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

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

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

Sass 的自意识混合宏

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

理解Sass中变量作用域

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

开始使用Sass(Part1)

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

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

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”。虽然名字有点怪异,但却很准确,因为新版本的诸多特性就是关于选择器的。

页面

返回顶部