基于NodeJS实现的一个css预处理器

最新推荐文章于 2022-11-17 20:04:25 发布
原创 最新推荐文章于 2022-11-17 20:04:25 发布 · 645 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #nodejs #json

本文探讨了使用JSON形式编写CSS的方法，通过JSON Script，基于NodeJS实现了一种简洁且功能强大的CSS预处理器。尽管初衷是为了乐趣，但作者发现了已有成果并对其进行了深入研究。JSON Script作为一种广泛应用于Web数据传递的数据形式，使得将其转换为CSS、HTML成为可能，进而引发了作者思考能否直接利用JSON或JavaScript生成网页。文中不仅分享了JSON Script的基本概念，还提到了其在Web组件化探索中的潜在价值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

json_script,基于nodeJS实现的css预处理器

just for fun?

一时兴起，想用json格式来编写css，然后就出现了json_script.json是一种十分简洁的数据格式，学过javascript的人都会用，现在已作为web中传递数据的一种主要的数据格式，所以也有很多时候需要将json格式的数据转换成css、html。既然如此，为什么不能直接将json转为web页面呢？web页面基本上是由css/html/javascript组成的，所以可以用json或是javascript来直接生成一张web页面那不是很方便？

just for fun?

虽然只是因为有趣，但我还是发现有人已经做出了这样的东西，而且还很不错。但依然不影响我去做这样一个东西的兴趣，这也是在web组件化上探索的一步。

查看全文：点击打开链接

