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的开发工 ...
随机推荐
- C# WinfForm 控件之dev报表 XtraReport （八）动态生成报表
功能说明:生成一个报表文件DV1,保存到本地AA.rep,再重新加载这个文件到DV2 1.布局如下图: panel1 上有三个button panel2上有个documentView dv1 pane ...
- git stash封存分支 以及关于开发新功能的处理
有种情况,我们要修复项目的bug时,但别的分支有修改的代码,要修复的bug可能会影响(所有分支共用一个暂存区).可以单独创建一个bug分支,用于修复和提交bug,在修改前可以先stash封存分支修改的 ...
- centos 时区设置初认识
由于一些需要,我租用了一个海外服务器,并开始了我的centos之旅. 由于之前一直用虚拟机,而且在国内,所以不需要考虑时区的问题,但是现在,这个服务器是在海外的,所以就必须考虑时区的问题了.更何况我的 ...
- 笔记：Python列表和元组
列表 列表和字符串之间的转换 >>> li = list('hello') >>> li ['h', 'e', 'l', 'l', 'o'] >>> ...
- 用selenium 自动爬取某一本小说章节及其内容，并存入数据库中
from selenium import webdriver import pymysql from selenium.webdriver.support.ui import WebDriverWai ...
- Vue.js 监听属性
demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...
- sublime Text3安装及配置与解决安装插件失败
1.下载sublime Text3的官网:https://www.sublimetext.com/32.安装Package Control 下载Package Contoral地址: 链接:htt ...
- Sql Server 小知识不断扩充中
1. char.varchar.nvarchar 区别 char 定长字符数据长度8000字符,小于8000字符时以空格填充. varchar 变长字符数据最大长度8000,小于8000字符时不会以 ...
- python 如何写好main函数
每个程序员在学习编程的过程中,肯定没少写过main()函数,Python程序员也不例外.本文为大家分享Python之父Guido van Rossum推荐的函数写法,可以大大提高这个函数的灵活性. 一 ...
- Android源码的git下载地址
git clone https://android.googlesource.com/device/common.git git clone https://android.googlesour ...