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): 管理数据库的一套软件 ...
随机推荐
- nginx中configure脚本支持的常用选项，拍摄自《Nginx高性能Web服务器详解》
- 剑指offer面试题4 替换空格（c）
- Android实现分享图片和文字的功能
为了应用的推广,我们经常看到点击分享按钮会出现,比如微博微信等应用的分享二等列表,这是如何实现的呢?这一篇将要详细的介绍. android的实现分享是通过隐式的启动activity. 分享文本 1.a ...
- Android View框架总结（八）ViewGroup事件分发机制
请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52298780 上篇分析了View的事件分发流程,留了一个问题:如果上 ...
- 18 Ui美化 剪切动画clip
输入0 - 10000 让图片根据数值显示部分图片 在工程文件的res/drawable/新建clip文件 <?xml version="1.0" encoding=&quo ...
- Android反编译 -- 错误代码还原
PS:如果阅读体验不好,可以尝试Github版 (<-点左边) 1. setColor(-16777216) 反编译的代码中会有很多setColor(int)的情况,比如setColor(-16 ...
- 1.QT中的容器QVector,QList，QSet,QMap,QQueue,QStack,QMultiMap,QSingleList等
1 新建一个项目 在pro文件中只需要加上CONFIG += C++11 main.cpp #include <QMap> int main() { QMap<int,QStrin ...
- Dynamics CRM 报表导出EXCEL 列合并问题的解决方法
CRM中的报表导出功能提供了多种格式,excel就是其中之一,这次遇到的问题是导出后打开excel列明合并的问题,具体如下看着相当不美观,物料名称字段占了AB两列,品牌占了CD两列等等. 该问题的源头 ...
- python的u'字符串"（字符编码）：字符串前有u，表示字符串以unicode格式存储
举个例子 >>> s = u'\u6ce8\u91ca' >>> s u'\u6ce8\u91ca' >>> print s 注释 >> ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...