一个.net程序员教你使用less
我是一个.net 程序员,虽然说一直做后台,但是web 前端也会去学,虽然说技术只是层窗户纸,但是像我这种多动症患者,不捅破我心难受啊!
好!废话不多提,下面直接正题,至于less 是什么这里不多讲因为官网写的很清楚http://less.bootcss.com/ 然后你进官网之后你会发现,这些东西很难看懂
好!我这篇就是告诉大家如何才能看明白这些内容的,看完我这篇随笔,只需要一个小时的时间你就会掌握less 进行开发了!
①首先我们知道less需要一个编译器但是官网上提供的是nodejs npm 下的包,这些我都不用,因为为了简单并提高效率,我推荐的一款自动编译的软件
http://koala-app.com/index-zh.html 考拉下载就行,打开如图所示,您可以更改语言!
点击设置更改语言
使用的时候很简单只需要把我们新建的文件夹拖入到上面就可以了这里不再多讲,好!下面我就操作,新建个项目来写less 大家请往下看
这个时候你右键style.less 设置css 输出路径,好了编译器弄完了!这个时候才是真正的正题了直接上代码
@min-width:200px; //定义变量 变量名一定要时候@ 然后 后面分号加上数值 每个变量只能定义一次
@min-height:100px;
//----------------------------------------------------------------------------------------------
/*下面的看见是不是比较陌生,这个类似函数功能,我把常用的
css 过渡兼容性都封装起来以后用的时候直接调用这个方法
就可以了*/
.transition(@duration:0.8s,@timing-function:ease)
{
transition:@duration @timing-function;
-moz-transition:@duration @timing-function;
-o-transition:@duration @timing-function;
-webkit-transition:@duration @timing-function;
-ms-transition:@duration @timing-function;
}
/*这个也是个方法在下面也有调用*/
.GetDefaultColor(@color:#f00) {
background-color: @color;
} .divs {
/*调用获取默认颜色方法*/
.GetDefaultColor(#000);
width: percentage(0.5);
height: min-height;
/*看见这行代码了吗?这就是上面的函数如果你想要封装的更多你可以使用类,
这里说的类就是大函数嵌套小函数,和js 的类差不多写法如上面所示*/
.transition(0.5s,ease-in-out); /*less 是可以嵌套的 选择器可以再次嵌套选择器会生成 .divs p {}这样的形式
& 这个就是当前选择器的父辈的名字
这个&在这个嵌套里面就相当于 .divs*/ &:hover {
background-color: #b6ff00;
}
}
有了less 是不是感觉方便许多,以后我们在写css 的时候就可以管理less就行不用写css 了这样方便管理,也省事。
生成的css 是这样的
/*下面的看见是不是比较陌生,这个类似函数功能,我把常用的
css 过渡兼容性都封装起来以后用的时候直接调用这个方法
就可以了*/
/*这个也是个方法在下面也有调用*/
/* line 20, style.less */
.divs {
/*调用获取默认颜色方法*/
background-color: #000000;
width: 50%;
height: min-height;
/*看见这行代码了吗?这就是上面的函数如果你想要封装的更多你可以使用类,
这里说的类就是大函数嵌套小函数,和js 的类差不多写法如上面所示*/
transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
/*less 是可以嵌套的 选择器可以再次嵌套选择器会生成 .divs p {}这样的形式
& 这个就是当前选择器的父辈的名字
这个&在这个嵌套里面就相当于 .divs*/
}
/* line 33, style.less */
.divs:hover {
background-color: #b6ff00;
}
仔细看看和上面css 的代码和上面的less 有什么不同
这样你就能发现有变量的好处,如果你能把上面的好好看上一遍每个代码的注释都看一遍,然后你再次上官网看less 的教程你发现会非常的简单,只要1小时就可以开发less
接下来我会更新mvc4 +bootstrap+knockoutjs+less 来开发项目具体教程。
一个.net程序员教你使用less的更多相关文章
- 一个.Net程序员:既然选择了编程,只管风雨兼程(转)
一个.Net程序员:既然选择了编程,只管风雨兼程 一次会议记录是不会有人感兴趣的,做标题党也是不道德的.所以,走了个折衷的路线,标题不叫会议记录, 内容不纯总结,技术加吐槽,经验加总结. 对于一个程序 ...
- Coding girl一个老程序员谈到的一个女程序员的故事
因为有人说我给一个女程序员的建议不靠谱,我不服,因为我的工作经历中的一些女程序员都很不错,比那些男程序员都强,所以,我在新浪微博和twitter上征集女程序员的故事和想法,这两天来,我收到了好几封邮件 ...
- 一个.net程序员的安卓之旅-Eclipse设置代码智能提示功能
一个.net程序员的安卓之旅-代码智能提示功能 过完年回来就决心开始学安卓开发,就网上买了个内存条加在笔记本上(因为笔记本原来2G内存太卡了,装了vs2010.SQL Server 2008.orac ...
- 做为一个Java程序员,你需要哪些傍身的技能?
最近总有些断断续续的思考,想想从我入行以来,我到底学会了什么,做成过什么,以后要做什么,如何提升自己······· 工作3年了,常听人说3年,5年,10年是程序员的坎,每过一个都会有新的想法,新的改变 ...
- MySQL内存表(MEMORY)说明 | 一个PHP程序员的备忘录
MySQL内存表(MEMORY)说明 | 一个PHP程序员的备忘录 MySQL内存表(MEMORY)说明
- 0~5年一个Java程序员的晋升之路
在程序界流行着一种默认的说法叫“黄金5年”,也就是一个程序员从入职的时候算起,前五年的选择直接影响着整个职业生涯中的职业发展方向和薪资走向,如何走好这5年,彻底从一个刚入行的菜鸟蜕变成可以以不变应万变 ...
- 一个JAVA程序员成长之路分享
我搞JAVA也有些日子了, 因为我比较贪玩,上进心不那么强, 总是逼不得已为了高薪跳槽才去学习, 所以也没混成什么大牛, 但好在现在也已经成家立业, 小日子过的还算滋润, 起码顶得住一月近万元的吃喝拉 ...
- 文章推荐一个Java程序员跟大家谈谈从业心得
一个Java程序员跟大家谈谈从业心得 2017-10-21 java那些事 java那些事 java那些事 微信号 csh624366188 功能介绍 分享java开发中常用的技术,分享软件开发中各种 ...
- 一个Java程序员该有的良好品质
一.前言 多年来,在IT领域,从一个普通的程序员到一个技术主管,再到一个技术经理,再到一个技术主管,他们践踏了许多坑,劳累了许多课程,还背着许多罐子.在提高他们的技术和管理能力的同时,他们一直在考虑如 ...
随机推荐
- struts2拦截器拦截成功后每次请求都出现拦截时的错误信息
action中验证方法 在执行execute之前执行 @Override public void validate() { // TODO Auto-generated metho ...
- javascript设计模式-桥接模式
在系统中,某些类由于自身逻辑,具有两个或两个以上维度的变化,如何使得该类型可以沿多个方向变化,但又不引入额外的复杂度,这就是桥接模式要解决的问题. 定义:桥接模式(Bridge),将抽象部分与它的实现 ...
- oracle中的针对该库的表
ALL_TAB_COLUMNS:所有用户的表字段 USER_TAB_COMMENTS:当前用户的所有表备注 USER_COL_COMMENTS:当前用户的所有列备注 USER_TAB_COLUMNS: ...
- dell 交换机 双链路冗余
公司海外机房引入2G带宽,是由2个电口绑定实现的.因业务需要扩容到3G,在绑定端口扩展性不太好,因此直接上10G光纤模块. 机房技术人员建议,2g老线路不撤做备份,3g新线路在线使用.使用STP协议实 ...
- iOS常用插件
iOS常用插件总结:http://blog.csdn.net/oik_ios/article/details/50251191http://www.jianshu.com/p/d24eea8b405a ...
- WP8_UTF8 to GB2312转码 (url网址中带中文字符的处理)
直接使用例如:http://www.abc.php?name=中文符 ,客户端调用,在服务端修改后,会出现乱码, 而windows phone 又不能直接支持gb2312, 经过大量分析和验证,发现 ...
- C# 多线程传参
using System; using System.Threading; //多线程调试: 2013.10.08 namespace ThreadExample { class App { publ ...
- 二级路由器设置为何要关闭DHCP服务
因为如果不关闭dhcp的话会和一级路由相冲突,你这个因该是lan口的连接法吧,如果不然的话是不需要关闭dhcp功能的路由器和路由器的连接方法有两种,一种是wan口连,一种是lan口连方法1:WAN口连 ...
- Android IOS WebRTC 音视频开发总结(三一)-- 自定义传输实现一对多
本文主要介绍基于Webrtc的多人视频会议的简单实现,文章来自博客园RTC.Blacker,支持原创,转载请说明出处. 前面提到基于开源框架的视频会议都存在诸多问题,所以我们通过重写WEBRTC传输模 ...
- win7如何设置某个软件不弹出用户账户控制
手动修改注册表: 在 HKEY_CURRENT_USERS\Software\Microsoft\Windows NT\CurrentVersion\AppCompatFlags\Layers 键下面 ...