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): 管理数据库的一套软件 ...
随机推荐
- sql中InnoDB和MyISAM的区别
InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型 1,MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不提供事务支持等高级处理,往往被认为只适合小项目:而 ...
- Editorial Board 、co-editor、ediitor、editor-in-chief的区别
昨天更新掘金APP-IOS之后发现一个比较严重的Bug,联系管理者报告了Bug,中途发现掘金的发布功能需要申请成为co-editor才行. 那么这里科普一下这几个名词: Editorial Board ...
- J2EE进阶(九)org.hibernate.LazyInitializationException: could not initialize proxy - no Session
org.hibernate.LazyInitializationException: could not initialize proxy - no Session 前言 在<many-to-o ...
- 【一天一道LeetCode】#137. Single Number II
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- Android Studio科普篇——1.几个个性化设置
本人未研读过android-studio使用文档,亦未去好好琢磨它的各种使用技巧等.以下内容均来自个人使用经验,如有讹误,还请指正. 1.主题. File->Settings, 搜索Theme, ...
- 《java入门第一季》之集合框架（Collection小儿子Set集合）
/* * Collection主要的连个儿子: * |--List * 有序(存储顺序和取出顺序一致),可重复 * |--Set * 无序(存储顺序和取出顺序不一致),唯一 * * H ...
- K-均值聚类算法(K-means)
K-means是一种无监督的学习,将相似的对象归到同一个簇中.可以将一批数据分为K个不同的簇,并且每个簇的中心采用簇中所含样本的均值计算而成. K-means算法的K值需要由用户指定, ...
- shell的date
使用方式 : date [-u] [-d datestr] [-s datestr] [--utc] [--universal] [--date=datestr] [--set=datestr] [- ...
- 【shell脚本练习】批量添加用户和设置密码
题目 添加9个用户,user101-user109:密码同用户名: 思路 for循环来添加就好了,用户名和密码都可以拼字符串来完成 user10+数字 要判断是否能添加成功,注意非交互模式下修改用户密 ...
- jsp自动编译机制
总的来说,Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译.实际上由于在Tomc ...