Less-css预处理编译
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预处理编译的更多相关文章
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- css预处理语言--让你的css编写更加简单方便
CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...
- sublime中如何用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- CSS预处理语言-less 的使用
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...
- css预处理scss环境配置
css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...
- Less:Less(CSS预处理语言)
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- CSS 预处理语言之 less 篇
less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
- CSS预处理器之less和sass
CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
随机推荐
- linux 用户管理维护 清缓存
#echo 1 > /proc/sys/ vm/drop_caches 2013.10.10 其实一直user group一直都没去弄清楚 只是没去归类,@@一种是对用户/组直接修改(同时也更改 ...
- context-param与init-param的区别与作用
<context-param>的作用: web.xml的配置中<context-param>配置作用 1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件 ...
- linux shell: 取得某个目录下的文件名列表
取得某个目录下文件名的列表(没有子目录) ls -l dir/ | awk '{print "dir\\" $9}' #其中$9是ls -l 的第9个字段-文件名
- System.Web.Optimization找不到引用怎么办?
Install-Package Microsoft.AspNet.Web.Optimization
- ButterKnife-5.1.2.jar(较低版本的ButterKnife)使用方法
ButterKnife注解是编译时注解,Xutils是运行时注解.很明显编译时注解性能更高 一.先配置好环境 1.在工程上右键,选Properties,然后选Java Compiler,选Annota ...
- jquery给img添加按钮事件
1. img控件加id <a href="#"><img width="20" height="20" id=" ...
- 在线更新问题 HDU5877 线段树
题目大意:给你一棵树,有n-1条边,每条边都有方向,每个顶点有权值,给出weak pair的定义是val[u]*val[v] <=k,u是v的祖先,问有多少对这样的顶点 思路:创建线段树,通过d ...
- C#入门经典第十章类的成员-1
类成员的访问级别 public 成员可以由任何代码访问,公共的. private 私有的,成员只能有类中的代码访问.(默认的关键字) internal 内部的,成员只能有定义它的程序集(项目)内部 ...
- js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...
- 用css怎么制作下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...