Less 学习笔记

Less是一种动态样式语言

特性

  1. LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数.

  2. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

（1）客户端运行

在HTML页面中加载.less加载less.js,得到css,浏览器才可以显示，效率低

（2）服务器运行

借助第三方工具 koala

构建工具 gulp webpack

node.js 来执行

变量

less通过@来定义变量；如：@color:#ccc;

不仅可以用变量来管理属性值，也可以用在选择器名称，属性名，URL以及@import语句中；

1.选择器变量

less:

//定义了一个选择器变量
 @mySelector:myName;
   .@{mySelector}{
   width: 100px;
   height:100px;
   color:red;
 }

编译后的css:

  .myName {
    width: 100px;
    height: 100px;
    color: red;
  }

2.URL变量

less:

  @img:'image';

应用:

 .myimg{
      width:100px;  
      height: 100px;    
      background: url('@{img}/1.jpg') no-repeat;    
 }

编译后的css:

  .myimg {  
    width: 100px;   
    height: 100px;
    background: url('image/1.jpg') no-repeat; 
  }

3.属性变量

less:

  @property:color;
  .mydiv{
    width: 100px;  
    height:100px;  
    @{property}:#eee ; 
  }

编译后的css:

  .mydiv {
    width: 100px;    
    height: 100px;   
    color: #eee ;   
  }

混合(mixins)

类似于函数。混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承 class A中的所有属性。

我们还可以带参数地调用，就像 使用函数一样。

(1)无参

less:

  //定义一个color类
  .color{
    color:#eee;
    background-color:#f00;
  }

应用:

.myBox{
    width:100px;
    height:100px; 
    .color;
  }

编译后的css:

  .color {
    color: #eee;    
    background-color: #f00;    
  }

  .myBox {
    width: 100px;
    height: 100px;  
    color: #eee;
    background-color: #f00;   
  }

(2) 有参

less:

  //定义一个color类
  .color (@color:#eee){  
    color:@color;   
    background-color:#f00;   
  }

应用:

  .myBox1{ 
    width:100px;  
    height:100px;   
    .color();//不传参时，即用默认的参数；
    .color(#0f0);//传入参数的情况
  }

编译后的css:

  .myBox1 {
    width: 100px;
    height: 100px;   
    color: #eee;
    color: #0f0; 
    background-color: #f00; 
  }

有时候我们会看到如下的用法

  .color () {
      color:#eee;
  }

当你希望.color()不出现在css里，且有不能引用其它类的时候，就可以这样子写。

(3)在媒体查询里的嵌套写法稍有区别

less:

  //媒体查询
  .screencolor{ 
    @media screen { 
      color:blue;
      @media (min-width: 768px) {
        color: red;
      }
    }
    @media tv {
      color: black;
    }
  }

编译后的css:

  @media screen {
    .screencolor { 
      color: blue; 
    }
  }

  @media screen and (min-width: 768px) {  
    .screencolor { 
      color: red;      
    }    
  }
  @media tv {  
    .screencolor {  
      color: black;      
    }   
  }

匹配模式

匹配模式的写法类似于混合。它的作用类似于if语句。

less:

  .mixin(dark,@color) {
    color: darken(@color, 15%); 
  }
  
  .mixin(light,@color) {
    color: lighten(@color, 15%); 
  }

  //下面代码的作用是，不管匹配上面哪种模式，下面样式都会加进去。注意：第一个参数一定是@_，后面的每个参数都要加上
  .mixin(@_,@color) {
    width:100px;  
    height:100px;
  }

  .line {
    .mixin(dark,#FF0000);  
  }

编译后的css:

  .line {
    color: #b30000;
    width: 100px; 
    height: 100px; 
  }

嵌套

  1. 在一个选择器中嵌套另一个选择器来实现继承；（&表示当前选择器的父选择器）

  2. 媒体查询和嵌套媒体查询

less:

 ul{
   width: 100px; 
   li{ 
     background:green;   
     a{  
       color: red;      
       &:hover{       
         color: blue;      
       }  
    }  
   }
 }

编译后的css:

 ul {
   width: 100px;  
 }

 ul li {
   background: green;
 }
 
 ul li a {
   color: red; 
 }

 ul li a:hover {
   color: blue;
 }

运算

任何数值，颜色和变量都可以进行运算；less可以进行加、减、乘、除的运算；

less：

 @base: 5%;
 @base-color:#eee;
 @filler: @base * 2;
 @other: @base + @filler;
 .myBox3{
   color: #888 / 4;
   background-color: @base-color + #111;
   height: 100% / 2 + @filler;
 }

编译后的css:

 .myBox3 {
   color: #222222;
   background-color: #ffffff;
   height: 60%;
 }

函数

less提供了内置的函数，详情请参考 http://lesscss.cn/functions/#functions-overview

命名空间和访问器

有时候，出于组织的目的，或者为了提供一些封装，你会希望将你的混合模块(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;
}

需要注意的是命名空间内声明的变量将只作用于该命名空间，你会用它来引用一个mixin (#Namespace > .mixin-name)。
但你不能这么做： (#Namespace > @this-will-not-work)。

作用域

less 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

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

arguments变量

arguments变量包含了全部的传进来的参数。如果不想一个参数一个参数的写，那么可以用arguments参数。

less:

 .border(@w:10px,@c:red,@xx:solid) {
     border:@arguments;
 }

 div{
     .border(20px);
 }

编译后的css:

 div {
   border: 20px red solid;
 }

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

less:

 .class {
   filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
 }

编译后的css:

 .class {
   filter: ms:alwaysHasItsOwnSyntax.For.Stuff();   
 }

！important关键字

类似于css ！important关键字。(优先选择)

扩展

extend是一个less伪类，它会合并它所在的选择其和它所匹配的引用。

less:

 nav ul{
   &:extend(.inline);  
   background:blue;  
 }
 .inline{
   color:red;  
 }

编译后的css:

 nav ul {
   background: blue;
 }

 .inline,nav ul {
   color: red;
 }

注释

/*会编译为css注释*/

//编译成css的时候自动过滤掉

文件引入

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带

  @import "lib.less";

或

  @import "lib";

如果你想导入一个css文件而且不想less对它进行处理，只需要使用.css后缀就可以:

 @import "lib.css";

这样LESS就会跳过它不去处理它。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,186评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,858评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,620评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,888评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,009评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,149评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,204评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,956评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,385评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,544评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,185评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2赞 351