CSS 与其预处理语言 Sass、Less、Stylus 之间的转化

预处理语言的由来:CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩 展,不利于复用,为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言,逻辑性得以大大增强。

  • Sass 诞生于 2007 年,采用 Ruby 编写,它最初由 Hampton Catlin 设计,并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chris Eppstein 初始版本用 SassScript 扩展 Sass。Sass中文文档
  • Less 诞生于 2009 年,受 Sass 的影响创建的一个开源项目。 它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less中文文档
  • Stylus 诞生于 2010 年,来自 Node.js 社区,主要用来给 Node 项目进行 CSS 预处理支持,语法功能也和 Sass 不相伯仲,是一门十分独特的创新型语言。Stylus中文文档

Sass 转化为 CSS

  1. 官网下载并安装 Ruby,安装完成可以使用 ruby -v 命令查看版本号;
  2. 使用 gem install sass 命令安装 Sass;
  3. 进入需要转换的 Sass 文件的目标位置,使用 sass --watch xxx.sass:xxx.css 命令完成 Sass 到 CSS 的转化(xxx.sass 为待转化的 Sass 文件,.scss,.sass 都行,.sass 文件对代码的排版有着非常严格的要求,没有大括号和分号,.scss 对代码的要求没那么高,xxx.css 为转化后的 CSS 文件)

Less 转化为 CSS

  1. 确认你的电脑已经安装了node,可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号;
  2. 使用 npm install -g less 命令安装 Less;
  3. 进入需要转换的 Less 文件的目标位置,使用 lessc xxx.less xxx.css 命令完成 Less 到 CSS 的转化(xxx.less 为待转化的 Less 文件,xxx.css 为转化后的 CSS 文件)

Stylus 转化为 CSS

  1. 确认你的电脑已经安装了node,可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号;
  2. 使用 npm install -g stylus 命令安装 Stylus;
  3. 进入需要转换的 Stylus 文件的目录下,使用 stylus --compress src/ 命令完成 Stylus 到 CSS 的转化(src/ 为待转化的 Stylus 文件所在的目录)

CSS 转化为 Stylus

  1. 确认你的电脑已经安装了node,可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号;
  2. 使用 npm install -g stylus 命令安装 Stylus;
  3. 进入需要转换的 CSS 文件的目标位置,使用 stylus --css xxx.css xxx.styl 命令完成 CSS 到 Stylus 的转化(xxx.css 为待转化的 CSS 文件,xxx.styl 为转化后的 Stylus 文件)

除了使用命令行进行转化以外,如果代码不是很多,我们还可以选择使用在线工具,比如脚本之家在线工具等。

Invitation
HuRan
854262623
created:04/03/2022
Welcome to Candyhome

Use this card to join the candyhome and participate in a pleasant discussion together .

Welcome to Knlde's candyhome,wish you a nice day .

© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 抢沙发

请登录后发表评论