Less(Learner Style Sheets)是向后兼容css扩展语言。

变量(Variables)

 @width: 10px;
@height: @width + 10px;
header{
width: @width;
height: @height;
}

编译后等同于:

 header{
width: 10px;
height:20px;
}

混合(Mixins)

 .bordered{
border-top: 1px solid black;
border-bottom: 1px solid black;
} a{
.bordered();
}

嵌套(Nesting)

 #aa{
color: black;
#bb{
font-size: 20px;
}
.cc{
width: 300px;
}
}
#aa{
color: black;
#bb{
font-size: 20px;
}
.cc{
width: 300px;
&:hover{
height:300px;
}
}
}

适配屏幕(@supports、@media)

 .component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}

运算(Operations)

 @color: #224488 / 2; //results in #112244

 @var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
 @min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}

函数(Functions)

 #bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
 #header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}

Maps

 #colors() {
primary: blue;
secondary: green;
} .button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}

作用域(Scope)

 @var: red;

 #page {
#header {
color: @var; // white
}
@var: white;
}
 @import "xx.css";

less--入门的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  3. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  4. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  10. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. git 仓库原理

    Git 版本控制原理 标签: git 版本控制 版本回退 2017年01月13日 21:07:202399人阅读 评论(0) 收藏 举报  分类: Git(4)  版权声明:本文为博主原创文章,未经博 ...

  2. Road of computer tec 01

    回顾自己过去将近3年的学习经历 当初报考的时候,自己是真正喜欢这个专业的么? 当初报这个专业的时候,对计算机还没有什么很明显的概念,只知道这个专业以后是要每天面对电脑的,喜欢不喜欢谈不上吧,但是还蛮感 ...

  3. 数据结构复习之Vector

    /** * The number of times this list has been <i>structurally modified</i>. * Structural ...

  4. Java作业:第四次过程性考核 ——长春职业技术学院 16级网络工程

    Java作业:第四次过程性考核 码云链接:https://gitee.com/SoridoD/java_kaohe4    (时间匆忙没打注释,真有急事) (客户端和服务器会自动创建表,所以没有sql ...

  5. 考研计算机复试(C语言复试笔试题)(精华题选)

    1.以下选择中,正确的赋值语句是(C) A.a=1,b=2 B.j++ C.a=b=5; D.y=(int)x 解析:选项A.B.D都无分号 变量 = 表达式;//赋值语句是一定带分号的 int a= ...

  6. 类 Arrays StringBuilder 跟 StringBuffer 的异同 SimpleDateFormat

    类 String 同:起连接字符串类型作用 异: StringBuffer    //线程安全  效率慢 StringBuilder   //线程不安全  效率快 类 Arrays copyOf  ( ...

  7. HashMap 的put方法

    final V putVal(int hash, K key, V value, boolean onlyIfAbsent, boolean evict) { Node<K,V>[] ta ...

  8. 解决linux root 认证失败的问题

    https://jingyan.baidu.com/article/3052f5a1f1b17c97f31f8688.html

  9. 汉诺塔I

    题目描述 对于传统的汉诺塔游戏我们做一个拓展,我们有从大到小放置的n个圆盘,开始时所有圆盘都放在左边的柱子上,按照汉诺塔游戏的要求我们要把所有的圆盘都移到右边的柱子上,请实现一个函数打印最优移动轨迹. ...

  10. python模块之json_pickle_shelve

    序列化:明显是json重要,并且应用场景多. #!/usr/bin/env python # coding:utf-8 import json ## 非常重要的模块,用于不同种编程语言间交换数据. d ...