码迷，mamicode.com
首页 > 其他好文 > 详细

less学习：基础语法总结

时间：2017-01-09 18:58:59      阅读：226      评论：0      收藏：0      [点我收藏+]

标签：tip   generate   zab   imp   img   size   weight   通过   目的   

一、 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;

.@{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-@{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/

less学习：基础语法总结

标签：tip   generate   zab   imp   img   size   weight   通过   目的   

原文地址：http://www.cnblogs.com/caojiayan/p/6265897.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！