less学习：基础语法总结

一、 less是什么

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

注意1）：less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。也就是说：实际项目中，我们编辑的是.less文件，但引用时依旧像往常一样引用.css文件。通过第三方工具（例如Koala），可以实现.less文件一发生改变，就生成同名的.css文件。

注意2）：LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。

例子如下：

1）.less文件显示：

 @base: #f938ab;/*定义变量*/
.box {
  color: @base;
 /*使用函数*/
  border-color: lighten(@base, 30%);
  /*嵌套*/
  &-content{
    width:100%;
  }
  .title{
    color:#ccc;
  }
}

通过第三方工具（例如Koala），翻译成的css样式如下：

2）.css文件显示：

.box {
  color: #f938ab;
  border-color: #fdcdea;
}
.box-content {
  width: 100%;
}
.box .title {
  color: #ccc;
}

二、less的语言特性

1、变量

注意，由于变量只能定义一次，其本质就是“常量”；

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

编译为：

#header {
  color: #6c94be;
}

变量代换 ：如选择器名称，属性名称，URL和@import

1）：选择器

@mySelector: banner;

[email protected]{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;

编译为：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

2）：网址

@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

3）：import语句： @import "@{themes}/tidal-wave.less";

import语句它可以保存一个路径的变量。这是非常有用的，当你参考一个共同的父目录。

例子：演示了如何在 import 语句使用变量：

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>LESS Variables in Import Statements</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to Yiibai Yiibai</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>

接下来，创建文件 style.less。

@path : "http://www.yiibai.com/less";
@import "@{path}/external1.less";
.myclass{
 color : #A52A2A;
}

从下面码的路径 http://www.yiibai.com/less/external1.less 导入所述 external.less 文件到 style.less 文件：

external1.less

.myclass{
background: #C0C0C0;
}

你可以编译 style.less 使用下面的命令来生成 style.css 文件：

lessc style.less style.css

接着执行上面的命令，它会自动创建 style.css文件，下面的代码：

style.css

body {
  background: #C0C0C0;
}
p {
  color: #A52A2A;
}
输出的结果如下：
  • 保存上述的HTML代码在 less_variables_interpolation_import.html 文件。
  • 在浏览器中打开该HTML文件，得到如下输出显示。

4）属性

@property: color;

.widget {
  @{property}: #0ee;
  background[email protected]{property}: #999;
}

编译后：

.widget {
  color: #0ee;
  background-color: #999;
}

5）变量名：可以用一个变量名定义变量

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

编译后：

content: "I am fnord.";

2、混合（Mixin）：混合是包括从一个规则集到另一个规则集（“在混合”），一堆属性的一种方式。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

我们要使用内的其他规则集这些属性。好了，我们只是在我们想要的属性，像这样的类名下降：

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

属性.bordered类现在会出现在两个#menu a和.post a。（请注意，您也可以使用#ids如混入。）

1）带参数的mixin :混合也可以使用参数，这是变量传递给选择块

例子：

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

下面是能组合成的不同的规则集：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

2）参数混合也可以有默认值的参数：

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

我们可以调用它的默认值：

#header {
  .border-radius;
}//输出：它将包括为5px边界半径。

3）也可以使用不带参数的参数混入。

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

pre { .wrap }

编译后：

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

4）混合多参数：参数或者是分号或逗号分隔。建议使用分号。

  • 两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)，
  • 三个参数，每个包含一个数字：.name(1, 2, 3)，
  • 使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表：.name(1, 2, 3;)，
  • 逗号分隔的默认值：.name(@param1: red, blue;)。
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

编译后：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

5）命名参数：任何参数都可以通过其名称来引用，它们不必是任何特殊的顺序

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

编译后：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

6）@arguments变量：@arguments有内混入特殊的意义，它包含传递的所有参数

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

编译后：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

3、嵌套规则

例子如下：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

可以进行嵌套成如下的写法：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

由此产生的代码更简洁，模仿你的HTML的结构。

也可以捆绑伪元素使用这种方法，改写为一个mixin（&表示当前选择的父）：

.clearfix {
  display: block;
  zoom: 1;
//捆绑伪元素
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4、运算：任何数字、颜色或者变量都可以参与运算。

例子1：@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base - color + #111;
height: 100% / 2 + @filler;

例子2：@var: 1px + 5;//最终输出是 6px

5、函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

例子：如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

编译为：

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

1）作为函数使用的Mixin

例子1：

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

编译后：

.caller {
  width:  100%;
  height: 200px;
}

例子2：

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px);
  padding: @average;
}

