less使用体验

less是什么

less是一种动态的样式语言。拓展了css的动态行为,比如变量、混合书写模式、操作和功能等,兼容先有css语法。例如:

/*======== 定义变量===========*/
@color: #4d926f;   
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}

less基础语法

less语法大概分为变量、混入、嵌套、功能和操作四个部分,掌握了他们就OK了。具体请参考:less语法

webstorm 配置less

开发环境,由浏览器去解析less。
1.下载less
2.把less.js在页面引入,类似<script src="../less.js">之类
3.把.less样式文件引入到页面,类似<link rel="stylesheet/less" href="../~.less">。注意rel="stylesheet/less"
参考地址:http://less.bootcss.com/

生产环境,预解析less生成css。
这部分需要安装nodejs,然后通过npm安装less解析器,可参考下面地址,配置webstrom集成less。
参考地址:http://www.cnblogs.com/fxair/p/3708099.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大家好,我是IT修真院郑州分院第05期学员,一枚正直纯洁善良的web程序员。今天给大家分享一下,修真院官网css任...
    渣渣啊123阅读 7,110评论 0 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide...
    老夫的天阅读 5,960评论 1 29
  • [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...
    顽皮的雪狐七七阅读 15,568评论 5 42
  • 相逢的时候确实太晚了 世间已 落木满天 灯火阑珊 而我曾经无暇的心 已 伤痕累累 因此在那个邂逅的路口 在初遇的刹...
    生命行者阅读 1,664评论 0 1