现代 CSS

Sass

从 CSS 到 SCSS 的规模化过渡

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

抽像命名Sass变量

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

Sass 中的矢量图形

Sass 是一个非常强大的工具,我们很多人仍在研究它的极限。我们能用它做什么,我们又能将它发挥出多大的能量?在Hugo Giraudel抛出他的想法之后,我也非常兴奋地有一个想法——2D 图形引擎。这看上去令人困惑,因为 CSS 的缘故,Sass 早已是图形领域的一部分。其实这并非是为了内容而设计样式,我想利用 Sass 一个像素一个像素地渲染图像。

使用Sass定制个性化样式

做为前端人员,应该有碰到类似这样的项目,在同一套的结构与内容的基础上实现不同皮肤效果。那么今天这篇译文就是介绍如何使用Sass帮助你更好、更简单的编写个性化主题样式。我并不介意你是否立即阅读本文,如果你把它加入收藏夹,并且在大脑中留有印象会更好。

Sass入门

你是否一直想学Sass,但却始终没有行动?你是否是Sass的使用者,但却感觉自己只是多了一个工具?那么请继续读下去,让我们一起重温Sass的特性和另外一些很酷的东西吧。Sass (Syntactically Awesome Style Sheets)是一个CSS预处理器。Sass与CSS关系就像CoffeeScript与Javascript关系。它通过添加标记到样式表中,帮助我们更轻松惬意的书写CSS。

Sass Guidelines中文版本之七:循环、排错,工具和总结

本文是Sass Guidelines中文版本最后一篇,在这篇文章中主要涵盖了Sass中的循环处理、排错以及工具方面的使用。并且对整个指南做了一个最终总结。

Sass Guidelines中文版本之六:变量、扩展、混合宏

Sass Guidelines已经整理发布了五个部分,从其相关信息简介命名约定与注释项目文件管理到第五部分的响应式设计与断点管理,作者都做出相关总结与推荐性建议。这篇文章是其第六个部分,主要涵盖了Sass中的变量、扩展、混合宏和控制指令等相关的知识,希望大家会喜欢。

Sass Guidelines中文版本之五:响应式设计和断点管理

响应式设计已不是新的课题,那么Sass Guidelines中为什么也会着重花一节内容来介绍响应式与断点管理相关的内容呢?记得前段时间坛子里在讨论,媒体查询在Sass中应该是嵌套在选择器中使用,还是单独提取出来使用?如果嵌套使用,编译出来会有很多个媒体查询,那么如此一来会不会影响页面等等。那么这一节中,也主要介绍这方面的,而作者更趋向于在选择器的嵌套中来写媒体查询。

Sass Guidelines中文版本之四:项目文件管理

经常会有初学者问,使用Sass时要如何管理自己项目中的文件。也有不少同行朋友针对此问题做过总结与探讨,网上相关的案例也不少,比如说很好的参照案例有:Bootstrap和Foundation等。在Sass Guidelines中也特意针对 这一部分做了详细的描述。作者将文件结构按七合一模式向大家展开介绍,并且如何与组件结合在一起管理。

Sass Guidelines中文版本之三:命名约定和注释

通过Sass Guidelines中文版本之一:相关信息Sass Guidelines中文版本之二:简介的阅读,我想大家对Sass Guidelines或多或少有一点了解,如果你对此规范指南感兴趣的话,那么接下来可以阅读这篇文章,这是Sass Guidelines第三部分,主要介绍了如何在Sass编写中命名和写注释。里面提供的一些细节还是值得大家编码中注意一二的。

页面

返回顶部