node编译

第一步:https://nodejs.org/en/  到node官网下载最新的node

第二步:和普通软件一样把node安装好

第三步:运行-cmd,准备安装less

全局安装(整个电脑文档都可以运行)

 npm install less -g

部分按照(仅安装目录下文档可执行)

npm i less

第三步:写好less

第四步:编译less

//编译文件所在盘符
e: //编译文件路径
cd E:\testStudy\Content //显示磁盘整个内容
dir //现在你可以看到你所有磁盘里需要编译的文件了
//准备编译
lessc study.less > study.css //ok,编译完成,在编译less所在文件夹下多了一个编译好的study.css

Visual Studio 扩展编译

因为长期与.net配合,我一直使用的mvc开发,所以一直使用的Visual Studio

相对于开发工具,个人比较喜欢

在编译方面也比较快捷,只需要添加一个扩展,即可轻松实现sass和less的编译

方法:

工具-扩展和更新

在搜索框中输入WEB Essentials,安装该扩展

现在你可以建立你的less或者sass文件了

右键点击需要编译的less或sass文件,按下图指示操作

ok,编译成功

后面会弹出一个弹窗,问你是否需要即时编译等等,勾选可以,这样每次你保存以后,就会即时编译出你需要的css啦

为了方便学习,你可以像我这样布置好窗口,每次Ctrl+s,就立刻看到了编译结果:

编译方法还有很多,具体的还有很多插件等等,你可以上网搜索更多的方法

作者:leona

原文链接:http://www.cnblogs.com/leona-d/p/6289356.html

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

Less-css预处理Node and VS扩展编译的更多相关文章

  1. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  2. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  3. 将node-expat扩展编译至node.exe中

    1.下载node源代码 https://github.com/joyent/node (v:0.10.25) 2.下载node-expat源代码 https://github.com/node-xmp ...

  4. Less:Less(CSS预处理语言)

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  5. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

  6. CSS预处理器之less和sass

    CSS预处理器 1.        基于CSS的另一种语言 2.        通过工具编译成CSS 3.        添加了很多CSS不具备的特性 4.        能提升CSS文件的组织方式 ...

  7. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  8. CSS预处理——LESS

    LESS是什么? less是一门CSS预处理语言.由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量.函数.作用域等概念.而LESS在CSS的基础语法之上,引入了变量.Mixin混入.运算以及 ...

  9. CSS预处理框架:less,scss

    CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...

随机推荐

  1. 点击button触发onclick事件判空后依旧自动跳转

    这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...

  2. Android Studio 新手常见错误:Gradle DSL method not found: 'runProguard()'

    在Android Studio上执行Github上的某Android开源项目,提示报错: Error:(20, 0) Gradle DSL method not found: 'runProguard ...

  3. C#线程同步技术(二) Interlocked 类

    接昨天谈及的线程同步问题,今天介绍一个比较简单的类,Interlocked.它提供了以线程安全的方式递增.递减.交换和读取值的方法. 它的特点是: 1.相对于其他线程同步技术,速度会快很多. 2.只能 ...

  4. atitit.md5算法的原理 与 总结

    atitit.md5算法的原理 与 总结 1. MD5的位数 128位1 2. 字节数组转换为32位字符串 base161 2.1. 十六进制字符用4个二进制位来表示1 2.2. byte[]和十六进 ...

  5. Sublime Text快捷键去除空白行 - 转载请保留原文链接:https://www.noniu.com/qianduan/sublime-text-kongbaihang.html

    如果使用notepad++或者Dreamweaver的朋友,应该知道有个快捷键或者功能按钮,可以实现删除文档空白行的功能.虽然空白行不会影响程序运行,但是会占一定的空间,对于有处女座特质的程序员来说, ...

  6. JdbcTemplate中的exectue和queryForList方法的性能对比

    @Autowired JdbcTemplate jdbcParam; pstm =                 jdbcParam.getDataSource()                ...

  7. linux学习笔记20--命令df和dh,fdisk

    df和dh是用来查看磁盘空间使用情况的. linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命 ...

  8. Google Analytics Advanced Configuration - Google Analytics 高级配置

    该文档提供了Android SDK v3的部分元素的高级配置说明. Overview - 概述 Android Google Analytics SDK提供了Tracker类,应用可以用它给Googl ...

  9. 作为一个Linux/Unix程序员有哪些要求

    C程序开发: 熟悉数据库sql语言: 熟练掌握C语言(面向过程的),掌握C++(面向对象的) 工程管理工具:make,会写Makefile 熟悉IBM DB2.Informix.Sysbase.SQL ...

  10. ubus

    openwrt提供了一个系统总线ubus,类似linux桌面操作系统的d-bus,目标是提供系统级的进程间通信(IPC)功能. 为了提供各种后台进程和应用程序之间的通信机制,ubus被开发出来,由3部 ...