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代码,让整个网页变得更加灵活可 ...
随机推荐
- Echart使用过的属性总结
改变坐标轴颜色与粗细: axisLine: { lineStyle: {//设置轴的颜色 color: '#CD0000', width: 1,//轴的宽度 } } 改变坐标轴上刻度的间隔与倾斜方向: ...
- Axios的get和post请求写法
执行get请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(re ...
- 【JZOJ3397】【luoguP4556】雨天的尾巴
description 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 ...
- 廖雪峰Java13网络编程-3其他-2RMI远程调用
1.RMI远程调用: Remote Method Invocation 目的:把一个接口方法暴露给远程 示例: 定义一个接口Clock,它有一个方法能够获取当前的时间,并编写一个实现类,来实现这个接口 ...
- index方法用于数据集的强制索引操作
index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...
- 理清Java中try-catch-finally带return的执行顺序
前言:try-catch-finally带return和异常时,它们之间执行顺序问题是留下来的一个小疑问,今天搞清楚它们 第一种情况:无异常 //1.try-catch-finally都带有retur ...
- 12DUILib经典教程(实例)
Duilib经典实例教程:1基本框架:一个简单的Duilib程序一般是下面这个样子的:://Duilib使用设置部分:#pragmaonce:#defineWIN32_LEAN_AND_ME:#def ...
- sde中导入shp报错
在向sde中的数据集导入shp数据,发现报如下错误:
- RQNOJ--2 开心的金明（01背包）
题目:http://www.rqnoj.cn/problem/2 分析:这个题目每一种物品都是有"选"或"不选"两种情况. 属于01背包问题.物品的价格相当于背 ...
- 数据挖掘-diabetes数据集分析-糖尿病病情预测_线性回归_最小平方回归
# coding: utf-8 # 利用 diabetes数据集来学习线性回归 # diabetes 是一个关于糖尿病的数据集, 该数据集包括442个病人的生理数据及一年以后的病情发展情况. # 数据 ...