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的开发工 ...
随机推荐
- 常用的一些js事件及案例
比如金额需要显示的时候转换成有千分位,小数点后保留2位等.去编辑的时候,又要格式化,把逗号都去掉.网上找了段代码,但是再次编辑会有问题,修改了一下,代码如下: function outputMoney ...
- zabbix--添加用户
用户和用户组 概述 Zabbix 中的所有用户都通过 Web 前端去访问 Zabbix 应用程序.并为每个用户分配唯一的登陆名和密码. 所有用户的密码都被加密并储存于 Zabbix 数据库中.用户 ...
- 第十一篇 session和cookie自动登录机制
session和cookie的作用和区别可以在网上查到,这里简单说下,我们使用的http协议本身是种无状态的协议,就是说web服务器接收到浏览器的请求,会直接返回相应内容,并不会检查是哪个浏览器,即浏 ...
- 新建一个servlet类，继承HttpServlet，但是无法导入HttpServlet包
描述: 原因:缺少tomcat的libraries(HttpServlet对应位置在tomcat的lib中====) 解决: 1. 2. 3. 4.
- wp api jwt 403 (Forbidden) -- JWT is not configurated properly, please contact the admin
需要在 wp-config.php 文件中配置 define('JWT_AUTH_SECRET_KEY', 'your-top-secrect-key'); 參考 403 (Forbidden) -- ...
- 佳佳的 Fibonacci
佳佳的 Fibonacci \(f_n=f_{n-1}+f_{n-2},f_1=f_2=1\),求\(f_1+2f_2+3f_3+...+nf_nmod\ m,1≤n,m≤2^{31}-1\). 解 ...
- .nett Core之路由配置
//配置路由 app.UseMvc(buider => { buider.MapRoute("Default", "{controller=home}/{actio ...
- 6361. 【NOIP2019模拟2019.9.18】鲳数
题目 题目大意 给你一个区间\([l,r]\),求这个区间内每个整数的十进制上从高位到低位的逆序对个数之和. 思考历程 一开始就知道这是个数位DP-- 结果一直都没有调出来,心态崩了-- 正解 先讲讲 ...
- SQL Server 获取所有库名
----1. 获取所有的数据库名----- SELECT NAME FROM MASTER.DBO.SYSDATABASES ORDER BY NAME -----2. 获取所有的表名------ ...
- 依赖背包优化——ural1018，金明的预算方案
经典题了,网上博客一大堆O(nCC)的做法,其实是可以将复杂度降到O(nC)的 参考依赖背包优化(泛化物品的并) 根据背包九讲,求两个泛化物品的和复杂度是O(CC)的,所以依赖背包暴力求解的复杂度是O ...