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预处理编译的更多相关文章

  1. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

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

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

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

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

  4. sublime中如何用less实现css预编译

    实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...

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

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

  6. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

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

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

  8. CSS 预处理语言之 less 篇

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

  9. CSS预处理器之less和sass

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

  10. 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

随机推荐

  1. Vim编辑器的使用和基本配置

    三种模式 1 命令模式 插入 a i o A I O 定位 gg G :n nG ngg $ 0 删除 x nx dd ndd dG 复制和剪切 yy-p dd-p 替换 r R 撤销和恢复 u Ct ...

  2. HDU - 1205 I NEED A OFFER!

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1203 题意: 该题要求得到一份offer的最大概率,在例子中的0.44 = 1-(1-0.2)*(1- ...

  3. 转:loadrunner ---循环输出关联数组

    web_reg_save_param,将Ord参数值设定为ALL,则关联函数将自动把符合条件的关联值保存到参数数组里.在本例中,假设关联值返回三条记录,则LR分别将值保存到sor_1,sor_2,so ...

  4. 转:Loadrunner学习知多少--脚本录制下载操作

    在很多时候我们可能需要对系统进行这样的脚本开发,模拟用户点击一个下载链接,然后弹出下载框,选择保存,用来测试在大量用户下载时服务器的性能.但是现在大家对于这种脚本的处理方式往往是通过关联和C 语言的文 ...

  5. 利用工具MailUtils实现邮件的发送,遇到的大坑,高能预警!!

    java实现邮件的发送依赖的jar包有两个:mail.jar和activation.jar,我也找到了一个工具包:itcast-tools-1.4.jar,实现原理大家可以查看源码,先放出资源链接 h ...

  6. call_grant_exec.sql

    set echo off feedback off verify off pagesize 0 linesize 120 define v_grantee                 = & ...

  7. struts2整合spring应用实例

    我们知道struts1与spring整合是靠org.springframework.web.struts.DelegatingActionProxy来实现的,以下通过具体一个用户登录实现来说明stru ...

  8. CodeForces 158B Taxi(贪心)

    贪心,注意优先级,4单独,3与1先匹配,2与2匹配(注意判断2有没有剩下),然后2与两个1匹配,最后4个1匹配就可以了. #include<iostream> #include<cs ...

  9. oracle 主键自动增长

    oracle 主键自动增长 2009-12-11 16:07:00|  分类: 数据库资料|字号 订阅     这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create tabl ...

  10. Android系统开机启动画面显示过程简要说明

    开机启动会显示三个画面: Linux内核的启动画面,静态画面 Init进程启动过程中出现的静态画面 系统服务启动过程中出现的动态画面 这些画面的显示的过程不同,但最终是通过framebuffer显示的 ...