1.注释

less 的注释有两种方法,"/**/" 和 "//",前一种会在 css 文件中显示,后一种不会在 css 显示。

2.定义变量的方法:"@"加上变量名。

@tabbarActiveColor:#26a2ff;

3.运算

@height: 30px;
height: @height; // 30px
line-height: @height - 1; // 29px

4.继承  &

"&"符号,这个符号起到继承的作用,这个符号就是它的父级标签(类,id等等)。

.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
& > div:not(.heading) {
padding: 40px 150px;
& h3 {
font-size: @fs + 12;
margin-bottom: .5rem;
}
& li {
font-size: @fs + 2;
line-height: 1.6;
}
}
}

相当于

.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
}
.industry-section > div:not(.heading) {
padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
font-size: 28px;
margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
font-size: 18px;
line-height: 1.6;
}

5.混合

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

classA

.page-width {
width: 100%;
max-width: 1920px;
margin-right: auto;
margin-left: auto;
}

classB

body {
.page-width; // classB
font-size: @fs;
color: @text-color;
background-color: #fff;
font-family: "Microsoft Yahei", Arial, sans-serif;
}

6.媒体查询

.application-section {
max-width: 100%;
width: 1920px;
height: 770px;
margin: 30px auto;
background: url(../images/app-scene.png) center top no-repeat;
position: relative;
& h2 {
position: absolute;
top: 70px;
left: 50%;
font-size: 0;
width: 1200px;
transform: translateX(-50%);
@media (max-width: 1600px) {
width: 1000px;
& span {
font-size: @fs + 20;
}
}
}
}

7.mixins  混合

// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}

默认值

.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius();
}

8.function

less 包含许多内置函数

/*把像素转成rem
375/10 = 37.5
375 它是ipone6的屏幕宽度
注:将屏幕分成10等份,10rem为屏幕宽度
例如:
.slide-pages {
position: absolute;
.bottom(10);
.right(15);
}
*/
.fs(@px){
font-size: unit(@px/37.5,rem);
}
.w(@px){
width: unit(@px/37.5,rem);
}
.h(@px){
height: unit(@px/37.5,rem);
}
.lh(@px){
line-height: unit(@px/37.5,rem);
}
.pl(@px){
padding-left: unit(@px/37.5,rem);
}
.pr(@px){
padding-right: unit(@px/37.5,rem);
}
.pt(@px){
padding-top: unit(@px/37.5,rem);
}
.pb(@px){
padding-bottom: unit(@px/37.5,rem);
} .mt(@px){
margin-top:unit(@px/37.5,rem);;
}
.mb(@px){
margin-bottom:unit(@px/37.5,rem);
}
.ml(@px){
margin-left:unit(@px/37.5,rem);
}
.mr(@px){
margin-right:unit(@px/37.5,rem);
}
.top(@px){
top:unit(@px/37.5,rem);
}
.bottom(@px){
bottom:unit(@px/37.5,rem);
}
.left(@px){
left:unit(@px/37.5,rem);
}
.right(@px){
right:unit(@px/37.5,rem);
} .padding(@tb,@lr){
padding: unit(@tb/37.5,rem) unit(@lr/37.5,rem);;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix{
clear: both;
}

自定义

variable.less

/*把像素转成rem
375/10 = 37.5
375 它是ipone6的屏幕宽度
注:将屏幕分成10等份,10rem为屏幕宽度
例如:
.slide-pages {
position: absolute;
.bottom(10);
.right(15);
}
*/ // 字号
.fs(@px){
font-size: unit(@px/36,rem);
[data-dpr='2'] & {
font-size: unit(@px/36,rem) * 2;
}
[data-dpr='3'] & {
font-size: unit(@px/36,rem) * 3;
}
} // 宽度
.w(@px){
width: unit(@px/36,rem);
} // 高度
.h(@px){
height: unit(@px/36,rem);
} // 行高
.lh(@px){
line-height: unit(@px/36,rem);
} // 内边距
.pl(@px){
padding-left: unit(@px/36,rem);
}
.pr(@px){
padding-right: unit(@px/36,rem);
}
.pt(@px){
padding-top: unit(@px/36,rem);
}
.pb(@px){
padding-bottom: unit(@px/36,rem);
}
.p2(@ptb,@prl){
padding: unit(@ptb/36,rem) unit(@prl/36,rem);
}
.p3(@pt,@pm,@pb){
padding: unit(@pt/36,rem) unit(@pm/36,rem) unit(@pb/36,rem);
}
.p4(@pt,@pr,@pb,@pl){
padding: unit(@pt/36,rem) unit(@pr/36,rem) unit(@pb/36,rem) unit(@pl/36,rem);
} // 外边距
.mt(@px){
margin-top:unit(@px/36,rem);;
}
.mb(@px){
margin-bottom:unit(@px/36,rem);
}
.ml(@px){
margin-left:unit(@px/36,rem);
}
.mr(@px){
margin-right:unit(@px/36,rem);
}
.m2(@mtb,@mrl){
margin:unit(@mtb/36,rem) unit(@mrl/36,rem);
}
.m3(@mt,@mm,@mb){
margin:unit(@mt/36,rem) unit(@mm/36,rem) unit(@mb/36,rem);
}
.m4(@mt,@mr,@mb,@ml){
margin:unit(@mt/36,rem) unit(@mr/36,rem) unit(@mb/36,rem) unit(@ml/36,rem);
}
.ma(@mt,@mb){
margin:unit(@mt/36,rem) auto unit(@mb/36,rem);
} // 距离
.t(@px){
top:unit(@px/36,rem);
}
.b(@px){
bottom:unit(@px/36,rem);
}
.l(@px){
left:unit(@px/36,rem);
}
.r(@px){
right:unit(@px/36,rem);
} // 浮动
.fl{
float: left;
}
.fr{
float: right;
} // 清除浮动
.clearfix{
clear: both;
} // 圆角
.br(@px){
border-radius: unit(@px/36,rem);
} // 背景
.bs(@width,@height){
background-size:unit(@width/36,rem) unit(@height/36,rem);
}
.bp(@left,@top){
background-position:unit(@left/36,rem) unit(@top/36,rem);
} // 边框
.b(@px,@type,@color){
border: unit(@px/36,rem) @type @color;
} /**
* 解决1px问题
*/
// 顶部
.border-top-1px(@color) {
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid @color;
content: ' ';
}
} // 底部
.border-bottom-1px(@color) {
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid @color;
content: ' ';
}
}

