less的解析笔记

Less是一种动态的样式语言。Less扩展了CSS的动态行为,比如说,设置变量(Variables)、混合书写模式(mixins)、操作(operations)和功能(functions)等等,最棒的是,Less使用了现有的CSS语法,也就是说,你可以直接把你现成的样式文件“style.css”直接改成“style.less”,他也能正常工作。

Less现在可以在客户端(如:IE+,Webkit,Firefox)和服务器(如node.js)上运行。前面也说过Less是CSS的一种扩展,他不但向后兼容,而且在现有的CSS语法基础上增加许多额外的功能。如果你具有一定的CSS语法基础,学习Less将是一件轻而易举的事情,那么我们现在就开始吧。

一.如何引用Less

要成功的使用Less,需要一个脚本的支持,这个脚本我们把他叫做less.js。大家可以在点击这里下载这个less脚本,并放到你的项目中。下载好以后我们需要把less.js引用到文件中,引用方式很简单:

<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less.js" type="text/javascript"></script>    //先后顺序不能更改

二.Less包含些什么?

Less具体有哪些东东呢?其实这个问题我在前面早就有说过,Less要CSS语法的基础上进行了扩展,主要包含:Variables,Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等,下面我们就针对这几个部分,更好帮助我们了解和深入的学习Less。

1、变量——Variables

Less中的变量充许你在样式中的某个地方对常用的值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以达到改变全局的效果,我们先来看一段代码:

Less Code

/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
   color: @color;
 }
h2 {
  color: @color;
}

编译完成的css代码

/*======= Less 编译成 css ======*/
#header {color: #4d926f;}
h2 {color: #4d926f;}
                            

Less中的变量还具有计算功能,如:

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}

编译完成的css代码

#header {color: #6c94be;}

我们还可以定义一个变量名为变量,如

@color: #253636;
@highlight: "color";
#header {color: @@highlight;}

编译成css代码

#header {color: #253636;}

注:在Less中的变量实际上就是一个“常量”,因为它们只能被定义一次。如:

@color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @@highlight;}

编译成css代码

#header {color: #ff3636;}

上面代码很明显说明了后的@color覆盖了前面的@color。

2、混入——Mixins

混入其实就是一种嵌套,它充许你将一个类嵌入到另一个类中,而被嵌入的这个类也称为是一个变量。换句话说,你可以用一个类定义CSS,然后把整个为当作一个变量来使用,嵌入到另一人类中当作他的属性;另外混入也像一个带有参数的functions,如下的例子:

/*========= 定义一个类 ===========*/
.roundedCorners(@radius:5px) {
         -moz-border-radius: @radius;
         -webkit-border-radius: @radius;
          border-radius: @radius;
}
/*========== 定义的类应用到另个一个类中 ===========*/
#header {
        .roundedCorners;
}
#footer {
        .roundedCorners(10px);
}

编译成的css代码

#header {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
}
#footer {
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
}
            

注:这样任何CSS的类或ID下的样式都可以当作变量,使用混入模式用来当作另一个元素的属性值。

混入(Mixin)有一个名词叫“混入参数(Parametric Mixins)”,上面也说过。Less具有一个特殊类型的规则集,那就是一个类可以当作另一个元素的属生值,并且还可以接受其自己的参数,我们来看一个典型的实例:

/*========== 定义一个规则,并且不设置默认参数值============*/
.borderRadius(@radius){
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
        border-radius: @radius;
}
/*============ 应用到元素中 ============*/
#header {
     .borderRadius(10px); /*把10px传给变量@radius*/
  }
.btn {
    .borderRadius(3px);/*把3px传给变量@radius*/
}
           

编译成css的代码

#header {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
}

.btn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
            

我们还可以给Mixins的参数定义一个默认值,如

.borderRadius(@radius:5px){
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
        border-radius: @radius;
}

.btn {
    .borderRadius;
}

编译成的css代码

.btn {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

还有一种方法就是给Mixins不写任何参数,特别是在你想隐藏输出的CSS规则,但又想在别的规则中包含他的属性,使用这种不带参数的Mixins将非常有用的,我们来看一段代码:

.wrap(){
        text-wrap: wrap;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
}
pre {
    .wrap;
}

编译成css的代码

pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

Mixins还有一个重要的变量:@arguments。@arguments在Mixins中具是一个很特别的参数,当Mixins引用这个参数时,他将表示所有的变量,当你不想处理个别的参数时,这个将很有用,我们来看一个阴影的实例:

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
        -moz-box-shadow: @arguments;
        -webkit-box-shadow: @arguments;
        box-shadow: @arguments;
}

