文档章节

Less语法整理

爱敲代码的程序员
 爱敲代码的程序员
发布于 2017/10/10 14:51
字数 1981
阅读 517
收藏 41
点赞 2
评论 1

一,变量

基本使用

Less:

.@{selector} {
    width: 100px;
    height: 100px;
    @{property}: #000;
    background: url("@{bgImg}/test.png");

    &:after {
        display: block;
        content: @@var;
    }
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";

生成CSS:

.box {
    width: 100px;
    height: 100px;
    color: #000;
    background: url("../img/test.png");
}

.box:after {
    display: block;
    content: "你好啊";
}

字符串插值

@base-url: "http://abc.com";
background-image: url("@{base-url}/images/bg.png");

选择器插值

//Less
@name: blocked;
.@{name} {
    color: black;
}

//输出css
.blocked {
    color: black;
}

二,运算

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

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

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

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位,括号也同样允许使用,并且可以在复合属性中进行运算:

@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;

三,Mixin混合

基本使用和extend

Less:

/*不加括号显示样式,生成并集选择器组合*/
.public {
  width: 100px;
  height: 100px;
}
.public() {
  /*加括号隐藏样式,生成在调用者里,代码重复*/
  width: 100px;
  height: 100px;
}
nav:extend(.public) {
  background-color: #f00;
}
div {
  &:extend(.public);
  background-color: #00f;
}
footer {
  .public;
  background-color: #cccccc;
}

生成CSS:

/*不加括号显示样式,生成并集选择器组合*/
.public,
nav,
div {
  width: 100px;
  height: 100px;
}
nav {
  background-color: #f00;
}
div {
  background-color: #00f;
}
footer {
  /*隐藏样式,生成在调用者里,代码重复*/
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

模式匹配

Less:

.mixin (dark, @color) {
  background-color: darken(@color, 10%);
}
.mixin (light, @color) {
  background-color: lighten(@color, 10%);
}
.mixin (show) {
  display: block;
}
.mixin (hide) {
  display: none;
}

div {
  width: 100px;
  height: 100px;
  .mixin(show);
  //.mixin(hide);
  .mixin(dark,red)
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #cc0000;
}

命名空间

Less:

/*加括号隐藏了样式 .div命名空间*/
.div() {
  width: 200px;
  height: 200px;
  background-color: #000;

  div {
    width: 50px;
    height: 50px;
    background-color: #f00;
  }
  .color {
    color: skyblue;
  }
  &:hover{
    background-color: lighten(rgb(0, 0, 0), 20%);
  }
}
/*这样使用*/
nav {
  .div;
}
nav p {
  .div > .color;
}

生成CSS:

nav {
  width: 200px;
  height: 200px;
  background-color: #000;
}
nav div {
  width: 50px;
  height: 50px;
  background-color: #f00;
}
nav .color {
  color: skyblue;
}
nav:hover {
  background-color: #333333;
}
nav p {
  color: skyblue;
}

作用域

(类似于JS作用域链,一层一层网上找,找到为止)
Less:

@color: #ccc;
.box {
  @color: #eee;
  .gray {
    color: @color;
  }
}
.box2 {
  .gray {
    color: @color;
  }
}

生成CSS:

.box .gray {
  color: #eeeeee;
}
.box2 .gray {
  color: #cccccc;
}

!important

Less:

.box() {
  @color: #eee;
  background-color: #f00;
  width: 100px;
  height: 200px;
  .gray() {
    color: @color;
  }
}
nav {
  /*可以使继承到的混合集所有属性都添加!important*/
  .box !important;
  .box > .gray;
}

生成CSS:

nav {
  /*可以使继承到的混合集所有属性都添加!important*/
  background-color: #f00 !important;
  width: 100px !important;
  height: 200px !important;
  color: #eeeeee;
}

Parametric Mixins(参数混合)

Less:

/*可以设定参数,也可以同时设置默认值*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @property @duration @function @delay;
  -moz-transition: @property @duration @function @delay;
  -ms-transition: @property @duration @function @delay;
  -o-transition: @property @duration @function @delay;
  transition: @property @duration @function @delay;
}
/*等同于上式,Less中也有arguments*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
div1 {
  .transition;
}
div2 {
  .transition(@duration: 2s);
}
div3 {
  .transition(@duration: 3s;@property: width;)
}

生成CSS:

div1 {
  -webkit-transition: all 1s linear 0s;
  -moz-transition: all 1s linear 0s;
  -ms-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;
  transition: all 1s linear 0s;
}
div2 {
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}
div3 {
  -webkit-transition: width 3s linear 0s;
  -moz-transition: width 3s linear 0s;
  -ms-transition: width 3s linear 0s;
  -o-transition: width 3s linear 0s;
  transition: width 3s linear 0s;
}

Less:

.test(@width:100px;@height:100px;) {
  width: @width;   //可以不需要执行体,只为了获得返回值
  @result: (@width + @height) / 2;
}

div {
  .test;   //call the mixin
  padding: @result;  //use the return value
}

生成CSS:

div {
  width: 100px;
  padding: 100px;
}

高级参数用法与 @rest 变量

.mixin (...) {        // 接受 0-N 个参数
.mixin () {           // 不接受任何参数
.mixin (@a: 1) {      // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) {    // 接受 1-N 个参数

//此外
.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}

Mixin Guards(导引表达式/混合保护)

我们可以在mixin中设置条件;常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用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 {
        background-color: white;
    }

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) { ... 
    
    //你可以使用关键词 and 在 guard 中加入额外的条件:
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    //或者,使用关键词 not 否定条件:
    .mixin (@b) when not (@b > 0) { ... }

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


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

四,Loops(递归/循环)

在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS
Less:

/*生成栅格系统*/
@media screen and (max-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

生成CSS:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}

五,Merge(兼并)

+代表以逗号分隔,+_代表多个之前以空格分隔
Less:

.mixin(){
  /*内阴影*/
  box-shadow+: inset 0 0 10px #555;
}
.scale(@num){
  transform+_: scale(@num);
}
div{
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  .mixin;
  box-shadow+: 0 0 20px black;
  transform+_: translateX(100px);
  .scale(2);
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  /*内阴影*/
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
  transform: translateX(100px) scale(2);
}

六,Parent Selectors

Less:

.box(){
  border-color: #f00;

  top {
    /*名称写死的后代选择*/
    width: 10px;
  }
  &:hover {
    background-color: #00f;
  }
  &.current {
    /*选择当前选择器并且class为current*/
    color: red;  
  }
  &>top{
    /*名称写死的直接后代选择*/
    width: 11px;
  }
  &-top {
    /*根据选择器名称变化的直接选中*/
    background-color: #fff;
  }
  & &-top{
    /*根据选择器名称变化的后代选择*/
    width: 12px;
  }
  &>&-top{
    /*根据选择器名称变化的直接后代选择*/
    width: 13px;
  }
  &,&-top{
    /*根据选择器名称变化的并集选择*/
    height: 14px;
  }
  &-top+&-main{
    /*根据选择器名称变化的兄弟选择*/
    height: 15px;
  }
  &+&{
    /*根据选择器名称变化的兄弟选择*/
    height: 16px;
  }
}

nav {
  .box;
}

生成CSS:

nav {
  border-color: #f00;
}
nav top {
  width: 10px;
}
nav:hover {
  background-color: #00f;
}
nav.current {
  color: red;  
}
nav > top {
  width: 11px;
}
nav-top {
  background-color: #fff;
}
nav nav-top {
  width: 12px;
}
nav > nav-top {
  width: 13px;
}
nav,
nav-top {
  height: 14px;
}
nav-top + nav-main {
  height: 15px;
}
nav+nav{
  height: 16px;
}

改变选择器顺序,下面的案例中,选择器.no-border-radius &会前置插入它的父选择器.header .menu,最后变成.no-border-radius .header .menu形式输出:

//->LESS代码
.header {
  .menu {
    border-radius: 5px;
    .parent & {
      /*增加权重?*/
      background-color: #f00;
    }
  }
}

//->输出的CSS
.header .menu {
  border-radius: 5px;
}
.parent .header .menu {
  /*增加权重?*/
  background-color: #f00;
}

七,Import Directives(导入指令)

从其他样式表中导入样式。

//->LESS代码
@import "public.less";  //默认把指定文件的less也编译
@import "header.less";  //默认把指定文件的less也编译

@import (reference) "public.less";  //设置仅导入指定文件的less但不编译

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

八,注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

九,内置函数

Less函数手册

© 著作权归作者所有

共有 人打赏支持
爱敲代码的程序员
粉丝 74
博文 42
码字总数 82530
作品 0
海淀
程序员
加载中

评论(1)

s
suffrajet
总结的很好,很全面
朝花夕拾之Oracle 索引

最近在办离职,刚好有时间,把工作以来数据库方面的知识整理一下.使用心得为主,相关语法什么的网上大把,这里就不整理了.

周翔
2016/03/18
19
0
《Knockout应用开发指南》系列技术文章整理收藏

《Knockout应用开发指南》系列技术文章整理收藏 Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,Knockout应用开发指南系列整理了Knockout方面的技术文章,供学习...

开元中国2015
2015/06/22
26
0
Word 模板引擎 poi-tl V1.3.0 发布,新增模板语法

poi-tl(poi template language)是基于Apache POI的Word模板引擎,纯Java组件,跨平台,代码短小精悍。 V1.3.0版本已发布,主要更新内容为: 1. 新增模板语法{{+var}},支持多个Word文档的合...

Sayi
06/27
0
0
配置webstorm开发微信小程序

微信开发者工具虽然能编辑代码,可以实时预览,如果只用于临时调试代码是足够的,要是作为小程序的开发工具就很显得很弱鸡了,尤其是与功能强悍的webstorm对比,小程序自带的编辑器简直就是玩...

章鱼喵_
07/12
0
0
Linux常用命令分类汇总(2)

由于本篇文章整理时间比较久,篇幅比较长,博客无法一次性以一篇文章发布,其他的内容文章链接 Linux常用命令分类汇总(1) http://longlei.blog.51cto.com/12685458/1970770 Linux常用命令分...

long9617
2017/10/08
0
0
WPF依赖属性,绑定通知机制系列补充说明

依赖对象准备增加了属性元数据类型的定义,开始忘记贴了。以上代码都经过了测试,模拟是成功的。其实微软在页面中的绑定语法最终都会如模拟中那样实现。微软的做法是导入xaml文件的时候根据文...

junwong
2012/03/09
0
0
Git、Sed 工具使用简易参考文档

查看文档:http://opus.konghy.cn/ Git 已是我日常工作中经常使用的工具。即使经常使用,但有些不常用的命令还是会忘,而恰恰有时候又需要去有这些命令。如果在互联网环境下,则可以方便的查...

Konghy
2016/01/14
61
0
APICloud 语法提示插件--apicloud-autocomplete

Atom 插件: APICloud 语法提示与自动补全 支持 Mac/Windows/Linux等主流操作系统 是的,第一款同时支持三个主流操作系统的APICloud语法提示插件,现在可以在任意自己喜欢的系统上愉快地编码了!...

API_Cloud
2016/10/23
354
2
Oracle实现分页查询的SQL语法汇总

本文实例汇总了Oracle实现分页查询的SQL语法,整理给大家供大家参考之用,详情如下: 1.无ORDER BY排序的写法。(效率最高) 经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据...

Sheamus
2015/02/11
0
0
php基础语法梳理

php中文名为“超文本预处理器”,是一门后台语言。由于他简单,容易入门,它是在web开发中使用最广泛的一种编程语言。 下面是他的基础语法,自学php的小白可以参考参考; 1.变量定义使用$符号...

马大哈tt
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python模板中循环字典

{% for k,v in user.items %} {{ k}} {{ v}} {% endfor %}

南桥北木
32分钟前
0
0
Java8系列之重新认识HashMap

简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap、Hashtable、LinkedHashMap和TreeMap,类继承关系如下图所示: 下面针对各个实现类...

HOT_POT
36分钟前
0
0
获取调用方的className

/** * 获取调用方的class * @return */private static String getInvoke() { StackTraceElement[] stackTrace = Thread.currentThread().getStackTrace(); S......

iborder
53分钟前
0
0
深入了解一下Redis的内存模型!

一前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时,会接触Redis的5种对象类型(字符...

Java填坑之路
58分钟前
1
0
从实践出发:微服务布道师告诉你Spring Cloud与Spring Boot他如何选择

背景 随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加。在这个背景下,平台的技术架构也完成了从传统的单体应用到微...

老道士
今天
0
0
大数据学习的各个阶段

第一阶段:Linux课程讲解Linux基础操作,讲的是在命令行下进行文件系统的操作,这是Hadoop学习的基础,后面的所有视频都是基于linux操作的。鉴于很多学员没有linux基础,特增加该内容,保证零linux...

董黎明
今天
0
0
CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
今天
7
0
CISCO VPN Client Reason 442 WIN8/10错误解决方案

http://jdkleo.iteye.com/blog/2163493 引用 http://my.oschina.net/cloudcoder/blog/220391?p={{currentPage 1}} 在使用cisco VPN 客户端登录时,产生Reason 442:Failedto enable Virtual......

chenfj_fer
今天
1
0
信号量有没有容量限制?

之前一直误以为信号量初始化的时候那个初始化的值是信号量的“容量”,昨天同事指出了我的错误,最初我是不相信的,经过以下代码实践,证明了我的错误: Java版: import java.util.concurr...

锟斤拷烫烫烫
今天
1
0
【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部