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代码,让整个网页变得更加灵活可 ...
随机推荐
- vue-draggable-resizable 拖拽缩放插件
安装: npm install --save vue-draggable-resizable 使用: <template> <div style="height: 50 ...
- Thinkphp5 RCE总结
thinkphp5最出名的就是rce,我先总结rce,rce有两个大版本的分别 ThinkPHP 5.0-5.0.24 ThinkPHP 5.1.0-5.1.30 因为漏洞触发点和版本的不同,导致pa ...
- Quartz：Quartz
ylbtech-Quartz:Quartz Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Qu ...
- 使用Ajax在HTML页面中局部刷新页面（左边菜单右边页面）
转载自:https://blog.csdn.net/Cenmen_17714/article/details/80969008 index.html <a href="javascri ...
- PAT甲级——A1002 A+B for Polynomials
This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...
- An invalid property 'jdbcType ' was found in mapping
大概2种原因: 1 放进去的类型与字段的类型不匹配 2 比较变态,xml中=两边不能有空格! 错误示例如下: #{plat,jdbcType = INTEGER}, 去掉空格后: #{plat,jd ...
- GitHub for Visual Studio使用讲解
从VS2015起(应该是吧?),微软已经在VS中集成了GitHub,方便开发者对项目进行版本控制. 扩展包下载地址:https://aka.ms/ghfvs 其实VS2015的安装包中已经自带了这个扩 ...
- Activiti 变量设置
使用工作流的时候必定会附上一些变量.例如,请假的时候有填写请假理由,天数等等.可以用以下代码实现 public void setVariables(){ /**与任务(正在执行)*/ TaskServ ...
- Spring Cloud Eureka 使用外网IP和端口号进行服务注册
应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...
- HBase Master-status