#header {
        .boxShadow(2px,2px,3px,#f36);
}

编译成css的代码

#header {
        -moz-box-shadow: 2px 2px 3px #FF36;
        -webkit-box-shadow: 2px 2px 3px #FF36;
        box-shadow: 2px 2px 3px #FF36;
}

3、嵌套规则——Nested Rules

嵌套规则主要是针对一多层元素的样式规则写法,以前我们在多层元素中写样式,要么从头选下来,要么另外给这个元素加上类名或id名,但在Less中我们不需要这样操作了,我们只要使用他的嵌套规则就可以完成,我们来看一个简单的实例:

Html

<div id="header">
        <h1><a href="">W3cplus</a></h1>
        <p>记述前端那些事——引领Web前沿</p>
</div>

less

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

编译成的css代码

#header { display: inline; float: left;}
#header h1 {  font-size: 26px; font-weight: bold;}
#header h1 a {  color: #FF3366;  text-decoration: none;}
#header h1 a:hover { color: #6633FF;  text-decoration: underline;}
#header p {  font-size: 12px;}    

使用Less的嵌套规则让你的CSS代码更简洁,因为他的写法就是模仿HTML的DOM结构来写的。

从上在的实例代码中,都很清楚的了解到,嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码,从而减了选择器的层级关系,更主要的是这样使用我们的代码更简洁,更具有阅读性,这种嵌套规则对我们操作伪元素更为方便和重要,如:hover,:link,:focus等,他的写法是:

a {
    color: red;
    text-decoration: none;
    &:hover {
    color: blue;
    text-decoration: underline;
            }
}

编译成的css代码

a {color: red;text-decoration: none;}
a:hover {color: blue;text-decoration: underline;}

大家注意了,这里的&很重要,在Less中嵌套书写中有没有&区别是完全不一样的效果,有&时解析的是同一个元素或此元素的伪类,没有&解析是后代元素,我们一起来看一段代码:

#header {
        &.fl{
            float: left;
        }
        .mln {
            margin-left: 0;
        }
}

编译成的css

#header.fl{float: left;}
#header .mln {margin-left: 0;}

4、函数和运算 Functions & Operations

这两个功能很有意思的。在我们平时的样式中,有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这方面的功能,首先来看Operations(直译“动作”)他可以让你对元素的属性值,颜色进行四则运算:加、减、乘、除。而Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例:

@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
        color: @base-color *3;
        border: 1px solid desaturate(@red,100%);
        border-width: @the-border @the-border*2 @the-border*3 @the-border;
        border-color:desaturate(@red,100%) @red lighten(@red, 10%)    darken(@red, 30%);
}
            

编译成的css

#header {color: #333;border: 1px solid #4a4a4a;border-width: 1px 2px 3px 1px;border-color: #4A4A4A #842210 #B12E16 #000000;}

这里提出一点,Less中的Operations主要是针对任何数字、颜色、变量的操作,可以对其是行加、减、、乘、除或者更复杂的综合运算;而Functions主要是针对Color funtions,Less提供了多种变换颜色的功能,下面多们来俱体看一下这两个功能的使用。

先来看运算的使用

@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
        color: #888 / 4;
        height: 100% / 2 + @filler;
}

编译成css

#header {  color: #222222; height: 60%;}
            

上面是一些简单的四则运算,他们都是在同一单位下进行操作,现在我们一起来看一个不同单位的操作

@var: 1px + 5;
#header {
        border: @var solid red;
}
            
#header {   border: 6px solid red;}

上面的代码直接反应出了,“@var: 1px + 5”,Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样,使用括号“()”来改变其运算的先后顺序,如:

@var: 20px;
#header {
        width: @var + 5 * 2;
        height: (@var + 5 ) * 2;
}

编译成css

#header {  height: 50px;  width: 30px;}
                        

从结果中我们很明显的得出他们的区别

@var: 20px;
#header {
        width: @var + 5 * 2;/* 先计算了5 * 2 = 10 然后在计算了 @var + 10 = 30px,其实就是"@var+(5*2)"*/
        height: (@var + 5 ) * 2;/*先计算了(@var + 5) = 25px,然后在计算了25*2=50px,因为括号更具有优先权,小学数学题*/
}

