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 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...
随机推荐
- git 错误 Reinitialized existing Git repository in /**/***/ 和refusing to merge unrelated histories
报错一: 这句话的意思是 在路径 /Users/jackma/Downloads/lotteryTicket 2/.git/ 现有的Git存储库初始化 ➜ lotteryTicket 2 git:(m ...
- Gym101161:ACM Tax (主席树)(占位)
题意:给定一个带权树,Q次询问,每次回答某简单路径上的权值中位数. 思路:记录根到节点的主席树,主席树可以找到路径的第K大权值.(记住,这里是可以不用二分的,不要想多了.) 奇数条边直接找中位数,偶数 ...
- [APIO 2017] 商旅
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5367 [算法] 很明显的分数规划问题 预处理从一个点走到另一个点所获最大利润和最短路 ...
- 1.1-1.3 HBase入门
一.HBASE入门 部分参考链接:https://www.cnblogs.com/steven-note/p/7209398.html 1.简介 HBase – Hadoop Database,是一个 ...
- sql之索引
作用: - 约束 - 加速查找 普通索引:加速查找 create index 索引名称 on 表名(列名,) drop index 索引名称 on 表名 主键索引:加速查找+不能为空+不能重复 cr ...
- 20个Flutter实例视频教程-第11节: 一个不简单的搜索条-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-1b4 视频地址:https://www.bilibili.com/video/av3970929 ...
- Atom 基本使用
插件 simplified-Chinese-menu:汉化 Markdown-preview-plus:Markdown 实时预览 Atom 自带 Markdown-preview,这个插件是其增强版 ...
- 获取DataGridView上选中的一行并转换为一个DataRow类型
ataGridViewRow gridrow = dataGridView1.SelectedRows[0]; DataRowView row_view = (DataRowView)gridrow. ...
- 利用JavaScript选择GridView行
本篇技巧和诀窍记录的是:利用JavaScript选择GridView行. 当我们想在GridView中添加删除.选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按 ...
- DOM学习笔记(一)DOM树
DOM 定义了访问和操作 HTML 文档的标准方法. HTML 文档中的所有内容都是节点,将 HTML 文档表达为树结构,称为节点树 HTML DOM 树 HTML DOM 是关于如何获取.修改.添加 ...