LESS学习笔记（上）

来源：互联网发布：手持终端数据采集器编辑：程序博客网时间：2024/06/11 23:47

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;}

未完待续......

0 0