第一次发的标题有误,重发一遍,抱歉了
一、less基础语法
1.声明变量:@变量名:变量值
使用变量:@变量名
例如
@color : #ff0000;
@length : 100px;
#div1{
width: @length;
height: @length;
background-color: @color;
}

变量使用规则 
多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量。

less中的变量类型
①数值类:不带单位的123 不带单位的1px
②字符串类型:  带引号的"啊哈哈哈" 不带引号的red #ff00000
③颜色类: red
④值列表类型:多个值用逗号或空格分隔  css中出现的属性值,在less中都可以用作变量名
2.混合(Mixins)
①无参混合
声明:.class();
调用,在选择器中,使用.class调用
例如
.boderradius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
②有参无默认混合
声明:.calss(@param){ };
调用:.class(@paramValue);
例如
.boderradius1(@radius){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
③有参默认混合
声明:.calss(@param:10px){}
调用.class()或.class(@paramValue)
例如
.boderradius2(@radius:10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius
.class{
    width: 10px;
    height: 10px;
    .boderradius2();
}
注意事项
如果声明时没有给参数默认值,则调用时必须赋值,否则报错;
无参混合实际上就是一个普通的class选择器,会被编译到css文件中
而有参混合,在编译时,不会出现在css文件中。
 
3.less中的匹配模式
①声明:@pipei(条件一,参数){}@pipei(条件二,参数){}@pipei(条件三,参数){}
②调用@pipei(条件的值,参数的值){};
例如
.piPei(lefts,@width:10px){
margin-left: @width;
}
.piPei(rights,@width:10px){
margin-right: @width;
} .piPei(tops,@width:10px){
margin-top: @width;
} .piPei(bottoms,@width:10px){
margin-bottom: @width;
}
.piPei(@_,@width:10px){
margin-bottom: @width;
}
@position:lefts;
.class1{
.piPei(@position,10px);
}
③匹配规则
根据调用时输入的条件值,去寻找与之匹配的混合执行
@_表示不管匹配成功与否,都会执行的选项。
@arguments
4.@arguments特殊变量
在混合中,@arguments表示混合传入的所有参数,,@arguments中的多个参数之间,用空格分隔。
例如
.argu(@width,@style,@color){
//border:@width @style @color;
border: @arguments;//跟上面boder效果一样
}
.class2{
.argu(10px,solid,#ff0000)
}
5.less中的加减乘除运算
less中的所有变量和数值可以进行加减乘除运算
需要注意的是 当颜色值运算时,红绿蓝分三组运算,组内单独计算,组间互不干涉
6.less中的嵌套
less中允许css选择器按照HTML代码的构造进行嵌套。
①less中的嵌套默认时后代选择器,如果需要子代选择器,则需在前面加大于号
②&符号表示上一层选择器比如上述&表示section ul:hover
例如
#section{
width: 800px;
height: 200px;
background-color: #ccc;
p{
color: red;
}
ul{
list-style: none;
>li{
float: left;
width: 200px;
height: 50px;
&:hover{
background-color: yellow;
}
} } }

以上就是我简单整理的less的基本语法,可能不是太好看,但是希望能对看到这篇文章的人有所帮助,谢谢了

고마워요~~

css预处理器less和scss之less介绍(一)的更多相关文章

  1. css预处理器less和scss之sass介绍(二)

    本来打算整理jQuery Mobile来着,但是没有研究明白,所以接着上个周的继续介绍... [scss中的基础语法]   1.scss中的变量 ①声明变量:$变量名:变量值 $width:100px ...

  2. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  3. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  6. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  7. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  8. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  9. 160907、CSS 预处理器-Less

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...

随机推荐

  1. 配置AIX系统互信关系

    解释: 信任关系指一台远程服务器的用户以相同的用户名接入到另外一台服务器,而无需提供口令. 双机之间建立信任关系后,可以使用“rcp”和“rlogin”等命令. 操作步骤: 1.以root用户登录双机 ...

  2. connect by prior 递归算法

    http://blog.163.com/xxciof/blog/static/7978132720095193113752/ oracle中 connect by prior 递归算法 Oracle中 ...

  3. 扩展Python模块系列(一)----开发环境配置

    本系列将介绍如何用C/C++扩展Python模块,使用C语言编写Python模块,添加到Python中作为一个built-in模块.Python与C之间的交互目前有几种方案: 1. 原生的Python ...

  4. 【机器学习笔记之四】Adaboost 算法

    本文结构: 什么是集成学习? 为什么集成的效果就会好于单个学习器? 如何生成个体学习器? 什么是 Boosting? Adaboost 算法? 什么是集成学习 集成学习就是将多个弱的学习器结合起来组成 ...

  5. 有关XSS的一个系列教程

    在乌云发现了一个有关XSS的教程,目前有21篇,够我慢慢儿学的了. 这个系列教程的地址:http://www.wooyun.org/whitehats/心伤的瘦子/page/1 几个常见的语句 < ...

  6. Maven干货

    好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...

  7. 开源社群系统ThinkSNS+安装部署演示视频!

    社群系统TS+一期版本发布之后,很多小伙伴们反馈安装部署有些困难,那么今天由我们的颜值与技术实力担当乔斌大佬通过录制视频的形式,给大家演示一下部署的整个过程,录制过程中有些杂音,请各位尽情谅解,后续我 ...

  8. js版贪吃蛇

    之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...

  9. 程序员的Epic Fail [0]

    作为程序员,我们经常会被客户问的一个问题一定是不是说很容易么,为什么花了这么长时间.不得不说,程序员可能是最糟糕的计划者,按时按点按计划完成的软件项目永远是下一个项目.一个项目的延期,有很多这样那样的 ...

  10. thinkphp 中英文网站详解

    thinkphp 制作中英文网站的两种方法 一,在网站程序里增加语言脚本,设置整站自动翻译. 二,在原有的页面制作新的模板,在新的页面编辑网站, 优缺点: 一:优点.........就是不用多次添加内 ...