您的位置：首页 > 其它

LESS学习笔记（上）

2015-11-26 16:46 316 查看

HTML标记：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LESS-demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>这是一个标题</h3>
<p class="p1">这是一段文字</p>
<ul>
<li class="list1 border">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
<li class="list4 boxshadow">list4</li>
<li class="list5">list5</li>
</ul>
<h4 class="h4">这是一个标题</h4>

<div id="nested">
<h1><a href="#">嵌套规则——Nested</a></h1>
<p>less 嵌套规则实例</p>
</div>
<br>
<div id="special" class="fr">
<p class="green">这个段落的文字是绿色的</p>
</div>
<p class="p2">这个段落的class是p2</p>
<p class="p3">这个段落的class是p3</p>
<div class="button1">
<a href="#">按钮</a>
<span class="button">模拟按钮样式</span>
</div>

<div class="scope">
<h3>变量范围</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>

<div class="extend">
<ul>
<li class="inline">列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
</body>
</html>

1、变量——Variables 【定义变量用@前缀】

less编译：

@charset "utf-8";
// 注释：双斜杠：单行注释 css不解析
/*这种多行注释，css会解析*/
body{
background: #eee;
}

//注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。
//1、变量——Variables 【定义变量用@前缀】
@color:#f00;
@fs14: 14px;

h3{
color:@color;
font-size: @fs14;
}

// 变量计算
@blue: #5b83ad;
@lightBlue: @blue + #111;

.p1{
color:@lightBlue;
//color:@blue;
}

//定义一个变量名为变量
@red:#f00;
@newRed: "red";
.list1{
color: @@newRed;
}

css输出：

@charset "utf-8";
/*这种多行注释，css会解析*/
body {
background: #eee;
}
h3 {
color: #ff0000;
font-size: 14px;
}
.p1 {
color: #6c94be;
}
.list1 {
color: #ff0000;
}

//2、混入——Mixins

less编译：

//混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。
//2、混入——Mixins
.border{
border: 1px solid red;
}
.h4{
.border;
}

//另外混入也像一个带有参数的functions，如下在的例子：
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

.list4{
.border;
//.roundedCorners;
.roundedCorners(10px);
}

//@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
.h4{
.boxShadow(2px,2px,3px,#f36);
}

css输出：

.border {
border: 1px solid red;
}
.h4 {
border: 1px solid red;
}
.list4 {
border: 1px solid red;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.h4 {
-moz-box-shadow: 2px 2px 3px #ff3366;
-webkit-box-shadow: 2px 2px 3px #ff3366;
box-shadow: 2px 2px 3px #ff3366;
}

3、嵌套规则——Nested Rules【后代选择符&】

less编译：

#nested{
display: inline;
float: left;
h1{
font-size: 26px;
font-weight: bold;
a{
color: #f36;
text-decoration: none;
&:hover{
color: #63f;
text-decoration: underline;
}
}
}
p{
font-size: 12px;
}
}

// 在Less中嵌套书写中有没有&区别，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素
#special{
&.fr{
float: right;
}
.green{
color: green;
}
}

css输出：

#nested {
display: inline;
float: left;
}
#nested h1 {
font-size: 26px;
font-weight: bold;
}
#nested h1 a {
color: #f36;
text-decoration: none;
}
#nested h1 a:hover {
color: #63f;
text-decoration: underline;
}
#nested p {
font-size: 12px;
}
#special.fr {
float: right;
}
#special .green {
color: green;
}

4、Functions & Operations

less编译：

// Operations主要是针对任何数字、颜色、变量的操作，可以对其是行加、减、、乘、除或者更复杂的综合运算
// Functions主要是针对Color funtions，Less提供了多种变换颜色的功能
@base: 5%;
@filter: @base*2;
.nested p{
color: #888 / 2;
height: 100% / 2 + @filter;
}

@var: 1px + 1;          //“@var: 1px + 1”，Less最终解析的值是“2px”
.p2{
clear: both;
border: @var solid black;
width: @var + 60 *3;
height: (@var + 10) *4;
}

@num: 20px;
.p3{
background: #fff;
width: @num + 60 *3;
height: (@num + 10) *4;
}

css输出：

.nested p {
color: #444444;
height: 60%;
}
.p2 {
clear: both;
border: 2px solid #000000;
width: 182px;
height: 48px;
}
.p3 {
background: #fff;
width: 200px;
height: 120px;
}

5、命名空间——Namespaces

less编译：

#namespace{
.button(){
display: inline-block;
padding: 5px 10px;
border: 1px solid #000;
color: blue;
background: #ddd;
text-decoration: none;
&:hover{
background: #fff;
}
}
}
.button1 a {
#namespace > .button;
color: orange;
}

.button{
#namespace > .button;
cursor: pointer;
}

css输出：

.button1 a {
display: inline-block;
padding: 5px 10px;
border: 1px solid #000;
color: blue;
background: #ddd;
text-decoration: none;
color: orange;
}
.button1 a:hover {
background: #fff;
}
.button {
display: inline-block;
padding: 5px 10px;
border: 1px solid #000;
color: blue;
background: #ddd;
text-decoration: none;
cursor: pointer;
}
.button:hover {
background: #fff;
}

6、变量范围——Scope

less编译：

@color01: red;
.scope{
margin-top: 10px;
border-top: 1px solid #333;
@color01: green;
h3{
color: @color01;
}
}
.scope li{
color: @color01;
}

css输出：

.scope {
margin-top: 10px;
border-top: 1px solid #333;
}
.scope h3 {
color: #008000;
}
.scope li {
color: #ff0000;
}

7、extend是一个Less伪类，它会合并它所在的选择其和它所匹配的引用。类似继承

less编译：

.extend li{
margin: 10px 0;
background: #ccc;
&:extend(.inline);
}
.inline{
color: blue;
}

css输出：

.extend li {
margin: 10px 0;
background: #ccc;
}
.inline,
.extend li {
color: blue;
}

未完待续......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航