一个.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领域,从一个普通的程序员到一个技术主管,再到一个技术经理,再到一个技术主管,他们践踏了许多坑,劳累了许多课程,还背着许多罐子.在提高他们的技术和管理能力的同时,他们一直在考虑如 ...
随机推荐
- 【ITOO 2】使用ArrayList时的注意事项:去除多余的null值
问题描述:在课表导入的时候,将数据从excel表里读出,然后将list批量插入到对应的课程表的数据表单中去,出现结果:当我们导入3条数据时,list.size()为3,但是实际上,list里面存在10 ...
- 【drp 1】使用易宝实现在线支付
导读:在很多网站上,都会涉及到在线支付的功能,总所周知的有:淘宝.天猫.京东等等.我们常见的支付方式有支付宝.微信钱包.银行卡支付等.本篇博客,将介绍一种使用易宝第三方软件进行在线支付的功能. 一.基 ...
- ENVI二次开发模式下的Landsat数据读取
从usgs网站或者马里兰大学下载TM或Landsat原始数据,数据可能包括9个tif数据,两个txt文件和一个gtf文件.示例结构如下: ENVI下可以直接打开*_MTL.txt文件打开,打开后波段列 ...
- 【MVC】关于Action返回结果类型的事儿(上)
一. ASP.NET MVC 1.0 Result 几何? Action的返回值类型到底有几个?咱们来数数看. ASP.NET MVC 1.0 目前一共提供了以下十几种Action返回结果类型: 1. ...
- windows7安装远程服务器AD域管理工具
目的:在win7上安装“远程服务器管理工具”,这样可以在客户端进行对服务器的AD域的操作,避免了远程登陆进服务器的麻烦. 前提条件:一般此工具只有管理员才具有有效使用权限,所以,在域administr ...
- DOM 中 Property 和 Attribute 的区别
原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...
- POJ C程序设计进阶 编程题#2:字符串中次数第2多的字母
编程题#2:字符串中次数第2多的字母 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536k ...
- 使用nodejs引用socket.io做聊天室
Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Hbase的Observer
hbase提供了类似于触发器的组件observer,类似于存储过程的endpoint. hbase中的observer分别三类,MasterObserver.RegionObserver.WALObs ...