9.继承  extend

.animal{
  color: #fff;
}
/* 语法1:<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
  width: 100px;
  height: 100px;
}
/* 语法2:<selector>{ &:extend(<parentSelector>); } */
.deer{
  &:extend(.animal);
  width: 50px;
  height: 50px;
}

10.引入  @import

@import "main.less";

.

less 项目实战的更多相关文章

  1. Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  2. 给缺少Python项目实战经验的人

    我们在学习过程中最容易犯的一个错误就是:看的多动手的少,特别是对于一些项目的开发学习就更少了! 没有一个完整的项目开发过程,是不会对整个开发流程以及理论知识有牢固的认知的,对于怎样将所学的理论知识应用 ...

  3. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  4. Asp.Net Core 项目实战之权限管理系统(0) 无中生有

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  5. Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  6. Asp.Net Core 项目实战之权限管理系统(2) 功能及实体设计

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  7. Asp.Net Core 项目实战之权限管理系统(3) 通过EntityFramework Core使用PostgreSQL

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  8. Asp.Net Core 项目实战之权限管理系统(5) 用户登录

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  9. Asp.Net Core 项目实战之权限管理系统(6) 功能管理

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  10. Asp.Net Core 项目实战之权限管理系统(7) 组织机构、角色、用户权限

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

随机推荐

  1. python中json操作了解

    什么是接口? 交换数据 http://openweathermap.org/current json简介 JSON 是存储和交换文本信息的语法.类似 XML JSON 语法是 JavaScript 语 ...

  2. selenium - 常用页面操作

    # 2.常用页面操作 # 访问某一个页面url = 'http://www.baidu.com'driver.get(url) # 获取页面的标题title = driver.titleprint(t ...

  3. git status 下中文显示乱码问题解决

      $ git status -s                 ?? "\350\257\264\346\230\216.txt\n                 $ printf & ...

  4. SpriteKit-(SKNode)

    1.初始化 + (instancetype)node; + (nullable instancetype)nodeWithFileNamed:(NSString*)filename; 2.返回边界边框 ...

  5. 【Luogu】P4357K远点对(寄蒜几盒)

    题目链接 考虑旋转卡壳求出一个最远点对之后删掉其中一个点,把该点到其余所有点的距离存进堆里…… 最后堆输出答案. 我的代码只有在开O2的情况下才不会re.为啥???? #include<cstd ...

  6. VCO的配置方法

    弄了个VCO的环境. 感觉有点儿麻烦,配乱七八糟的服务,弄完了SE也不试试,白弄了.最近又有人说这东西要试试. 我先简单记录下吧: 1. 在vCenter Server 下开启SSO,设置密码. 2. ...

  7. [bzoj1095][ZJOI2007]Hide 捉迷藏 点分树,动态点分治

    [bzoj1095][ZJOI2007]Hide 捉迷藏 2015年4月20日7,8876 Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiaji ...

  8. J2ME开发基本语法及小实例专题

    原文发布时间为:2008-07-31 -- 来源于本人的百度文章 [由搬家工具导入] http://www.wcplym.com/sbjtClassArtl.asp?id=4 ·Canva专题:漂亮的 ...

  9. angular中关于文件引入

    var angular = require('angular'); module.exports = angular.module('app.mymodule2', []).controller('H ...

  10. 根据已知日期(yyyy-MM-dd)获取前n天的日期区间

    //获取天 var pubTime="2017-12-30" function buildDay(num){ num=num-1; var myDate = new Date(pu ...