实现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. umount：将文件设备卸载

    [root@centos57 ~]# umount /dev/hda1 用设备文件名来卸载 [root@centos57 ~]# umount /aixi                     用挂 ...

  2. [NOIP2019模拟赛]夹缝

    夹缝 问题描述: 二维空间内有两面相对放置的,向无限远延伸的镜子,以镜子的方向及其法向量建立坐标系,我们选定一个法向量方向下面称“上”.在镜子上的整数位置,存在着一些传感器,传感器不影响光线的反射,光 ...

  3. 【学术篇】oj.jzxx.net2701 无根树

    这是一道来自OIerBBS的题目.. 原帖地址:http://www.oierbbs.com/forum.php?mod=viewthread&tid=512?fromuid=71 (似乎是个 ...

  4. leetcode-95-不同的二叉搜索树②*

    题目描述: 方法一:递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self. ...

  5. maven/gradle版本统一示例

    <dependencyManagement> <dependencies> <dependency> <groupId>org.springframew ...

  6. Cannot find module '@babel/plugin-proposal-class-properties'

    cnpm install --save-dev @babel/plugin-proposal-class-properties

  7. PAT甲级——A1084 Broken Keyboard

    On a broken keyboard, some of the keys are worn out. So when you type some sentences, the characters ...

  8. python编码知识初始_ASCII码，Unicode，Utf-8，GBK

    谍战片,电报,摩斯密码,相应规则(暗号),编码解码: 电脑底层是高低电平来传输信息(OSI七层模型,最底层):文件存储的本质,也是二进制,01010101 美国:ASCII码(8位表示一个字节 000 ...

  9. 记录：vue结合springboot进行分页查询和按条件进行查询

    界面: 主要代码: 搜索框: <el-form ref="searchForm" :inline="true" :model="searchMa ...

  10. 跟我一起了解koa之koa洋葱圈模型（二）

    根据上篇博文的博文,继续接下来我们实现的洋葱圈模型的实现 新建middleware文件夹 //m1.js function m1(ctx){ global.console.log('m1') } mo ...