实现css预编译的方式有很多，听说glup很流行而且功能也很强大，但是就目前的工作而言，仅要css预编译和YUIcompress就够了，接下来切入正题

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

一、Less环境的安装

1、安装less插件

ctrl+shift+p ->  install package  -> less  即可安装

功能：LESS高亮插件

简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们

使用：打开.less文件或者设置为less格式

2、安装less2css插件

ctrl+shift+p ->  install package  -> less2css  即可安装

less2css插件安装好后需要修改系统的环境变量具体功能设置可以修改该插件的setting-user参数，记住是先将setting-default里的参数复制到setting-user中在修改

功能：

当保存less文件的时候自动生成同名的css文件；
当保存less文件的时候提示编译错误信息；
批量编译项目目录下的所有less文件为css文件。

3. 本地cmd窗口

（1）打开后输入npm install less -g   输入完成后回车会自动安装 (一定要加-g)

（2）less安装完成后再输入npm install less-plugin-clean-css -g   同样输入完成后回车会自动安装 (一定要加-g)

使用：重启一下sublime然后创建less文件并保存，你会惊奇的发现css文件已经生成

工具再强大，也得精通其语法才行啊。

语法教程参见LESS

二、Less浏览器端使用举例

1.新建HTML文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Less</title>

    <link rel="stylesheet/less" href="style.less" type="text/css"> <!-- 引用Less文件 -->

    <script src="less.js" type="text/javascript"></script>  <!-- 引用Less.js -->

</head>

<body>

    <h1>Welcome Hello World</h1>

    <h3>Hello world!!!!</h3>

</body>

</html>

2.Less文件

@primarycolor : #FF7F50;

@color : #800080;

h1{

    color: @primarycolor;

}

h3{

    color: @color;

}

自动生成的CSS文件：（可以在设置里面设置为是否需要压缩）

h1 {

  color: #FF7F50;

}

h3 {

  color: #800080;

}

3. 使用SublimeServer，即可看到效果

需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。

参考资料：sublime中如何用less实现css预编译

　　　　　Less快速入门

　　　　  http://www.1024i.com/demo/less/

sublime中用less实现css预编译的更多相关文章

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

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

  2. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  3. Css预编译(Sass&&Less)

    目录 Less与Sass是css的预处理技术 而CoffeeScript.TypeScript则是javascript的预处理技术. Less与Sass是css的预处理技术 而CoffeeScript ...

  4. css预编译--sass进阶篇

    基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...

  5. Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题

    调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下:    [shenma@localhost demo]$ ls v ...

  6. 浅谈css的预编译---less语言

    正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 .不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤 ...

  7. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  8. 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  9. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

随机推荐

  1. golang 获取当前可执行程序的当前路径

    import ( "errors" // "fmt" "os" "os/exec" "path/filepat ...

  2. android 遍历控件

    做个笔记 androuid 遍历一个 view 下面的子view // 保存 btnSaveRout.setOnClickListener(new OnClickListener() { @Overr ...

  3. 洛谷P1129 【ZJOI2007】矩阵游戏

    原题传送门 题目描述 小QQ是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N \times NN×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每 ...

  4. 安装Tengine和Tengine说明

    什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/   Tengine的安装   新建tengine用户组 groupadd -r n ...

  5. Spring MVC(十三)--保存并获取属性参数

    这里的属性参数主要是指通过request.session.cookie等设置的属性,有时候我们需要将一些请求的参数保存到HTTP的request或者session对象中去,在控制器中也会进行设置和获取 ...

  6. Django 异步任务、定时任务Celery

    将任务分配给其他的进程去运行,django的主进程只负责发起任务,而执行任务的不在使用django的主进程.Python有一个很棒的异步任务框架,叫做celery. Django为了让开发者开发更加方 ...

  7. PAT甲级——A1091 Acute Stroke【30】

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  8. PAT甲级——A1081 Rational Sum

    Given N rational numbers in the form numerator/denominator, you are supposed to calculate their sum. ...

  9. ES6之主要知识点（九）Set和Map

    1.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); ...

  10. 模板：exlucas

    求$C_n^m mod p$,其中p不是质数且不保证p能分解为几个不同质数的乘积(也就是不能用crt合并) #include<iostream> #include<cstdio> ...