Sass学习指南

全篇共 1226 字。按500字/分钟阅读速度,阅读完预计需要 2.5 分钟。

Sass 最初就是用 Ruby 语言编写出来的,随着 Node.js 的出现 Ruby 的没落,以及 Ruby 不再能满足 Sass 对更高性能的需求,所以自2019年3月26日后,使用 Ruby 实现的 Sass 的用户应迁移到其他语言的实现。Sass是CSS预处理语言,支持变量、嵌套、模块化、混合、扩展继承和算术操作。在原生CSS还没有完全支持这些功能之前,Sass是帮助前端工程师提升编程和协作效率的好工具。

SASS 全称 Syntactically Awesome Style Sheets。

安装Sass

Dart 是一门编程语言。LibSass 是用 C/C++ 语言实现的 Sass 编译器,可在目前大多编程语言(如 Node、Java、Python、.NET 等)中使用,Sass: LibSass 罗列了全部可以使用 LibSass 的编程语言。

因为我的能力有限,对 Dart 和 其他优秀的编程语言没有足够的认识,所以只记录用 JavaScript 语言使用 Sass 功能的学习过程。Sass 为使用 JavaScript 语言的前端工程师提供了两种将 .sass 和 .scss 编程 成 .css 的方式,第一种是提前编译,另一种是即时编译。提前编译相对于即时编译。即时编译就是在浏览器渲染页面之前由客户端将 .scss 或 .sass 文件编程成浏览器能解析的 .css 文件,需要花费额外的流量从服务端下载解析插件以及用 WebWorker 技术在新线程编译。提前编译这种方式更常用。

前端工程师使用提前编译的方式。安装和配置 node.js 环境。使用 NPM 在全局环境或项目中安装 sass。注意这里从 NPM 安装的 sass 包是用纯 JavaScript 语言实现的一版,所以执行速度要比基于 LibSass 的 node-sass 包慢,但功能一摸一样。由于国内特殊的网络环境和其他原因,在用 NPM 安装 node-sass 的过程中会报出各式各样的错误。所以根据对执行速度的需求高低自行选择 sass 包还是 node-sass 包。

node -v
npm i -g sass
sass --version

Sass入门

这篇 Sass: Sass Basics 涵盖了入门 Sass 语言特性的全部内容。单独的CSS可能很有趣,但是样式表越来越大,越来越复杂并且难以维护。这是预处理器可以提供帮助的地方。Sass使您可以使用CSS中尚不存在的功能,例如变量,嵌套,混合,继承和其他使CSS编写变得有趣的好东西。

原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2017年10月12日 周四
更新日期 » 2020年2月3日 周一
上一篇 » axios学习记录
下一篇 » 正则表达式学习指南
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录