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的开发工 ...
随机推荐
- mysql创建新用户并且授权远程访问
1 修改root用户的密码 linux安装了mysql后,默认情况下,如果是root用户,不需要密码就可以登陆. mysql -u root -p 然后回车就可以登陆了,如果是普通用户,不能登陆. 2 ...
- Pandas分类数据和顺序数据转换为标志变量
#导入pandas库 import pandas as pd #OneHotEncoder用来将数值型类别变量转换为0-1的标志性变量 #LabelEncoder用来将字符串型变量转换为数值型变量 f ...
- C# 反射入门
反射 别的用处先不管,至少在WinForm登录后的权限控制上有大用,比如登录后的窗体左侧树,点击通过字符串创建出窗体实例 案例如下图 AssTest类很简单 namespace assemblyTes ...
- Organizing Containers of Balls
题目 David has several containers, each with a number of balls in it. He has just enough containers to ...
- 47-Ubuntu-系统信息-2-df和du查看磁盘和目录空间占用
序号 命令 作用 01 df -h disk free 显示磁盘剩余空间;-h以人性化的方式显示文件大小 02 du -h [目录名] disk usage 显示目录下的文件大小 注:显示磁盘信息的时 ...
- Vue下渐变效果有时候失效
记录一个问题:我在项目中给按钮设置一个渐变属性,调试的时候有时候有效果,有时候又没有,代码如下: .training-right-bmz { background: -webkit-linear-gr ...
- PHP之如何编写一个Vue的API后台（一）
首先我们先建立文件的结构 如下图: components - 存放所有的全局方法,比如:autoplay的函数 lib - 所有第三方的方法 比如:DBTool:数据库的方法 logs - 日志 ...
- 2变量与基本类型之const限定符
一.const介绍: const对象一旦被创建其值就不能再改变,所以const对象必须初始化.任何试图对const赋值的行为都会引发错误. 二.初始化和const: 对const对象的主要限制就是只能 ...
- JAVAWEB之文件的上传和下载
一.文件的上传: Enctype的属性介绍: 基于表单文件上传的界面简介: 文件上传时服务器端获取不到请求信息的原因及获取请求信息的几种方式: 输入流方式的实现: 实用工具包的实现:要导入fileup ...
- Codeigniter Session: Configured save path is not a directory
Codeigniter 3.x Message: Session: Configured save path '' is not a directory, doesn't exist or canno ...