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 -vnpm -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 -vnpm -v 命令查看 node 和 npm 版本号;
2、使用 npm install -g stylus 命令安装 Stylus;
3、进入需要转换的 Stylus 文件的目录下,使用 stylus --compress src/ 命令完成 Stylus 到 CSS 的转化(src/ 为待转化的 Stylus 文件所在的目录)

● CSS 转化为 Stylus

1、确认你的电脑已经安装了node,可分别使用 node -vnpm -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 文件)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/437999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7款免费原型设计工具

身为一位产品经理或设计师,原型设计工具是必不可少的工作伙伴。但我们难免会遇到预算有限的时候,这时候,去哪里寻找一款好用的免费原型设计工具呢?以下,小编为大家精心挑选了7款免费的原型工具,并对其进行了…

PWN-PRACTICE-CTFSHOW-7

PWN-PRACTICE-CTFSHOW-7大吉大利杯-easyrop大牛杯-guess吃鸡杯-win_pwn吃鸡杯-easy_canary大吉大利杯-easyrop 栈溢出,SROP # -*- coding:utf-8 -*- from pwn import * context.log_level"debug" context.arch"amd64" #32位和64位的sigframe结…

【译】谨慎使用CSS中的波浪选择器

最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器,并造成了很多地方的CSS代码臃肿( CSS Bloat )。大家可能以前也都遇到或者使用过波浪选择器,毕竟它作为CSS选择器已经很长时间了, 甚至IE7都支持 。波浪选择器用来…

HTML + CSS 实现 GitHub 项目标签、徽章样式

经常会在GitHub上项目介绍的README.md文件中看到许多漂亮的标签,这些标签可以显示version、stars、license等信息 我们可以通过 https://shields.io/ 这个网站在线制作图标,填写label、message、color三个字段,点击Make Badge就可以生成图标…

PWN-PRACTICE-CTFSHOW-8

PWN-PRACTICE-CTFSHOW-8吃瓜杯-wuqian月饼杯II-简单的胖月饼杯II-容易的胖击剑杯-pwn01-My_sword_is_ready吃瓜杯-wuqian 栈溢出,ret2text # -*- coding:utf-8 -*- from pwn import * context.log_level"debug" #ioprocess("./pwn1") ioremot…

nuget 包版本冲突解决 packages.config

开发项目中安装了Newtonsoft.Json组件,遇到了必须给Newtonsoft.Json降版本的问题。 原因是:项目是MVC项目,WebApi模块必须使用framework4.5.0.0的版本。而我们在安装其他组件时,不小心升级了Newtonsoft.Json,导致了系统可以编译通…

instant.page —— 一个 JS 脚本实现网站预加载,提升页面加载速度

instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载…

陀螺仪、罗经、IMU、MEMS四者的区别

罗经:罗经是航行器用来测量运动方位的,辅助定位的仪器。 磁罗经:磁罗经可以形象的看成指南针电罗经:电罗经就要用到用电源驱动的陀螺仪。 陀螺仪:是一种物体角运动测量装置。通过对陀螺仪双轴基点在不同运动状态下偏移…

PWN-COMPETITION-HGAME2022-Week1

PWN-COMPETITION-HGAME2022-Week1enter_the_pwn_landenter_the_evil_pwn_landoldfashion_orwser_per_fatest_your_nctest_your_gdbenter_the_pwn_land 栈溢出,需要注意的是下标 i 的地址比输入s的地址更高 s溢出会覆盖 i ,于是需要小心地覆写 i 的值&am…

Hexo 博客添加 README.md 以及部署到 GitHub 丢失/显示不正常解决方法

GitHub 项目的README.md为自述文件,可对该项目进行介绍,解释等。 使用 Github Pages 和 Hexo 搭建的博客,如果在最开始建立仓库的时候没有创建README.md文件,那么在后期如何添加呢? 添加方法:在根目录 so…

REVERSE-COMPETITION-HGAME2022-Week1

REVERSE-COMPETITION-HGAME2022-Week1easyasmcreakmeFlag Checker猫头鹰是不是猫easyasm 程序一开始将si设置为0,然后si和28比较,如果si小于28则进入循环 循环体中,si作为下标,从输入中取值存入al,然后al左移4位&…

Failed to instantiate file__from module__The specified list does

Hello, I have a problem creating a site collection from my onet.xml. I guess the list “Pages” is not created correctly. What do I need to get it created? The error message; Failed to instantiate file "Default.aspx" from module "ProjectP…

谷歌浏览器检查更新时出错:无法启动更新检查(错误代码为 3: 0x80080005 -- system level)

谷歌浏览器检查更新报错:检查更新时出错:无法启动更新检查(错误代码为 3: 0x80080005 – system level),如下图所示: 网上的解决方法都是因为谷歌被墙,所以要重新下载,事实上并不是…

Hexo 博客本地预览报错:Error: listen EADDRINUSE 0.0.0.0:4000

Hexo博客在执行hexo s进行本地预览的时候,默认端口号是4000,当该端口号被占用时会报错 Error: listen EADDRINUSE 0.0.0.0:4000 ,此时可以关闭占用该端口的进程,也可以更换端口号,更换端口号可以通过以下两种方法实现&…

SharePoint入门识记-整体架构

SharePoint站点层次结构: 1.Web Application: 一般创建后对应一个IIS Web Site, 默认创建后是打不开的,因为网站没有任何内容。 2.Site Collection: 一个Web Application 下通常可以包含多个SiteCollection,创建一个SiteCollection后默认会…

如何带团队

什么样的老板才能让团队迅速壮大,有战斗力?我研究从这三个方面着手,供大家参考。 第一:分钱 当老板,别整太虚的,要清楚大家都是来挣钱的,办企业是赚钱,打工也是为了赚钱。首先谈分…

Python 中 if __name__ == '__main__': 的理解

1、这段代码的功能 一个 Python 的文件有两种使用的方法,第一是直接作为脚本执行,第二是 import 到其他的 Python 脚本中被调用(模块重用)执行。因此 if __name__ __main__: 的作用就是控制这两种情况执行代码的过程&#xff0c…

PWN-COMPETITION-HGAME2022-Week2

PWN-COMPETITION-HGAME2022-Week2blindecho_severoldfashion_noteblind 访问/proc/self/mem即可修改当前进程的内存,.text段也是可修改的 程序开始的时候直接输出了write的地址,泄露libc,然后在__libc_start_main上喷射shellcode # -*- cod…

Sharepoint学习笔记—Site Definition系列-- 1、创建Site Columns

https://www.cnblogs.com/wsdj-ITtech/archive/2012/08/12/2470219.html Site Columns是Sharepoint网站的一个重要底层结构,它是一类可重用的列定义或模板,可以将其分配给一个或多个 SharePoint 网站的一个或多个列表。 一个Site Column是由几个属性定义…

利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 文章目录● 前言● 注册 Cloudflare● 添加站点● 修改DNS● 开启 HTTPS● 重定向强制 HTTPSHTTP(超文本…