编译后：

div {
  padding: 33px;
}

2）Mixin Guards的用法：常用的条件运算符：>、>=、<、<=、=；我们设定的条件还可以使用IS函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

    //->LESS代码
    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }

    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }

    .box1{
      .mixin(#ddd);
    }

    .box2{
      .mixin(#555);
    }

    //->编译为CSS的结果
    .box1 {
        background-color: black;
    }

    .box2 {

when是在设置条件，除了像上面的写法外，我们还可以通过when设置多个条件，而且条件中可以使用is函数。

    //->LESS代码:使用IS函数
    .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    //->LESS代码:多条件，可以使用and或者逗号间隔
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

我们还可以通过与&特性结合实现‘if‘类型的语句。

    //->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色
    @my-option: true;
    & when (@my-option = true) {
      .box {
        color: white;
      }

3)Loops ，当一个混合递归调用自己，再结合Guard条件表达式，就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS：

    //->LESS代码
    .generate-columns(4);
    .generate-columns(@n, @i: 1) when (@i <= @n) {
      .column-@{i} {
        width: (@i * 100% / @n);
      }
      .generate-columns(@n, (@i + 1));
    }

    //->输出的CSS
    .column-1 {
        width: 25%;
    }

    .column-2 {
        width: 50%;
    }

    .column-3 {
        width: 75%;
    }

    .column-4 {

4）Merge ：Merge特性可以从多个属性中将值，集合到某一个样式属性的列表中（也就是多样式效果）。在编写的时候，+代表以逗号分隔，+_代表多个之前以空格分隔。

    //->LESS代码
    .mixin() {
      box-shadow+: inset 0 0 10px #555;
    }

    .myclass {
      .mixin;
      box-shadow+: 0 0 20px black;
    }

    .mixin2() {
      transform+_: scale(2);
    }

    .myclass2 {
      .mixin2;
      transform+_: rotate(45deg);
    }

    //->输出的CSS
    .myclass {
        box-shadow: inset 0 0 10px #555, 0 0 20px black;
    }

    .myclass2 {

6、命名空间和访问器

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
例子：

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

/*下面复用上面的一部分代码*/
#header a {
  color: orange;
  #bundle > .button;
}

编译生成：

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

/*下面复用上面的一部分代码*/
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

LESS中的命名空间，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。

7、作用域

子类里面的优先，找不到才往父类里找。

例子：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // 这里值是white
  }
}

也不会因为变量后面定义而影响作用域：

@var: red;

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

和上面的例子是一样的。

8、注释

css仅支持块注释。less里块注释和行注释都可以使用：

/* 一个注释块
style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;
9、导入

和css一样，你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";

1）Import Directives ：从其他样式表中导入样式。

    //->LESS代码
    @import "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->输出的CSS:会把public中的样式也输出
    .clear {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

我们发现上述的操作虽然实现了调取使用，但是会把public中的less也编译到了自己的这个css中，如果不想编译的话，我们需要配置一些参数：

    //->LESS代码
    @import (reference) "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->输出的CSS:
    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

除了reference以外我们还可以配置一些其他的参数值： inline：在输出中包含源文件但不加工它 less：将文件作为Less文件对象，无论是什么文件扩展名 css：将文件作为CSS文件对象，无论是什么文件扩展名 once：只包含文件一次（默认行为） multiple：包含文件多次

具体参考：http://lesscss.cn/

时间： 2024-07-28 13:23:50

less学习：基础语法总结的相关文章

VBA 开发学习--基础语法2

VBA中的运算符 算数运算符及其作用 + 求两个数的和 -  求两个数的差:求一个数的相反数 *  求两个数的积 /   求两个数的商(保留小数位   5/2=2.5) \   整除 (保留整数位  5\2=2) ^  指数运算(5^3=5*5*5=125) Mod  两数相除取余数  12 Mod 9=3 比较运算符 =   等于 <   小于 > 大于 <= 小于或等于 >= 大于或等于 <> 不等于 IS  比较两个对象的引用变量 Like   比较两个字符串是否

.bat学习-基础语法

一般来说,脚本或者语言都有相同地方 定义变量,输入,输出,判断条件等等.知道的相同之处,我们就可以借助强大的搜索引擎进行查找我们想要知道的东西. bat为批处理脚本BATCH.现在只知道是使用于windows操作系统用来执行操作的批处理脚本 基础之前setlocal和endlocal 在一个bat文件内定义变量之前,一定要文件头部调用一个命令 setlocal 设置临时改变系统变量,,这样我们定义或修改变量,只对本bat文件有效. 我们获取到的系统环境变量如PATH,或者JAVA_HOME只是系

Mysql学习基础语法

-- Mysql  数 据 库 语 法 创建数据库 create database 数据库名; 创建表 create table 表名(id int,name varchar(20)    ); 复制表和数据 create table 复制后新的表名 select * from 旧表名: 复制表的结构 create table 复制后新的表名 select * from where 1=0 : 创建索引 create index 索引名 on 表名(列名): 创建视图 create view 视

python学习-基础语法

1.常量/变量 常量:一旦赋值不可改变,不能重新赋值.python不存在常量. 字面常量:一个单独出现的量,未赋值给任何变量或常量. 变量:是一个名字,在赋值符号的左边.这个名字可以指代赋值符号右边的内容. i = 3 除行首的空格,其它地方空格无意义. 变量的基本类型 int:理论上无长度限制 float:可能会损失精读 bool:True/False None:None python是强类型语言:不同类型之间不能相互计算 python是动态类型语言:变量可以重新赋值为其它类型 2.运算符 算

python2学习------基础语法

1.变量类型 Numbers(数字):int,float,long String(字符串) List(列表) tuple(元组) dict(字典) bool(布尔):True,False # 删除变量  del 变量名; 2.常用函数 <1> 输出信息 print 输出信息; <2> 交互 raw_input('请输入内容'); <3> 类型转换 int(x [,base]) 将x转换为一个整数 long(x [,base] ) 将x转换为一个长整数 float(x)

python2学习------基础语法2（函数）

1.函数 # 无参数函数 def loopTest2(): a=1; while a<40: print a; a=a+1; if a==35: continue; else: print 'over'; loopTest2(); # 有参数函数 def loopTest1(a): for i in xrange(a): print i; i=i+1; else: print "over"; loopTest1(10); # 有参函数,有返回值 def givenParamete

python2学习------基础语法2（类、类的继承、类成员函数、防御式编程）

1.类的定义以及实例化 # 类定义 class p: """ this is a basic class """ def __init__(self): # 类成员函数需要传入self关键字 """ this is a init function of basic class """ print "this is a init function ... "; def

Scala学习 -- 基础语法

一.变量 1.三种变量修饰符 val 定义 immutable variable(不修改 常量) var 定义 immutable variable(可修改 变量)   lazy val (惰性赋值的常量):不直接算出结果,在系统第一次调用 lazy val 的时候计算结果 scala> val d = 12 d: Int = 12 scala> val e = 20 e: Int = 20 scala> lazy val f = d * e f: Int = <lazy>

Python学习的个人笔记（基础语法）

Python学习的个人笔记 题外话: 我是一个大二的计算机系的学生,这份python学习个人笔记是趁寒假这一周在慕课网,w3cschool,还有借鉴了一些博客,资料整理出来的,用于自己方便的时候查阅,一开始保存在word上,代码不是很好看,于是决定复制到博客里面,可能有复制过程中出错的,或者我本身在理解方面有出错的地方,希望能得到指正,谢谢  后续的内容我会继续学习…… python下载地址  www.python.org Python 分为2.7和3.3两个版本,3.3有些库不兼容,因此用2.

【JavaScript】02.基础语法学习

[JavaScript]02.基础语法学习 引言: 老农认为(老农是我对自己的昵称),学习任何一门计算机程序语言都要先从它的语法知识开始.计算机程序语言由一堆预定义的字符和书写这些字符的规则组成.这些预定义的字符在语言里面叫做关键字或者保留字,书写这些字符的规则叫做语法. 计算机语言(Computer Lnguage),是指用于人与计算机之间通讯的语言.语言分为自然语言与人工语言两大类.自然语言是人类在自身发展的过程中形成的语言,是人与人之间传递信息的媒介.人工语言指的是人们为了某种目的而自行设