建网站那种服务器好,商城网站开发方案,建筑模板厂家联系方式,现在市面网站做推广好预处理语言的由来#xff1a;CSS 是一门非程序式语言#xff0c;没有变量、函数、SCOPE#xff08;作用域#xff09;#xff0c;需要书写大量看似没有逻辑的代码#xff0c;不方便维护及扩 展#xff0c;不利于复用#xff0c;为了让 CSS 富有逻辑性#xff0c;短板不…
预处理语言的由来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 文件
除了使用命令行进行转化以外如果代码不是很多我们还可以选择使用在线工具比如脚本之家在线工具等。