2022年5月7号Css预处理器(Less的下载与安装和简单的使用){Less的第一课}
05-13 1019
目录 2022年5月7号Css预处理器(Less的下载与安装和简单的使用){Less的第一课} 第一部分node.js的安装。 第一步Less的安装之前先要安装Node.js文件:Less安装官网:http://nodejs.cn/download/。 第二步：进入网址会看到以下的页面。? 第三步：选择自己电脑适合的系统以及选择好64位/还是32位。 第四步：win+R键输入cmd===============>按下Enter 第五步:在运行窗口重输入:node -v? =============&g
nodejs 解析html根据标签提取需要合并的js、css，并且更新html
06-28
# merge_js_css nodejs 解析html根据标签提取需要合并的js、css，并且更新html # 简介 > 站点页面上js、css外链过多会导致网页的加载速度过慢，通过合并页面的js、css成一个文件，减少http的开销。 读取config.json,解析html根据 <!--if true--><!--endif-->标签合并区域内的js或者css，并且更新html区域内合并之后的script、link标签；可以打包成执行文件，需要开发环境的依赖。 > 运行前需要新建config.json的配置的目录：output_path、tmp_js_json_dir、tmp_css_json_dir。 { "extract_tag":["<!--if true-->","<!--else-->","<!--endif-->"], //提取区域的标签 "output_path": "D:\\projects\\github_project\\merge_js_css\\examples\\output", //输出合并后js、css的目录 "tmp_js_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\js", //js合并中间过程文件目录 "tmp_css_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\css", //css合并中间过程文件目录 "html_dir_path": "D:\\projects\\github_project\\merge_js_css\\examples\\html" \\待合并处理的html页面目录 } # 前置条件 安装uglify-js npm install uglify-js --save-dev 安装clean-css npm install clean-css --save-dev 安装pkg npm install -g pkg # 开发环境运行 node index.js config.json # 打成执行文件并运行 打包 pkg -t win index.js //-t 指定window平台 运行 index.exe config.json
node-css:节点的简单CSS生成器
05-18
节点css 节点的简单CSS生成器 var css = require ( "node-css" ) ; var result = css ( ".test" , { color : "red" , display : "block" } ) ; console . log ( result ) ; 输出 .test { color: red ; display: block ; }
CSS预处理器
闪星的博客
12-11 630
学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做”CSS预处理器”（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式
nodejs数据处理实践之数据预处理
diaofou9576的博客
03-22 272
任务描述： 有一个csv文件， 但是其中某些行的字段的值是一个json数组，数组的值又是json对象，内部有很多','。 这导致，在其它的数据分析工具中，无法进行处理。 现在我们希望，把这个json数组拆分开来，取出内部的值，然后对于字段值不是json的则补空位，形成一个比较规整的表格。遍历于后面分析。 最好的语言，是熟悉的语言。 所以我用了js，当然因为是处理文件，所以肯定是nod...
Node.js-Nodejs的简化HTMLCSS->PDF生成器
08-10
Nodejs的简化 HTML CSS - >PDF 生成器
BananaCSS：NodeJS环境下巴西风格的CSS预处理器使用解析
标题所涉及的知识点是关于bananacss，这是一个在NodeJS环境中编写的一个CSS预处理器，属于巴西CSS的超集。根据描述，bananacss提供了一个抽象层，用以简化复杂CSS特性（例如自定义属性和@import）的使用，并编译成...
October-Cms-Devworkflow:使用 Bower、Nodejs、Gulpjs 和 SASS 使用 nodejs、gulpjs、jade 和 css 预处理器开发 10 月 CMS 主题的工作流程
06-08
使用Bower、Nodejs、Gulpjs 和 SASS使用 nodejs、gulpjs、jade 和 css 预处理器开发 10 月 CMS 主题的工作流程 随意 fork 这个 repo。 如何使用？ 10 月 CMS 主题文件夹中的第一个终端。 从 ( ) 克隆此存储库并...
基于nodejs的预约上门维修服务系统
12-27
【标题】"基于Node.js的预约上门维修服务系统"是一个使用JavaScript后端框架Express和MySQL 5.7数据库构建的应用程序。它旨在提供一个在线平台，让用户能够方便地预约上门维修服务。 【Express框架】Express是Node....
基于Nodejs与多语言支持的婚纱影楼管理系统设计源码
最新发布
09-27
系统内嵌了丰富的SCSS样式表，SCSS是一种CSS预处理器，它扩展了CSS的功能，比如变量、混合、嵌套、函数等等，这些特性使得CSS的编写更加模块化和维护更为容易。这意味着该系统拥有高度可定制的用户界面，能够提供...
因为业务需要，用nodejs写了一个css解析器，因为是基础库，想开源，不知道有没有人需要。
诗剑书生的专栏
12-04 2723
一般而言htmlparser的解析使用得比较多，node库中已经有了，npm install -g htmlparser2就可以安装。这段时间要实现nodejs上的安全扫描，需要对html,css,js进行解析，css主要是限制一些绝对定位，浮层和url，防止产生钓鱼或攻击。所以写了一个css的解析器。感觉 这些基础库应该公开出去，但是不知道有多少人有这个需求。
服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)
natalie86的专栏
03-10 1096
注*　这是一个两年多的“老”项目，可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:  Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速，灵活，在服务器端使用的jQuery。 简介
Nodejs Express 视图引擎jade 替换为html
zhouzhiwengang的专栏
03-29 1054
express 项目生成默认的视图引擎为jade,当时在开发中，我偏爱html 页面，所以本文今天介绍如何将express 默认视图引擎jade 替换为html. 第一步：打开项目的app.js 文件，app.js 部分内容如下： var createError = require('http-errors'); var express = require('express'); var p...
构建基于 NodeJS 的 LESS.js 预编译 CSS 服务
weixin_33997389的博客
12-26 164
我们在项目中使用 Less.js 的预编译 css 技术。Less 最终编译的代码是 css，也就是 *.less 输出 *.css 的工作，围绕这项过程的方式方法多种多样，有的是导入 less.js 到页面编译 less（客户端执行），有的是透过构建工具如 Grunt、Glup 生成。客户端执行比较耗时而且也有浏览器兼容的问题，故不推荐；构建工具比较流...
nodejs fs 读取css,nodejs第二天（fs文件系统模块，异步同步区别，同步异步读取，同步异步写入，封装读取文件，同步异步追加文件，nodejs服务器请求事件，favicon.ico文件是...
weixin_42568801的博客
08-03 375
fs模块是nodejs的核心模块，它提供了文件的读取、写入、更名、删除、遍历目录、链接等POSIX文件系统操作。fs与其他模块不同的是 fs模块都提供了异步和同步的两个版本，例如 readFile 和 readFilesync 的读取文件就是有两个版本异步和同步的区别同步：执行一个方法，只有方法给出结果后，才算结束异步：执行一个方法，只是交代要做的事情，然后去做其他事情，而交代给回调来处理异步读...
node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
weixin_35915828的博客
07-01 823
我想通过Node.js使用express()函数在localhost：3000中将CSS添加到我的HTML中。 不幸的是，有些奇怪。我一步一步按照教程中的步骤，但仍然无法加载我的CSS。我的style.css在css文件夹(css/style.css)。这里是我的代码：app.js(请注意，我用的应用程序和应用1)CSS无法使用Node.js加载到我的HTML代码中var app = requir...
#ifdef #endif
haliofwu的专栏
12-08 684
最近在用C语写一些程序，发现#ifdef,#else,#endif和#ifndef,#else,#endif在UCOS-II中有大量的应用，于是到网上查了一些相关的解释.#ifdef的用法灵活使用#ifdef指示符，我们可以区隔一些与特定头文件、程序库和其他文件版本有关的代码。 代码举例：新建define.cpp文件 ＃include "iostream.h" int main()
node.js解决加载静态资源时无法响应css和js方法（本人理解）
m0_71147676的博客
11-17 812
css无法响应到，响应类型由后缀决定的。例如如果设置setheader设置的类型是.html那么就只会读取.html的文件无法读取css的文件，css加载不出来。如果不写setheader那么就会出现中文乱码。 用writeheader发送请求头，让后缀动态加载就可以了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值