SCSS 3.5.5 简明上手指南

Sass 是成熟、稳定、强大的CSS 预处理器,截止到目前为止已经发展有 10 年,前当最新 release 版本为3.5.5。而SCSSSass3版本当中引入的新语法特性,完全兼容 CSS3 的同时继承了Sass强大的动态功能。本文翻译自《Sass Guide》《Sass Syntactically Awesome StyleSheets》两篇官方文档,讲解了现代化前端开发当中经常使用的 SCSS 语法特性,便于开发小组的同学快速上手。

基于 Gulp 完成前端自动化的年代,出于快速上手以及 npm 安装方便的考虑,开发团队一直沿用Lessgulp-less作为 CSS 预处理工具,但是 Sass 提供了更加丰富的动态语法特征,因此逐步淘汰基于 Gulp 的beaver前端项目脚手架以后,新项目全部基于 Webpack 的node-sasssass-loader作为预处理工具。Sass 和 Less 的详细比较可以参考sass-vs-lessSass 与 Less 比拼两篇文章,里面对两者的优劣做了非常详实的比较。

阅读更多

CSS 3 典型概念与布局详解

层叠样式表CSS,Cascading Stylesheet)用于指定 Web 浏览器的渲染样式,CSS 2.1 规范于 2011 年发布之后日益变得丰富与庞大,因此 W3C 工作组将规范分散至不同模块,每个模块都独立的进行版本更新。其中,全部 CSS 2.1 特性模块都被升级至 3 作为版本号,而全新的功能模块则从版本号 1 开始进行定义。因而 CSS 3 并非实际意义上的 W3C 规范,准确的描述应该为 CSS 标准规范第 3 版与部分新规范第 1 版的集合

伴随 Web 浏览器技术的日新月异,现代 CSS 开发的重点,已经不在于处理浏览器碎片化引发的各类兼容性问题,而是在确保代码可维护性前提下,符合 Web 页面的语义标准,从而尽可能准确的表达各类交互创意。在阅读 W3C 工作组成员 Lea Verou 的《CSS Mastery》之后,开始重新审视前端重度交互下 CSS 提供的各类全新特性,结合 Mozilla 社区的 《CSS Reference》 一文,重新讨论 CSS 技术相关的一些主题。

阅读更多