Less中还提供了一个Color Functions,他具有多种变换颜色的功能,先把颜色转换成HSL色,然后在此基础上进行操作,具体包括以下几种:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

 使用这种functions方法很简单:如

@base: #f04615;
#header {
        color: @base;
        background-color: fadein(@base, 10%);
h1 {
        color: lighten(@base,20%);
        background-color: lighten(fadeout(@base,20%),5%);
        a {
        color: darken(@base,50%);
        background-color: spin(@base,10);
        &:hover {
            color: saturate(@base,30%);
            background-color: fadein(spin(@base,-5),20%);
                                }
                            }
                        }
        p {
                            color: desaturate(@base,60%);
                        }
}    

编译成css

                 #header { background-color: #F04615;
                          color: #F04615;
                    }
                    #header h1 {
                        background-color: rgba(242, 89, 45, 0.8);
                        color: #F69275;
                    }
                    #header h1 a {
                        background-color: #F06B15;
                        color: #060200;
                    }
                    #header h1 a:hover {
                        background-color: #F03415;
                        color: #FF3E06;
                    }
                    #header p {
                        color: #A56F60;
                    }
                

 大家还可以通过这样的方式提取颜色值

hue(@color);        // returns the `hue` channel of @color
 saturation(@color); // returns the `saturation` channel of @color
  lightness(@color);  // returns the ‘lightness‘ channel of @color

下面我们来看一下如何取得他的颜色:

@color: #f36;
#header {
        background-color: hsl(hue(@color),45%,90%);
}
                

编译成css

#header {   background-color: #F1DAE0;}

5、命名空间——Namespaces

有时候你想把一些变量或mixins组织起来,并将他封装,想用的时候就把要关的一部分取出来,那么我们将在前面的mixins基础上将其功能扩展,比如说我们有一个这样的库:

#bundle {
         .button () {
                        display: block;
                        border: 1px solid black;
                        background-color: grey;
                        &:hover { background-color: white }
                  }
         .tab { ... }
         .citation { ... }
}

现在在实际操作中,我们header中的a样式和.button一样,那么我们就可以这样操作

#header a {
            color: orange;
             #bundle > .button;
}

换过一种思维来说,如果页面上有几个部分的样是完全一样的,或者只是部分不同,我们就可以这样来写,就如上面的代码,#bundle可是以web页面中已存在的元素,然后#header中的a元素和#bundle中的.button样式是一样的,那么我们就可以把#bundle中 .button的所有样式引用到#header中的a元素上。

6、变量范围——Scope

Less中的变量和别的程序语言一样,他的变量也有一个范围概念,这个概念就有点像局部变量和全局变量一样,只是在Less中采取的是就近原则,换句话说,元素先找本身有没有这个变量存在,如果本身存在,就取本身中的变量,如果本身不存在,就寻找父元素,依此类推,直到寻找到相对应的变量,我们来看个简单的实例:

@var: red;

#page {
          @var: white;
        #header {
                     color: @var; // white
                 }
}

#footer {
        color: @var; // red
}
                

7、Less的注解——Comments

Less中的注解有两种方式,单行注解很像js中,Less中的多行注解和使用css中的一样,如:

// 注释
/* 注释 */
.class { color: white }

当然单行注解也可以使用css的方式注解,本人更强调使用css中的注解方式

8、客户端的使用——Client-side usage

客户端的使用其实好简单,我们最开始引用的就是客户端的使用方法,使用这种方法前提条件是需要一个less.js的脚本支持,大家可以先到点击下载less.js然后把他引用到页面的head中,如下所示:

<script src="less.js" type="text/javascript"></script>    

其中src所指定的路径是项目中的相对路径,当然你也可以把这个js放到你认为安全可用的服务器上,换成绝对路径也是可以的。接着我们就需要把less文件引进到项目中,这个引入的方式和css方式是一样的,只是有一点点不同,css中的是“rel="stylesheet"”而less的却是“rel="stylesheet/less"”,请看下面的代码:

<link rel="stylesheet/less" type="text/css" href="styles.less">

特别强调一点,客户端使用Less,一定要注意,“Less样式文件一定要放在less脚本文件之前”

正确的引入方式:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>    
以上在分了八个部分介绍了Less,其实Less不只包含这些东西,他还包括了“服务器端的使用”,“导入文件和变量”,“字符串插值”等,由于这几个部分相对而言较少使用,加上我自己没有完全理解,特意截下这几个部分不做陈述,如果大家相完全了解或者更清楚的学习他,大家可以可击到他的官网。

