Less学习(2)(完结)
七、模式匹配与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)(完结)的更多相关文章
- Java工程师学习指南 完结篇
Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...
- T-Sql学习系列完结
T-Sql(一)简单语法 T-Sql(二)事务(Transaction) T-Sql(三)存储过程(Procedure) T-Sql(四)表关联和视图(view) T-Sql(五)xml操作 T-Sq ...
- Keras学习笔记(完结)
使用Keras中文文档学习 基本概念 Keras的核心数据结构是模型,也就是一种组织网络层的方式,最主要的是序贯模型(Sequential).创建好一个模型后就可以用add()向里面添加层.模型搭建完 ...
- CS231n 斯坦福深度视觉识别课 学习笔记(完结)
课程地址 第1章 CS231n课程介绍 ---1.1 计算机视觉概述 这门课的主要内容是计算机视觉.它是一门需要涉及很多其他科目知识的学科. 视觉数据占据了互联网的绝大多数,但是它们很难利用. --- ...
- 我的MySQL学习记录 完结篇DAY05~
课程已全部学完,Redis\mongoDB 的学习也会提上日程啦~剩下的最大的最大的问题在于练习,大量的练习,后期会发我的学习记录. 小记:也不知道是不是加强针的缘故,老是拉肚子,记录彻底感冒的一天, ...
- Hadoop/Spark入门学习笔记(完结)
Hadoop基础及演练 ---第1章 初识大数据 大数据是一个概念也是一门技术,是在以Hadoop为代表的大数据平台框架上进行各种数据分析的技术. ---第2章 Hadoop核心HDFS Hadoop ...
- Java工程师学习指南(完结篇)
Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...
- 小菜学习编程-Winform系列(初学者)
前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙着公司产品上线,但是答应的一定要实现,大家看我上 ...
- WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
- 分享一段数据库中表数据更新SQL
应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...
随机推荐
- 动态inventory脚本的python实现
#!/usr/bin/env python # -*- coding: utf-8 -*- ''' 基于python的动态inventory脚本实例 ''' import os import sys ...
- 003 - 修改Pycharm的项目文件树样式
相信习惯了Eclipse或者Windows的小伙伴对于Pycharm的目录树一定觉得特别别扭 因为它总是在文件前加一个三角形标注, 这样的标注在视觉上十分误导层级关系 修改的方式为 File -& ...
- Java笔记(九)
网络编程: UDP传输: (UdpSend发送端)通过UDP传输方式,将一段文字数据发送出去: (1)建立udpsocket服务 (2)提供数据,并将数据封装到数据包中 (3)通过socket服务的发 ...
- CQOI2017 部分题解
部分题解是指没写那道算几. BZOJ上目前没有day2的题面D2T2的图. BZOJ4813 小Q的棋盘 显然可以$O(n^2)$DP,然而可以$O(n)$贪心:只有一条从根出发的一条链上的边可以只经 ...
- 开始我的技术bolg之旅
虽然做了快十年的IT但是真心觉得自己的水平很烂,IT这个行业keep learning很重要,之前每接触新东西都是随便学一下,有问题解决了就完事了,或者是再有问题临时抱佛脚,从来都没把学过或者做个的事 ...
- Mertens
题意: 求解$\sum_{i=a}^b{\mu(i)}$. 解法: 由$(\mu * I)(n) = e(n)$ 得 $\sum_{d|n}{\mu(d)} = [n=1]$ 得 $\mu(n) = ...
- 怎么在Ubuntu下设置程序的快捷键
参考 http://jingyan.baidu.com/article/1e5468f97f9e75484861b773.html 我的系统是 64bit Ubuntu14.04 我设置了 gedit ...
- 1.18-1.21 Oozie Coordinator调度
一.时区问题 1.修改系统时区 ## [root@hadoop-senior hadoop-2.5.0-cdh5.3.6]# rm -rf /etc/localtime [root@hadoop-se ...
- 解决“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”
问题描述:远程访问该数据库(客户端同样是Oracle11g)提示“System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本”. 解决的办法: 1.一定要关闭Win ...
- 黑科技抢先尝 - Windows全新终端初体验(附无需编译就能安装的Preview版本及代码Build全过程)
目录 将Window 10 升级到1903版本 安装好git, 从github上clone代码 安装 VS 2019 和 .NET core 3.0 SDK 重定解决方案目标 设置好编译平台和启动的项 ...