less--入门
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--入门的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- git 仓库原理
Git 版本控制原理 标签: git 版本控制 版本回退 2017年01月13日 21:07:202399人阅读 评论(0) 收藏 举报 分类: Git(4) 版权声明:本文为博主原创文章,未经博 ...
- Road of computer tec 01
回顾自己过去将近3年的学习经历 当初报考的时候,自己是真正喜欢这个专业的么? 当初报这个专业的时候,对计算机还没有什么很明显的概念,只知道这个专业以后是要每天面对电脑的,喜欢不喜欢谈不上吧,但是还蛮感 ...
- 数据结构复习之Vector
/** * The number of times this list has been <i>structurally modified</i>. * Structural ...
- Java作业:第四次过程性考核 ——长春职业技术学院 16级网络工程
Java作业:第四次过程性考核 码云链接:https://gitee.com/SoridoD/java_kaohe4 (时间匆忙没打注释,真有急事) (客户端和服务器会自动创建表,所以没有sql ...
- 考研计算机复试(C语言复试笔试题)(精华题选)
1.以下选择中,正确的赋值语句是(C) A.a=1,b=2 B.j++ C.a=b=5; D.y=(int)x 解析:选项A.B.D都无分号 变量 = 表达式;//赋值语句是一定带分号的 int a= ...
- 类 Arrays StringBuilder 跟 StringBuffer 的异同 SimpleDateFormat
类 String 同:起连接字符串类型作用 异: StringBuffer //线程安全 效率慢 StringBuilder //线程不安全 效率快 类 Arrays copyOf ( ...
- HashMap 的put方法
final V putVal(int hash, K key, V value, boolean onlyIfAbsent, boolean evict) { Node<K,V>[] ta ...
- 解决linux root 认证失败的问题
https://jingyan.baidu.com/article/3052f5a1f1b17c97f31f8688.html
- 汉诺塔I
题目描述 对于传统的汉诺塔游戏我们做一个拓展,我们有从大到小放置的n个圆盘,开始时所有圆盘都放在左边的柱子上,按照汉诺塔游戏的要求我们要把所有的圆盘都移到右边的柱子上,请实现一个函数打印最优移动轨迹. ...
- python模块之json_pickle_shelve
序列化:明显是json重要,并且应用场景多. #!/usr/bin/env python # coding:utf-8 import json ## 非常重要的模块,用于不同种编程语言间交换数据. d ...