注明出处:W3CPLUS

 

时间: 2024-10-15 02:30:14

less的解析笔记的相关文章

MFC画图程序解析笔记一

这是 //if not define的简写,是宏定义的一种,它可以根据是否已经定义了一个变量来进行分支选择,一般用于调试等等.实际上确切的说这应该是预处理功能中三种(宏定义,文件包含和条件编译)中的一种----条件编译. 目录 1定义 2内容 3作用 4形式 1定义编辑 #define x ... #endif C语言在对程序进行编译时,会先根据预处理命令进行"预处理".C语言编译系统包括预处理,编译和链接等部分. #ifndef x //先测试x是否被宏定义过 #define x 程

json解析笔记

就算 我把 一个对象的 属性 设置 为 "", 空字符串,但如果服务端返回的数据 ShareForUser [wid=1953319, SSID=WPS-Dongle, BSSID=00:12:5F:09:5E:84, addr=福建省厦门市思明区望海路31, wifiType=0, wifiAlias=null] 中 为null,那么 wifiAlias 为 null, 如果 打印没有try catch 的话,会直接崩溃 json解析笔记,码迷,mamicode.com

XML和JSON解析笔记

XML -> 1. sax  2.Dom JSON解析  在IOS5.0以后提供NSJSON  在5.0之前用SBJSON和JSONKit 本讲内容 1.解析的基本概念 2.XML数据结构 3.JSON数据结构 4.两种数据结构的优缺点 解析: 从事先规定好的格式中提取数据 解析的前提: 提前约定好格式, 数据提供方按照格式提供数据,数据获取方则按照格式获取数据 XML基本概念 可扩展标记语言 功能: 数据交换 Web服务  内容管理 XML数据结构的语法 一对尖括号代表一个节点,或者标签 只有

Json,Gson,FastJson解析笔记

Json 1.将JavaBean转换成Json对象: [java]  view plain  copy public static String CreatJsonFromObject(Object key,Object value) { JSONObject JObj =new JSONObject(); JObj.put(key, value); return JObj.toString(); } 2.解析Json: [html]  view plain  copy public stati

XML概念,约束文档,解析 笔记

XML的学习: 1.XML简介及语法: 2.XML的约束: DTD Schema 3.XML的解析:(*****重点) XML: What:eXtensible Markup Language(可扩展的标记语言.) <dog></dog> * HTML:超文本标记语言. 标记语言 :都会有一些标签.<html></html> <p></p> Why: * 用来处理大量有关系的数据. Where: * 用来作为软件的配置文件(SSH--

JSON 数据解析笔记

网上的酱油贴太多,自己调试了下,总结下JSON字符串的解析. 比如以下这个JSON数据字符串: String jsonString="[{\"A1\":1,\"A2\":2,\"AList\":[{\"AA1\":\"aa1\",\"AA2\":\"aa2\"},{\"AB1\":\"ab1\",\"AB2\

云图详细解析笔记

说明:本文是参看大牛代码后总结的笔记,不清楚的地方可参看大牛源码 大牛源码地址:https://www.zhihu.com/question/28975391/answer/100796070 生成云图的主要函数为: WordCloud方法里面的generate函数 eg: my_wordcloud=WordCloud().generate(txt) txt:将要显示的文字 WordCloud():wordcloud方法,里面的参数可以配置 eg: wordcloud = WordCloud(f

XML文件的创建和解析笔记

解析XML的四种方法 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object Model),DTD(Document Type Definition),SAX(Simple API for XML),XSD(Xml Schema Definition),XSLT(Extensible Stylesheet Languag

设计模式解析笔记-第一章

传统的软件分析方法:功能分解.分析人员将问题分解成了多个功能 ” 功能分解 “ 这种方法就称为步骤(这些步骤就构成了这个问题). 功能分解方法的缺点:1.它通常会导致让一个主程序负责控制子程序,这是将功能分解为多个子功能的自然结果.但是,主程序所承受的任务太多了:要确保一切正确工作,还要协调各函数并控制它们的先后顺序. 2.功能分解方法的另一个问题在于,它在为未来可能出现的变化未雨绸缪方面,在对代码合适的改进方面,都无能为力.函数要关注的细节是否太多了,比如要实现的逻辑.要交互的东西.要使用的数