SCSS(Sassy CSS)

问题

CSS是一种声明式风格的语言，适用于早期的Web网及其应用。但随着现代Web应用发展和日益复杂化与大型化，其缺乏程序设计特性的短板日益突出

  • 不支持变量
  • 不支持循环等控制结构
  • 不支持函数等封装机制
  • 不支持继承、混入(mixin)等组件机制
  • ...

改进思路

  • 一种途径是对css本身进行升级，譬如css3等新规范，但由于需要兼容各个浏览器平台和各个历史时期的浏览器，短时间难以脱胎换骨。
  • 另一种途径则是发明一种新的类css语言，然后通过预处理工具，将其转译(transpile)或转换(transform)为普通的css代码，从而既允许开发者使用变量、函数等高级语法特性，又能兼容现有的主流浏览器

预处理器

  • 预处理器是在编译阶段开始之前由编译器调用的独立程序。它将源代码视作输入数据，然后转换输出为另一类源代码
  • 预处理器的任务一般包括：词法处理、句法处理、执行宏等等。
  • CSS 预处理器是将非CSS语法源代码处理转换为CSS语法源代码的程序，从而允许在 CSS 中使用变量、控制结构、甚至函数等高级编程特性，但无需考虑浏览器的兼容性等问题(因为最终处理生成的仍是css2/3代码)

在Javascript中，也有类似的预处理器，譬如babel将ES6转译为浏览器可兼容的ES4

scss 预处理器示例

// nav.scss
$nav-color: #F90; $width: 100px;
nav {  
  width: $width;
  a { color: $nav-color; }
}

// 经scss预处理转换后的nav.css

nav { width: 100px; }
nav a {  color: $nav-color; }

SCSS

SCSS是最流行的CSS预处理工具，采用类CSS的语言风格，但增加了诸如变量、循环、函数和继承等编程语言特性。

  • scss 与 sass : 两者系同一作者出品，只是书写风格上有所差异，一般选择scss即可
  • SCSS既是指一种扩展的CSS语法，同时也是指该语法的实现，即预处理软件。该软件实现了对SCSS语法到CSS的转译

安装 scss 预处器 node-sass

早期SCSS预处理器工具采用 Ruby 语言实现，当前已使用C语言重写，且提供了多种语言调用包，这里选用node-sass，它是一个封装为npm包的预处理工具，基于Node.js环境运行，可对SCSS代码进行转译

# 如果安装时编译node-sass很慢，请执行
npm config set sass_binary_site =http://cdn.npm.taobao.org/dist/node-sass

npm install -g node-gyp   # 如果安装node-sass提示编译失败，执行此命令
npm install -g node-sass
node-sass -v  # 输出正确版本号，表示安装成功
node-sass nav.scss nav.css  # 将nav.scss转译为普通css

基于 scss 工作流

scss很强大，但是每次编辑后都需要手动转译成css，很麻烦，怎么办？

node-sass提供了一个监视文件内容改动，然后自动进行转译的参数，如下：

  # 注意：这是一个有输出的后台进程，所以它会持续占有命令行窗口
  node-sass --watch src/style.scss dist/style.css

进一步地，我们可监听整个文件目录下的所有文件，譬如：

  node-sass --watch -r ./src -o ./dist

这样，当我们在src目录下增删改任何scss文件时，dist目录中都会同步出现它的css版本

建议在WSL或Linux下安装，windows不支持watch特性

预处理器的优点

  • 提供CSS规范所缺少的各种编程特性或代码复用机制
  • 通过模块化机制，提高CSS码的可维护性
  • 可减少冗余代码，优化性能

预处理实现原理

  • 获取 DSL(领域专用语言，如SCSS) 源代码的分析树
  • 将含有动态生成相关节点的分析树转换为静态分析树
  • 将静态分析树转换为 CSS 的静态分析树
  • 将 CSS 的静态分析树转换为 CSS 代码

教程

常见的CSS预处理器

扩展阅读

results matching ""

    No results matching ""