sublime中用less实现css预编译
实现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文件即可。
http://www.1024i.com/demo/less/
sublime中用less实现css预编译的更多相关文章
- sublime中如何用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- Css预编译(Sass&&Less)
目录 Less与Sass是css的预处理技术 而CoffeeScript.TypeScript则是javascript的预处理技术. Less与Sass是css的预处理技术 而CoffeeScript ...
- css预编译--sass进阶篇
基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...
- Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题
调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下: [shenma@localhost demo]$ ls v ...
- 浅谈css的预编译---less语言
正如各位所知道的一样,css是一门标记性语言,语法相对简单,对使用者的要求也比较低 .不过可乐不知道友友们有没有发现,在使用css的时候需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
随机推荐
- Keywords Search HDU2222 AC自动机模板题
ac自动机说起来很复杂,其实和kmp是一样的思路,都是寻找相同前后缀,减少跳的次数.只要理解了kmp是怎么求next数组的,ac自动机bfs甚至比knp还好写. 这里大致说一下kmp求next数组的方 ...
- shell学习笔记2: shell中的四则运算符
shell中的四则运算符 n1,n2 :常量数字 char:运算符号 加,减,乘,除,取余(+,-,*,/,%) $a,$b:变量a,变量b 方法1 数字与符号之间需要有空格 不支持小数 expr n ...
- centos 7 安装dotnet core
dotnetcore 支持的Linux 版本请看官网:https://docs.microsoft.com/zh-cn/dotnet/core/linux-prerequisites?tabs=net ...
- 菜鸟nginx源码剖析数据结构篇（九） 内存池ngx_pool_t[转]
菜鸟nginx源码剖析数据结构篇(九) 内存池ngx_pool_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn. ...
- Attribute类的使用
为每个变量设置设置属性 "Description" public class PatternOption { /// <summary> /// 方向图步长 /// & ...
- 8种nosql数据库对比
1. CouchDB 所用语言: Erlang 特点:DB一致性,易于使用 使用许可: Apache 协议: HTTP/REST 双向数据复制, 持续进行或临时处理, 处理时带冲突检查, 因此,采用的 ...
- NFS和mount常用参数详解 本文目录
NFS和mount常用参数详解 本文目录 NFS权限参数配置 mount挂载参数 原始驱动程序的挂载选项. 新驱动程序的挂载选项. 怎样改变已经挂载的NTFS卷的权限? 怎样自动挂载一个NTFS卷 ...
- set_clock_latency
set_clock_latancy用于定于虚拟时钟与真实时钟的延时 考虑最糟糕的情况,评估setup时数据会使用最大延时,时钟使用最小延时:评估hold时,数据使用最小延时,时钟使用最大延时.
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- c++设计模式：观察者模式
主要思想:建立一个一对多的关系,当一个对象发生发生变化时,其他对象也发生变化. 可以举个博客订阅的例子,当博主发表新文章的时候,即博主状态发生了改 变,那些订阅的读者就会收到通知,然后进行相应的动作, ...