七、模式匹配与Guard表达式

根据传入参数的不同,引入不同的属性集。

 .mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
} .class1 {
.mixin(light, #888);
}
.class2{
.mixin(dark,#888);
}

编译后的结果:

 .class1 {
color: #a2a2a2;
display: block;
}
.class2 {
color: #6f6f6f;
display: block;
}

八、Guards

有条件的混合,关键词when引入了guard条件,如果符合条件则引入该属性集,规则类似媒体查询。

 .mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
} .class1{
.mixin(#999999);
}
.class2{
.mixin(#333333);
}

编译后的结果:

 .class1 {
background-color: black;
color: #999999;
}
.class2 {
background-color: white;
color: #333333;
}

注意点:

1、.mixin (@a) when (@a > 10), (@a < -10) { ... } 多个guard用逗号分隔,只要其中一个满足条件则为true

2、.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } and在 guard 中加入额外的条件,都满足才为true

3、.mixin (@b) when not (@b > 0) { ... } 在when 前面加上not 是否定了when条件,即条件不满足才为true

九、嵌套规则

#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}

嵌套规则在Less中比较常用,很多人认为它结构清晰。(我表示看着挺乱的啊= =到底是哪里有问题)

编译后的结果:

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

注意点:这里的&指它的父级选择器.logo ,&的高级用法,用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。如:

 .child, .sibling {
.parent & {
color: black;
}
& + & {
color: red;
}
}

这里的&指.child, .sibling,所以编译后的结果为:

 .parent .child,
.parent .sibling {
color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
color: red;
}

十、命名空间

 #bundle {
2 .button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
} #header a {
color: orange;
12 #bundle > .button;
} .box{
.hd(){
width:100%;
height:22px;
line-height:22px;
}
} .footer{
h3{
.box >.hd;
}
}

编译后的结果:

 #header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: #ffffff;
}
.footer h3 {
width: 100%;
height: 22px;
line-height: 22px;
}

十一、字符串插值和选择器插值

变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中:

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

编译后的结果:

.bg {
background-image: url("http://assets.fnord.com/images/bg.png");
}

如果需要在选择器中使用 LESS 变量,只需通过使用和字符串插件一样的 @{selector} 即可

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

编译后的结果为:

.blocked {
color: black;
}

十二、避免编译

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

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

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

编译后的结果为:

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

Less学习(2)(完结)的更多相关文章

  1. Java工程师学习指南 完结篇

    Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...

  2. T-Sql学习系列完结

    T-Sql(一)简单语法 T-Sql(二)事务(Transaction) T-Sql(三)存储过程(Procedure) T-Sql(四)表关联和视图(view) T-Sql(五)xml操作 T-Sq ...

  3. Keras学习笔记(完结)

    使用Keras中文文档学习 基本概念 Keras的核心数据结构是模型,也就是一种组织网络层的方式,最主要的是序贯模型(Sequential).创建好一个模型后就可以用add()向里面添加层.模型搭建完 ...

  4. CS231n 斯坦福深度视觉识别课 学习笔记(完结)

    课程地址 第1章 CS231n课程介绍 ---1.1 计算机视觉概述 这门课的主要内容是计算机视觉.它是一门需要涉及很多其他科目知识的学科. 视觉数据占据了互联网的绝大多数,但是它们很难利用. --- ...

  5. 我的MySQL学习记录 完结篇DAY05~

    课程已全部学完,Redis\mongoDB 的学习也会提上日程啦~剩下的最大的最大的问题在于练习,大量的练习,后期会发我的学习记录. 小记:也不知道是不是加强针的缘故,老是拉肚子,记录彻底感冒的一天, ...

  6. Hadoop/Spark入门学习笔记(完结)

    Hadoop基础及演练 ---第1章 初识大数据 大数据是一个概念也是一门技术,是在以Hadoop为代表的大数据平台框架上进行各种数据分析的技术. ---第2章 Hadoop核心HDFS Hadoop ...

  7. Java工程师学习指南(完结篇)

    Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...

  8. 小菜学习编程-Winform系列(初学者)

    前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙着公司产品上线,但是答应的一定要实现,大家看我上 ...

  9. WebGL学习(1) - 三角形

    原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...

  10. 分享一段数据库中表数据更新SQL

    应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...

随机推荐

  1. 动态inventory脚本的python实现

    #!/usr/bin/env python # -*- coding: utf-8 -*- ''' 基于python的动态inventory脚本实例 ''' import os import sys ...

  2. 003 - 修改Pycharm的项目文件树样式

    相信习惯了Eclipse或者Windows的小伙伴对于Pycharm的目录树一定觉得特别别扭 因为它总是在文件前加一个三角形标注, 这样的标注在视觉上十分误导层级关系 修改的方式为   File -& ...

  3. Java笔记(九)

    网络编程: UDP传输: (UdpSend发送端)通过UDP传输方式,将一段文字数据发送出去: (1)建立udpsocket服务 (2)提供数据,并将数据封装到数据包中 (3)通过socket服务的发 ...

  4. CQOI2017 部分题解

    部分题解是指没写那道算几. BZOJ上目前没有day2的题面D2T2的图. BZOJ4813 小Q的棋盘 显然可以$O(n^2)$DP,然而可以$O(n)$贪心:只有一条从根出发的一条链上的边可以只经 ...

  5. 开始我的技术bolg之旅

    虽然做了快十年的IT但是真心觉得自己的水平很烂,IT这个行业keep learning很重要,之前每接触新东西都是随便学一下,有问题解决了就完事了,或者是再有问题临时抱佛脚,从来都没把学过或者做个的事 ...

  6. Mertens

    题意: 求解$\sum_{i=a}^b{\mu(i)}$. 解法: 由$(\mu * I)(n) = e(n)$ 得 $\sum_{d|n}{\mu(d)} = [n=1]$ 得 $\mu(n) = ...

  7. 怎么在Ubuntu下设置程序的快捷键

    参考 http://jingyan.baidu.com/article/1e5468f97f9e75484861b773.html 我的系统是 64bit Ubuntu14.04 我设置了 gedit ...

  8. 1.18-1.21 Oozie Coordinator调度

    一.时区问题 1.修改系统时区 ## [root@hadoop-senior hadoop-2.5.0-cdh5.3.6]# rm -rf /etc/localtime [root@hadoop-se ...

  9. 解决“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”

    问题描述:远程访问该数据库(客户端同样是Oracle11g)提示“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”. 解决的办法: 1.一定要关闭Win ...

  10. 黑科技抢先尝 - Windows全新终端初体验(附无需编译就能安装的Preview版本及代码Build全过程)

    目录 将Window 10 升级到1903版本 安装好git, 从github上clone代码 安装 VS 2019 和 .NET core 3.0 SDK 重定解决方案目标 设置好编译平台和启动的项 ...