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): 管理数据库的一套软件 ...
随机推荐
- activiti 任务节点 处理人设置
1.1.1. 前言 分享牛原创(尊重原创 转载对的时候第一行请注明,转载出处来自分享牛http://blog.csdn.net/qq_30739519) 我们在使用activiti 工作流引擎的时候, ...
- FFmpeg源代码简单分析：libswscale的sws_scale()
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
- 1090. Highest Price in Supply Chain (25) -计层的BFS改进
题目如下: A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyon ...
- Java Socket输入流如何检测到EOF
对于InputStream的 read(b, off, len) 方法 public int read(byte[] b, int off, int len) throws IOException,J ...
- 【Unity Shader实战】卡通风格的Shader（二）
写在前面 本系列其他文章: 卡通风格的Shader(一) 好久没写博客了,一定是因为课程作业比较多,一定不是因为我懒,恩恩. 三个月以前,在一篇讲卡通风格的Shader的最后,我们说到在Surface ...
- ubuntu中安装samba
为了方便的和Windows之间进行交互,samba必不可少. 当然,他的安装使用也很简单: 安装: sudo apt-get install samba sudo apt-get install sm ...
- 03_NoSQL数据库之Redis数据库：list类型
lists类型及操作 List是一个链表结构,主要功能室push,pop.获取一个范围的所有值等等,操作中key理解为链表的名字.Redis的list类型其实就是一个每个元素都是string类型 ...
- (NO.00004)iOS实现打砖块游戏(五):游戏场景类
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 创建游戏场景类头文件 在Xcode创建新GameScene类,继 ...
- JAVA中的静态成员
//Java中的静态成员 /* *静态的成员变量是属于类的,不属于某个对象,是共享的. * 访问时可以用类名.静态属性直接访问,也可以用对象.访问,后者不提倡. * 静态的成员方法只能访问静态的成员 ...
- x264 编码器选项分析 (x264 Codec Strong and Weak Points) 2
文章目录: x264 编码器选项分析 (x264 Codec Strong and Weak Points) 1 x264 编码器选项分析 (x264 Codec Strong and Weak Po ...