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): 管理数据库的一套软件 ...
随机推荐
- Java学习之控制跳转语句
控制跳转语句 控制跳转语句: (1)break:中断的意思 A:用在循环和switch语句中,离开此应用场景无意义. B:作用 a:跳出单层循环 b:跳出多层循环,需要标签语句的配合 (2)conti ...
- T-SQL动态查询（4）——动态SQL
接上文:T-SQL动态查询(3)--静态SQL 前言: 前面说了很多关于动态查询的内容,本文将介绍使用动态SQL解决动态查询的一些方法. 为什么使用动态SQL: 在很多项目中,动态SQL被广泛使用甚至 ...
- GCD API 记录 （三）
本篇就不废话啦,接着上篇记录我见过或者使用过的与GCD相关的API.由于一些API使用的非常少,用过之后难免会忘记,还是记录一下比较好. 6.dispatch_group_wait 该API依然是与d ...
- Android 之Toast讲解-android学习之旅（一）
Toast比较常用,用于显示简短的提醒,比如网络连接断开等. Toast的简单编码实例 findViewById(R.id.button1).setOnClickListener(new OnClic ...
- [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38295575 本文作者:sushengmiyan ----------------- ...
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- 学习笔记6-Android查看应用输出的错误信息 如何部署应用到真实手机 发布软件
查看应用输出的错误信息 1. 通过LogCat窗口查看信息 右上角图标可以筛选不同级别的信息(比如info等). 右上角的+可以进行信息筛选 把应用部署到真实手机 1. 要把手机的 ...
- svn 集成 redmine 账户验证的终极解决方案
svn 集成 redmine 账户验证的终极解决方案 赖勇浩(http://laiyonghao.com) 动机 对于大部分开发团队来说,一般都需要一套 SCM 系统,通常是 svn + redmin ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(四)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在打开MainScene.m文件,首先设置实例变量: @imp ...