css----less预处理器
###less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
###Less编译工具
koala 官网:www.koala-app.com
###less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
###less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载
###less中的嵌套规则
1.基本嵌套规则
#wrap{
#inner{
}
}
<div id="wrap">
<div id="inner"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/less">
*{
margin: ;
padding: ;
}
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: auto;
#inner{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: ;
right: ;
top: ;
bottom: ;
margin: auto;
}
}
</style>
<script src="../less/less.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="inner"></div>
</div>
</body>
</html>
less基本嵌套规则
*{
margin: ;
padding: ;
}
#list{
list-style: none;
line-height: 30px;
width: 300px;
background: pink;
margin: auto;
li{
height: 30px;
}
a{
float: left;
&:hover{
/*&代表父级*/
color: red;
}
}
span{
float: right;
}
}
2.&的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index1.css"/>
</head>
<body>
<div id="wrap">
<div id="inner"></div>
</div>
</body>
</html>
html引入
//定义变量
@zero:;
//定义id选择器
@selector:#wrap;
//定义宽
@w:width;
//颜色选择
background: url("../img/zdy.jpg");
//变量的延迟加载
.class {
one: ;
}
.class .brass {
three: ;
}
###less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
.juzhong{
}
#box1{
.juzhong;
}
#box2{
.juzhong;
}
2.不带输出的混合
.juzhong(){
position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
}
#box1{
width: 100px;
height: 100px;
background: pink;
.juzhong;
}
#box2{
width: 100px;
height: 100px;
background: deeppink;
.juzhong;
}
3.带参数的混合
.juzhong(@w,@h,@c){
position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong(100px,100px,pink);
z-index: ;
}
#box2{
.juzhong(200px,200px,deeppink);
}
4.带参数并且有默认值的混合
.juzhong(@w:100px,@h:100px,@c:pink){
position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
//默认值
.juzhong;
z-index: ;
}
#box2{
.juzhong(200px,200px,deeppink);
}
5.带多个参数的混合
6.命名参数
.juzhong(@w:100px,@h:100px,@c:pink){
position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong();
z-index: ;
}
#box2{
.juzhong(@h:200px;@c:deeppink;);
}
7.匹配模式
*{
margin: ;
padding: ;
}
/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
border-width:@w;
border-color: transparent transparent @c transparent ;
border-style:dashed dashed solid dashed ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
border-width:@w;
border-color: @c transparent transparent transparent ;
border-style:solid dashed dashed dashed ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
border-width:@w;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
border-width:@w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:10px,@c:pink){
width: ;
height: ;
overflow: hidden;
}
#sanjiao{
.triangle(top,50px,deeppink);
}
#sanjiao2{
.triangle(bottom);
}
#sanjiao3{
.triangle(left);
}
#sanjiao4{
.triangle(right);
}
8.arguments变量
*{
margin: ;
padding: ;
}
.border(@w:10px,@style:solid,@c:deeppink){
border: @arguments;
}
#wrap{
width: 200px;
height: 200px;
background: pink;
.border();
}
###less运算
在less中可以进行加减乘除的运算
#wrap{
width:@w * ;
height: 200px;
background: pink;
}
###less避免编译
*{
margin: ;
padding: ;
}
#wrap{
width:~"calc(200px + 700px)";
}
###less继承
.juzhong(@w:100px,@h:100px,@c:pink){
&:extend(.common all);
width: @w;
height: @h;
background: @c;
}
#wrap{
position: relative;
margin: auto;
width: 400px;
height: 600px;
border: 1px solid;
}
#box1{
.juzhong();
z-index: ;
}
#box2{
.juzhong(@h:200px;@c:deeppink;);
}
性能比混合高
灵活度比混合低
css----less预处理器的更多相关文章
- 前端知识体系之CSS及其预处理器SASS/LESS
如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- css的一种预处理器 sass
之前觉得关于css什么的没什么,后来让别人给问住了...然后就悲催了... sass是一种css的预处理器,是一种函数式的css的编程: 主要还是看官网 http://www.w3cplus.com/ ...
- 详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
[大伽说]如何运维千台云服务器 » CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 20190421-那些年使用过的CSS预处理器（CSS Preprocessor）
写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...
- 三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- css预处理器和后处理器
因为我是前端刚入门,昨天看了一个大神写的的初级前端需要掌握的知识,然后我就开始一一搜索,下面是我对css预处理器和后处理器的搜索结果,一是和大家分享下这方面的知识,另一方面方便自己以后翻阅.所以感兴趣 ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
随机推荐
- ubuntu 搭建嵌入式开发环境tftp的方法
网上很多安装的时候都要安装tftpd-hpa tftp-hpa xinetd三个安装包,经我测试,xinetd无需安装,安装好前两个后,修改tftpd-hpa的配置文件即可:etc/default/t ...
- JDK8新特性之函数式接口
什么是函数式接口 先来看看传统的创建线程是怎么写的 Thread t1 = new Thread(new Runnable() { @Override public void run() { Syst ...
- 关于py中lxml模块的cssselect的小问题
今天在使用lxml进行解析页面的时候遇到了不能解析空格的问题,就是类似于: <div class="aa bb"></div> 使用cssselect('. ...
- 问题1-/usr/bin/python: No module named virtualenvwrapper
操作系统:Ubuntu 问题:创建虚拟环境时,出现:/usr/bin/python: No module named virtualenvwrapper 解决方法: 1.切换到用户家目录 2.打开隐藏 ...
- [USACO10FEB]购买巧克力Chocolate Buying
题目描述 Bessie and the herd love chocolate so Farmer John is buying them some. The Bovine Chocolate Sto ...
- 2019ICPC南京网络赛B super_log
题意:求a的a的a次方..一直求b次,也就是在纸上写个a,然后一直a次方a次方,对m取模,记为F(a,b,m)=pow(a,F(a,b-1,phi(m)) 解题思路:联系欧拉降幂,这个迭代的过程,我们 ...
- 创建UI的线程才能访问UI，那么怎样才算访问UI呢
只有创建UI元素的线程(主线程又叫UI线程)才能访问UI元素.在UI线程中工作,不会有这个问题. 在后台线程中,如果直接访问UI元素,会抛出 “调用线程无法访问此对象,因为另一个线程拥有该对象” 异常 ...
- .Net中Task使用来提高代码执行效率
技术不断更新迭代,更高效的执行效率越来越被重视,所以对Task的使用进行了简单使用做了整理与大家分享. .Net 中有了Task后使多线程编程更简单使用和操作,下面粘上代码进行简单说明: /// &l ...
- 网络编程之 OSI七层协议
内容目录: 1.软件开发架构 2.OSI七层协议 3.每层协议介绍 1.软件开发架构 c/s架构: c:客户端 s:服务端 b/s架构: b:浏览器 s:服务器 本质:b/s其实也是c/s 2.OSI ...
- day02 mysql基本语句 存储引擎 数据类型 完整性约束
day02 mysql 一.sql的基本语句 系统数据库 information_schema: 虚拟库, 不占磁盘空间(在内存汇中): 存的是数据库启动后的一些参数, 如 ...