Sass Guidelines中文版本之五:响应式设计和断点管理
响应式设计已不是新的课题,那么Sass Guidelines中为什么也会着重花一节内容来介绍响应式与断点管理相关的内容呢?记得前段时间坛子里在讨论,媒体查询在Sass中应该是嵌套在选择器中使用,还是单独提取出来使用?如果嵌套使用,编译出来会有很多个媒体查询,那么如此一来会不会影响页面等等。那么这一节中,也主要介绍这方面的,而作者更趋向于在选择器的嵌套中来写媒体查询。
响应式设计已不是新的课题,那么Sass Guidelines中为什么也会着重花一节内容来介绍响应式与断点管理相关的内容呢?记得前段时间坛子里在讨论,媒体查询在Sass中应该是嵌套在选择器中使用,还是单独提取出来使用?如果嵌套使用,编译出来会有很多个媒体查询,那么如此一来会不会影响页面等等。那么这一节中,也主要介绍这方面的,而作者更趋向于在选择器的嵌套中来写媒体查询。
Sass Guidelines已经整理发布了五个部分,从其相关信息、简介、命名约定与注释、项目文件管理到第五部分的响应式设计与断点管理,作者都做出相关总结与推荐性建议。这篇文章是其第六个部分,主要涵盖了Sass中的变量、扩展、混合宏和控制指令等相关的知识,希望大家会喜欢。
本文是Sass Guidelines中文版本最后一篇,在这篇文章中主要涵盖了Sass中的循环处理、排错以及工具方面的使用。并且对整个指南做了一个最终总结。
你是否一直想学Sass,但却始终没有行动?你是否是Sass的使用者,但却感觉自己只是多了一个工具?那么请继续读下去,让我们一起重温Sass的特性和另外一些很酷的东西吧。Sass (Syntactically Awesome Style Sheets)是一个CSS预处理器。Sass与CSS关系就像CoffeeScript与Javascript关系。它通过添加标记到样式表中,帮助我们更轻松惬意的书写CSS。
做为前端人员,应该有碰到类似这样的项目,在同一套的结构与内容的基础上实现不同皮肤效果。那么今天这篇译文就是介绍如何使用Sass帮助你更好、更简单的编写个性化主题样式。我并不介意你是否立即阅读本文,如果你把它加入收藏夹,并且在大脑中留有印象会更好。
Sass 是一个非常强大的工具,我们很多人仍在研究它的极限。我们能用它做什么,我们又能将它发挥出多大的能量?在Hugo Giraudel抛出他的想法之后,我也非常兴奋地有一个想法——2D 图形引擎。这看上去令人困惑,因为 CSS 的缘故,Sass 早已是图形领域的一部分。其实这并非是为了内容而设计样式,我想利用 Sass 一个像素一个像素地渲染图像。
Phil Karlton 认为,在计算机科学中,最大的难题之一就是:命名。这一问题在给变量命名时显得尤为突出。目前,通过使用变量处理颜色、断点和字体大小,是一个很棒的实践。更进一步,你也可以通过使用 SASS Maps 和混合宏生成动态类名。这种方式在不影响用户视觉体验的基础上,还能让你的工作更有效率。
有些天真的看法认为, CSS 看起来很容易理解——它没有繁多的编程结构,并且还只是一种用来描述 DOM 外观的声明式语法,而不是一种可执行语言。非常具有讽刺意味的是,功能性的缺失恰让 CSS 难以推断其效果。此外,在选择器所处位置及其处于执行状态时,开发者是不能添加脚本的,从长远来看这也增加了使用 CSS 的风险。
仅仅在 Sass 3.3 发布几个月后,官方就放出了 3.4 版本 —— “Selective Steve”。虽然名字有点怪异,但却很准确,因为新版本的诸多特性就是关于选择器的。
CSS Blend Modes是CSS的一个新功能,可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。在这篇文章中,我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin,并且怎么使用。