LESS学习笔记 —— 入门
今天在网上完成了LESS的基础学习，下面是我的学习笔记。总共有三个文件：index.html、main.less、mian.css，其中 mian.css 是 main.less 经过Koala编译之后自动生成的。下面是代码：
——index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Less</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="div1"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3_1"></div>
<div class="box3_2"></div> <div class="radius_test1"></div>
<div class="radius_test2"></div>
<div class="clear"></div>
<div class="sanjiao_demo"></div>
<div class="sanjiao_t1"></div>
<div class="sanjiao_t2"></div>
<hr>
<div class="box4"></div>
<ul class="list">
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
</ul>
</body>
</html>
——mian.less
@charset "utf-8";
body{
margin: 0px;
padding: 0px;
background-color: #DFDFDF;
}
div{margin: 5px;}
.clear{ clear: both;}
/*一、注释
*注释有2中
*/
/*第一种注释，会显示在编译后的CSS文件中*/
//第二种注释，不会显示在编译后的CSS文件中 /*二、变量
*先定义后使用，格式为 @name:value
*注意name应遵循基本的变量名规则，value要带上单位
*/
//定义
@width_200:200px;
@height_300:100px;
//使用
.div1{
width: @width_200;
height: @height_300;
background-color: #53616D;
} /*三、混合
*1.直接引用某个类的所有属性
*2.引用带参数无默认值的类属性
*3.引用带参数有默认值的类属性
*/
//混合 1
.box{ width: 200px;height: 50px; float: left;}
.border{
border: solid 5px #3ECAAF;
}
.box1{
.border;//直接类名即可
.box;
}
//混合 2 带参数无默认值
.border2(@border_width){
border: solid @border_width #3ECAAF;
}
.box2{
.box;
.border2(10px);//因为无默认值，调用时必须带()且传入参数
}
//混合 3 带参数有默认值
.border3(@border_width:7px,@bstyle:solid){
border: @bstyle @border_width #3ECAAF;
}
.box3_1{
.box;
.border3();//有默认值，可不传参数
}
.box3_2{
.box;
.border3(9px,dotted);//有默认值，传参可以覆盖默认值
}
//Demo 圆角
.border_radius(@radius:5px){
-wekit-border-radius: @radius;
-max-border-radius: @radius;
border-radius: @radius;
}
.radius_test1{
.box;
.border();
.border_radius();
}
.radius_test2{
.box;
.border();
.border_radius(20px);
} /*四、匹配模式 */
//应用背景：三角
.sanjiao_demo{
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent red transparent;
border-style: dashed dashed solid dashed;//解决IE6黑边问题
}
//4.1 匹配模式下写三角
.sanjiao(top,@w:5px,@c:#f00){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.sanjiao(bottom,@w:5px,@c:#f00){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.sanjiao(@_,@w:5px,@c:#f00){
width: 0px;
height: 0px;
overflow: hidden;
}
.sanjiao_t1{
.sanjiao(top,20px);
}
.sanjiao_t2{
.sanjiao(bottom,15px,blue);
} //4.2 匹配模式 - 定位
.pos(r){position: relative;}
.pos(a){ position: absolute;}
.pos(f){ position: fixed;}
.pipei{
.box;
background-color: green;
.pos(r);
}
/*
五、运算
！！！【加减】运算符与前一个变量之间有空格，否则出错
*/
@abase:300px;
.box4{
width: (@abase - 20)*2;//变量和运算符之间有空格
height: @abase + 3;
height: @abase/2;
color: #000+100;
.border;
}
/*六、嵌套规则*/
/*一般的写ul li a 的方式
.list{}
.list li {}
.list a {}
.list a:hover {}
.list span{}
*/
.list{
width: 800px;
margin: 30px auto;
padding: 0;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
a{
display: block;
float: left;
//&符号代表上一层选择器
&:hover{
color: red;
}
}
span{
display: block;
float: right;
}
}
/*七、@arguments变量
@arguments代表形参中的所有参数
*/
.border_arg(@w:30px,@c:red,@sty:solid){
border:@arguments;//等价于border:@w @c @sty;
}
/*八、避免编译和important
在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号
*/
//8.1 避免编译
.test_no1{
width: ~'calc(300px - 30px)';//特殊方法，需要浏览器去计算
}
.test_no2{
width: calc(300px - 30px);//对比上面的
}
//8.2 important,为所有引用的属性加上important
.test_important{
.border!important;
}
——main.css
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
background-color: #DFDFDF;
}
div {
margin: 5px;
}
.clear {
clear: both;
}
/*一、注释
*注释有2中
*/
/*第一种注释，会显示在编译后的CSS文件中*/
/*二、变量
*先定义后使用，格式为 @name:value
*注意name应遵循基本的变量名规则，value要带上单位
*/
.div1 {
width: 200px;
height: 100px;
background-color: #53616D;
}
/*三、混合
*1.直接引用某个类的所有属性
*2.引用带参数无默认值的类属性
*3.引用带参数有默认值的类属性
*/
.box {
width: 200px;
height: 50px;
float: left;
}
.border {
border: solid 5px #3ECAAF;
}
.box1 {
border: solid 5px #3ECAAF;
width: 200px;
height: 50px;
float: left;
}
.box2 {
width: 200px;
height: 50px;
float: left;
border: solid 10px #3ecaaf;
}
.box3_1 {
width: 200px;
height: 50px;
float: left;
border: solid 7px #3ecaaf;
}
.box3_2 {
width: 200px;
height: 50px;
float: left;
border: dotted 9px #3ecaaf;
}
.radius_test1 {
width: 200px;
height: 50px;
float: left;
border: solid 5px #3ECAAF;
-wekit-border-radius: 5px;
-max-border-radius: 5px;
border-radius: 5px;
}
.radius_test2 {
width: 200px;
height: 50px;
float: left;
border: solid 5px #3ECAAF;
-wekit-border-radius: 20px;
-max-border-radius: 20px;
border-radius: 20px;
}
/*四、匹配模式 */
.sanjiao_demo {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
.sanjiao_t1 {
border-width: 20px;
border-color: transparent transparent #ff0000 transparent;
border-style: dashed dashed solid dashed;
width: 0px;
height: 0px;
overflow: hidden;
}
.sanjiao_t2 {
border-width: 15px;
border-color: #0000ff transparent transparent transparent;
border-style: solid dashed dashed dashed;
width: 0px;
height: 0px;
overflow: hidden;
}
.pipei {
width: 200px;
height: 50px;
float: left;
background-color: green;
position: relative;
}
/*
五、运算
！！！【加减】运算符与前一个变量之间有空格，否则出错
*/
.box4 {
width: 560px;
height: 303px;
height: 150px;
color: #646464;
border: solid 5px #3ECAAF;
}
/*六、嵌套规则*/
/*一般的写ul li a 的方式
.list{}
.list li {}
.list a {}
.list a:hover {}
.list span{}
*/
.list {
width: 800px;
margin: 30px auto;
padding: 0;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
.list a {
display: block;
float: left;
}
.list a:hover {
color: red;
}
.list span {
display: block;
float: right;
}
/*七、@arguments变量
@arguments代表形参中的所有参数
*/
/*八、避免编译和important
在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号
*/
.test_no1 {
width: calc(300px - 30px);
}
.test_no2 {
width: calc(270px);
}
.test_important {
border: solid 5px #3ECAAF !important;
}
转载请注明（本人独立博客）：时光本无罪 » LESS学习笔记
—— 入门
LESS学习笔记 —— 入门的更多相关文章
- PHP学习笔记 - 入门篇（5）
PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...
- PHP学习笔记 - 入门篇（4）
PHP学习笔记 - 入门篇(4) 什么是运算符 PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要 ...
- PHP学习笔记 - 入门篇（3）
PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...
- PHP学习笔记--入门篇
PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...
- Dubbo -- 系统学习 笔记 -- 入门
Dubbo -- 系统学习 笔记 -- 目录 入门 背景 需求 架构 用法 入门 背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行, ...
- Netty学习笔记-入门版
目录 Netty学习笔记 前言 什么是Netty IO基础 概念说明 IO简单介绍 用户空间与内核空间 进程(Process) 线程(thread) 程序和进程 进程切换 进程阻塞 文件描述符 文件句 ...
- solr学习笔记-入门
solr学习笔记 1.安装前准备 solr依赖java 8 运行环境,所以我们先安装java.如果没有java环境无法启动solr服务,并且会看到如下提示: [root@localhost solr- ...
- ADO.NET 学习笔记 入门教程
本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=57&page=1&extra=#pid63 这是本人在 ...
- 0042 MySQL学习笔记-入门--01
基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储 数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...
随机推荐
- UNIX网络编程——揭开网络编程常见API的面纱【上】
Linux网络编程API函数初步剖析 今天我们来分析一下前几篇博文中提到的网络编程中几个核心的API,探究一下当我们调用每个API时,内核中具体做了哪些准备和初始化工作. 1.socket(famil ...
- spring @Qualifier注解使用
@Autowired是根据类型进行自动装配的.如果当Spring上下文中存在多个UserDao类型的bean时,就会抛出BeanCreationException异常;如果Spring上下文中不存在U ...
- Ubuntu 16.04 安装和使用QQ最简洁的方式
推荐参考网址: 1 http://www.ubuntukylin.com/ 2 http://www.ubuntukylin.com/application/ Wine QQ 1 http:// ...
- API创建/更新员工联系电话
DECLARE ln_phone_id PER_PHONES.PHONE_ID%TYPE; ln_object_version_number PER_PHONES.OBJECT_VERSION_NUM ...
- unix下快速混淆源代码
只能算雕虫小技,但可以快速简单的做混淆,如下: #vapyhqr <fgqvb.u> #vapyhqr <fgqyvo.u> #vapyhqr <fgqobby.u> ...
- UNIX网络编程——产生RST
产生RST的3个条件:1. 建立连接的SYN到达某端口,但是该端口上没有正在监听的服务. 如:IP为192.168.1.33的主机上并没有开启WEB服务(端口号为0x50),这时我们通过IE去访问 ...
- Windows远程连接的实现
实验室有一台电脑,寝室里也有一台电脑,很多时候,事情还没有做完就不得不离开实验室,所以,在寝室里远程控制实验室的电脑是一件很有"意义"的事,其实,Windows系统已经 ...
- Spring+Hibernate4 Junit 报错No Session found for current thread
论坛上有另外一篇更全面的帖子,jinnianshilongnian写的:http://www.iteye.com/topic/1120924 本文的环境是: spring-framework-3.1 ...
- RabbitMQ消息队列的小伙伴: ProtoBuf（Google Protocol Buffer）
什么是ProtoBuf? 一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无关.可扩 ...
- LOV里的值直接引用系统里定义的值集的值，且具有值集的安全性控制
fnd_flex_server.check_value_security(p_security_check_mode => 'YH', p_flex_value_set_id => p_f ...