Less入门到上手——前端开发利器

摘录less官网的解释:

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

以上是less官方解释,说下本菜的理解:less类似css的jquery,一个为css封装的库。

less最终还是被编译成css被读取。

1、less定义变量

/*声明变量*/
@var_width:120px;
/*使用变量*/
div{
   width:@var_width;
}

这样一段less代码被编译后的css是:div{width:120px;}

2、混合

@d_length:300px;    /*定义变量*/
.d_1{
    width:@d_length;
    height:@d_length;
    border:blue 1px solid;
    float:left;
    margin-left:20px;
}
.d_2{
    .d_1;                        /*混合  使用.d_1全部样式*/
    background-color:#808080;
    border-color:red;
}
.d_3{
    .d_2;                        /*混合  使用.d_2全部样式*/
    border-color:yellow;
}

混合特性,less中可以重复使用样式。可以把每一个样式都看做一个封装好的函数,其他样式若需要便直接调用。

混合带参,less的混合和函数一样,也可以带参数,在遇到大量重复,但同一属性值又需不一样。这时就要用到混合参数。

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color){
    width:300px;
    height:300px;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6);
}

混合带参时,也可以直接给参数赋值,在使用时注意,定义带参混合若定义的参数有赋值使用时可以不传参,若定义的参数没赋值使用时就必须传参,若定义了参数值,使用时依然可以传参改变预先定义的参数值。

/* 声明的带参混合 */
.div_style(@bg_color,@bor_color,@wid:300px,@hei:100px){
    width:@wid;
    height:@hei;
    border:@bor_color 3px solid;
    background-color:@bg_color;
    float:left;
    margin-left:20px;
}
/* 此时前两个参数必须传值,后两个则可传可不传。 */
.d_1{
    .div_style(#4491F6,#F63C18);
}
.d_2{
    .div_style(#F8F00A,#4491F6,600px,200px);
}
时间: 2024-10-10 06:09:40

Less入门到上手——前端开发利器的相关文章

Less入门到上手——前端开发利器<二>深入了解

接着昨天的继续... ... 4.嵌套: HTML部分 <table> <tr> <th colspan="3">测试列表标题</th> </tr> <tr> <td>测试文字</td> <td>测试文字</td> <td>测试文字</td> </tr> <tr> <td>测试文字</td> &l

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

前端开发利器 Sublime Text 3 使用技巧和总结笔记

这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 为测试阶段,建议下载正式版  注册机SublimeTextKeygen下载 打开注册机,先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认,再随意修改下 “Name” 然后 “G

前端开发利器-Brackets IDE

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具

前端开发利器 livereload -- 从此告别浏览器F5键

各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷新也能实时预览新代码构建的页面. 软件准备:1.新版的sublime text(sublime text 2 无法下载livereload插件) 下载地址 https://www.sublimetext.com/3 新版本安装配置说明 https://www.douban.com/note/474507021

web前端开发利器——基于ruby的sass,compass和Dreamever+emmet插件

引言:web前端的html页面和css文件有时写起来会很麻烦,但是借助一些工具能够帮助我们轻松的构建相应的页面.sass是css的一款开发工具,有相应的语法,可以有逻辑和简洁编写css代码.本文介绍的主要是基于Dreamever cs5加上emmet插件快速编写简洁html页. 1. ruby安装与配置 ruby可以从百度搜索中的百度软件安装中心找到或者官网下载.安装很简单,以.exe文件进行安装,直接进行下一步安装就行.安装完成之后,在命令行窗口中输入 ruby -v,如果显示了相应的版本说明

2017年前端开发Angular.JS从入门到上手企业开发视频

文后附录下载链接: 课时名称 1体验angular 2ng-init初始化变量 3获取应用程序 4控制器定义作用域 5使用事件 6显隐页面 7插值表达式 8插值过滤器 9filter过滤器 10日期过滤器 11新闻日期案例 12字符串过滤器 13数字过滤器 14数组过滤器 15自定义过滤器 16脏值检测 17注册系统 18disabled指令 19readonly指令 20checked指令 21change指令 22submit事件指令 23run方法与全局作用域 24href动态绑定 25s

微信开发系列——微信订阅号前端开发利器:WeUI

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找

前端开发利器之静态服务器

在进行前端页面开发时,为了调试方便,需要在本地启动一个静态文件服务器,而不需要与后端api服务一起部署. 常用静态文件服务器 01. anywhere 使用简单,需要nodejs环境.安装:npm install anywhere -g使用:anywhere --help在任何需要访问静态文件的地方,直接运行即可访问:anywhere -p 8080详见:https://www.npmjs.com/package/anywhere 02. http-server 使用简单,需要nodejs环境.