移动web布局

1.0传统布局和flex布局对比

1.1传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

1.2 flex布局

• 操作方便，布局极其简单，移动端使用比较广泛
• pc端浏览器支持情况比较差
• IE11或更低版本不支持flex或仅支持部分

1.3 建议

• 如果是pc端页面布局，还是采用传统方式
• 如果是移动端或者是不考虑兼容的pc则采用flex

2. Flex布局原理

• flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
• 采用 Flex 布局的元素，称为 Flex 容器（flex

container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
item），简称”项目”。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3. 弹性盒属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式(多行)
• align-item：设置侧轴上的子元素排列方式(单行)
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.1 弹性盒设置项：display:flex

flex-direction设置主轴的方向

• 在flex布局中，是分主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下

1
2
3
4
5
6
7
8
9
10
11

------------------>  x轴方向(主轴，水平向右)
|
|
|
|
|
|
|
|
⌄
Y轴方向(侧轴，垂直向下)

• 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

3.2 justify-content设置主轴上的子元素排列方式

3.3 flex-wrap设置是否换行

• 默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的(no-wrap)。
• nowrap不换行
• wrap换行

3.4 align-items设置侧轴上的 子元素 排列方式（单行）

该属性是控制子项目在侧轴(默认是y轴)上的排列方式 在子项为单个(单行、不换行)的时候使用。(该属性是给子项目设置的)

3.5 align-content设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况，在单行下是没有效果的。

3.6 align-content和align-items的区别

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
• align-content适应于换行（多行）的情况下（单行情况下无效），可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
• 总结就是单行找align-items 多行找 align-content

3.7 flex-flow属性是flex-direction和flex-wrap属性的复合属性

1
2

/* 横排换行 */
flex-flow:row wrap

4 弹性盒子项常见属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列属性(前后顺序)

4.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占有多少份数。

flex-grow(放大)

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

容器会按项目设置的flex-grow值总和自动分配空间

1

.item{ flex-grow: <number> }

放大计算公式：

1. 计算剩余空间
   伸缩容器宽度 - 所有伸缩项的宽度和
2. 计算每份剩余空间的宽度
   剩余空间/需要的份数
3. 计算每个伸缩项目最终的宽度
   伸缩项的宽度 + 需要的份数(grow的值) * 每份的宽度

flex-shrink(缩小)

flex-shrink属性定义项目的缩小比例，默认为0，不缩放。

1

.item{ flex-shrink: <number> }

缩小计算公式：

1. 溢出宽度：所有伸缩宽度总和 - 伸缩容器宽度

2. 计算权重值：每个伸缩项需要的份数(shrink的值)

3. 每个伸缩项目缩小的范围

   溢出宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值

flex-basis(宽度，单位px)

设置项元素的基础宽，不会被弹性盒其他属性更改宽度(相当于写死宽度)，权重比width高，就是弹性盒的子项设置了这个属性会覆盖width属性。

注意≥o≤：只针对弹性盒项目生效，会覆盖width属性，但flex-basis的值不明确时(flex-basis:auto)以width为准。

flex复合写法

1

flex: flex-grow flex-shrink flex-basis

1
2
3
4
5
6
7

.item{
  /* flex-grow可以将项目相对于数值放大 */
   flex-grow: <number> ; /* 默认值 0 */
  /* flex-shirnk可以将项目相对于数值缩小 */
   flex-shirnk: <number> ;
  /*  */
}

4.2 align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对其方式，可覆盖

移动端web前置知识点

长度单位

• px
• 百分比
• em
• rem
• vw/vh

1.px像素

定义：是指在由一个数字序列表示的图像中的最小单位。

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的，一个小方格就是一个像素。

例如div尺寸是100*100(px)，那么水平方向就占用100个小方格，垂直方向就占用100个小方格。

像素特点

不会随着视口大小的变化而变化，像素是一个固定的单位(绝对单位)。

2.百分比

百分比是前端开发中的一个动态单位, 大部分都是以当前元素的父元素作为参考进行计算。

例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px。

百分比特点

• 子元素高度是参考父元素高度计算的
• 子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
• 子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
• 不能用百分比设置元素的border

3.em相对单位

em是前端开发中的一个动态单位，是一个相对于元素字体大小的单位

例如：font-size：12px，那么1em就等于12px

em特点

1. 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
2. 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
3. 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小

结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

rem相对(绝对)单位

rem就是root em, 和em一样是前端开发中的一个动态单位。

rem和em的区别在于, rem是一个相对于根元素(html)字体大小的单位

例如 根元素(html) font-size: 12px; ,那么1em就等于12px

rem特点

1. 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
2. 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
3. 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

vw和vh

vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位

系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一

vw/vh 和 百分比 不同的是, 百分比一般都是以父元素作为参考。

结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

延伸_vmin和vmax?

vmin：vw和vh中较小的那个

vmax：vw和vh中较大的那个

使用场景：保证移动开发中屏幕旋转之后尺寸不变。

视口

概念：是一个区域，网页可看到的区域，也就是html网页显示的区域。

作用：

1. 约束html文档大小
2. html文档内容超过了视口大小便会产生滚动条

pc端视口大小等于浏览器窗口大小

移动端默认视口980px （横向宽度）

980px的由来

因为过去网页的版心都是980

乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980

后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页

但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的

所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小

设置网页在移动端不自动缩放

在head标签里添加一下内容(建议背下)

1

<meta name="viewport" content="width=divice-width, initial-scale=1.0" >

• width=device-width 设置视口宽度等于设备的宽度
• initial-scale=1.0 初始缩放比例，1不缩放
• maximum-scale 允许用户缩放到的最大比例
• minimum-scale 允许用户缩放到的最小比例
• user-scalable 用户是否可以手动缩放

拓展：viewport-fit:contain或cover，视口适配，兼容带刘海的屏幕。

Css媒体查询——@media

用于：

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都

属于屏幕设备。

简单解释作用：告诉浏览器当满足什么条件时使用什么样式

1. @media用来让css样式方便的适配于日趋多样化的终端设备
2. @media规则是实现响应式设计的css核心技术之一

使用方式(语法):

模版1:

1

@media 媒体类型 and (媒体特性:值) {css样式}

模版2：

1

<link rel="stylesheet" media="关键字 媒体类型 and (媒体特性:值)" href="xx.css" />

1.外链css样式(link标签中使用):

1
2

<!-- 判断最大显示宽度为800px的设备,如果符合条件就引入css文件 -->
<link rel="stylesheet" media="(max-width:800px)" href="example.css"/>

注意：使用link元素是通过媒体查询条件来判断调用css样式表文件；如果符合条件，则样式表文件按正常的加载规则进行应用；如果不符合条件，对应的样式表文件也会被下载（不被应用）

2.内嵌css样式(style标签中使用)

1
2
3
4
5
6
7
8

<style>
  /* 最大显示宽度为600px的设备 */
  @media (max-width: 600px){
    .box{
      display:none;
   }
  }
</style>

3.css文件里写——同上效果

媒体查询关键词：

• and(和) 多个媒体属性的判断
• only(只有) 限制条件，只有符合媒体查询条件的
• not(不是) 不符合媒体查询条件的

媒体类型：

媒体功能常用表：

判断是否为移动端

通过正则判断是否为移动端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function idApp () {
    // 是否是苹果
    if (/iphone/i.test(navigator.userAgent)) {
        return true;
    }
    
   	// 是否是安卓
    if (/android/i.test(navigator.userAgent)) {
        return true;
    }
    
    // 是否是 windows phone
    if (/windows phone/i.test(navigator.userAgent)) {
        return true;
    }
    
    return false;
}

// 如果是移动端就跳转到移动端页面
if (isApp()) {
    location.href = 'https://m.js.com/';
} else {	// 否则就跳转到PC端页面
    location.href = 'https://www.js.com/';
}

Less-css预处理语言

​ Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

1. 引入方式

1.1 内嵌式：

直接写在style标签里，需要把style标签的type属性设置成text/less，并且要引入less.js文件(放在body标签下边)，需要生效还须本地启动简单网页服务才能有效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 需要把类型改为text/less */
<style type="text/less">
@w: 10px;
@h: @w + 10px;

.header{
  width:@w;
  height:@h
}
</style>
<body>
<div class="header"> </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>

1.2 外链式：

1
2
3
4
5

<link rel="stylesheet" type="text/less" href="./css/home.less" />
<body>
  
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>

同样需要 开启live server 起服务使用，同样要在body底部 引入less.js文件 使用

1

<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>

2. 使用方式&语法格式

2.1 使用方式：

1. 转译使用：

可以通过less转译工具转译成css使用。

插件推荐：easy less (VS code) 、 less编译(HbuilderX)

转译后的文件会和less文件同一文件夹，同一名称。

2.1.2 引入less.js文件开启live Sever服务来使用

2.2 语法规范：

1. 变量：

像js里的变量一样，可以存储值或者是属性。

1
2
3
4
5
6
7

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：（css）

1
2
3
4

#header {
  width: 10px;
  height: 20px;
}

2. 混合(Mixins)：

混合（Mixin）是一种将一组打包并混入到另一个属性集里的方法。相当于js中的封装调用。

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

1
2
3
4

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果希望在另一个属性集里使用这些属性的话，我们只需要这样做：

1
2
3
4
5
6
7
8
9

#menu a {
  color: #111;
  .bordered(); // 通过调用类就可以将类里的属性获取
}

.post a {
  color: red;
  .bordered(); // 通过调用类就可以将类里的属性获取
}

编译后：（css）

1
2
3
4
5
6
7
8
9
10
11

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

3. 嵌套（Nesting）:

像ul_li这样的嵌套标签，less可以直接像标签一样嵌套写样式：

1
2
3
4
5
6

ul{
  color:black
    li{
      font-size:12px
      }
}

编译后：（css）

1
2
3
4
5
6

ul{
  color:black
}
ul li{
  font-size:12px
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用：

&表示当前选择器的父级

1
2
3
4
5
6
7
8
9
10
11
12
13

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4. @规则嵌套和冒泡：

@规则（例如媒体查询@media或@supports）可以与选择器以相同的方式进行嵌套。@规则会被放在前面，同一规则中的其他元素的相对顺序保持不变。这叫做冒泡。

1
2
3
4
5
6
7
8
9
10
11
12
13

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为：（css）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

5. 运算（Operations）：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

1
2
3
4
5
6
7
8
9
10
11
12
13

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// 不可以转换
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// 例子和变量
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

还可以对颜色进行计算：

1
2

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

6. calc特例:

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

1
2

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

7. 转义（Escaping,多用于媒体查询）：

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

1
2
3
4
5
6

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

1
2
3
4
5

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

8. 函数（Functions）:

less内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

1
2
3
4
5
6
7
8

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

9. 命名空间和访问符：

命名空间相当于一个属性集(对象)，但是不会将属性写到对应的类名元素中，和对象一样，可以通过对象名.属性名来选择访问嵌套的类名属性样式。

用法：

1
2
3
4
5
6
7
8
9
10
11
12

#bundle(){
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

如果我们希望把#bundle下的.button类名对应的属性集使用到#header a 中，我们就可以这样做：

1
2
3
4

#header a{
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 的形式
}

10. 映射(Maps)

Less

css 预处理器，后缀名为 .less。

less 代码无法被浏览器识别，实际开发需要转换成 css，使用 liink 标签引入 css 文件。

插件工具

Easy Less

VS Code 内置插件（less 文件保存自动生成 css 文件）

更改编译后 css 存储路径

• 设置 – 搜索less – Easy LESS:compile
• settings.json 中编辑 – “out” : “../css/”

Koala 工具 (了解)

考拉客户端：http://koala-app.com/index-zh.html

在线将 less 文件转为 css 文件。

Less 语法

单行注释不会被编译。

变量

和 javascript 一样，也有局部变量和全局变量。

• 定义在 {} 外面的就是全局变量，可以在任意地方使用。
• 定义在 {} 里面的就是局部变量，只能在 {} 中使用。

1
2
3
4
5
6
7

// 定义变量：
@变量名: 值;
@width: 200px;

// 使用变量：
css属性: @变量名;
width: @width;

插值变量

属性名称或者选择器名称都可以使用变量。

1
2
3
4
5
6
7
8

// 语法格式：
@{变量名称};

// 实例：
@width: 800px;
@w: width;
// 调用：
@w: @width;

less 运算

支持 + - * / 运算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

@w: 200px;
@h: 200px;

.father {
    width: @w;
    height: @h;
    background: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    // css3 新特性 存在兼容性问题
    // transform: translate(-50%， -50%);
    margin-top: -(@w / 2);
    margin-left: -(@h / 2);
    
    .son {
        width: 100px;
        height: 100px;
        background: #00f;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -(100px / 2);
        margin-left: -(100px / 2);
    }
}

calc 方法

calc() 函数用于动态计算长度值。

1
2
3
4
5
6
7
8
9
10
11
12
13

@w: 200px;
@h: 200px;

.father {
    width: @w;
    height: @h;
    background: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-@w / 2);
    margin-left: calc(-@w / 2);
}

混合

将代码打包到一起，提高复用性，本质就是：CV。

注意：

• 如果混合名称后面没有 {}，预处理时会保留混合的代码。
• 如果混合名称后面加上 {}，预处理时不会保留混合的代码。

定义一个 .center，再通过 .center() 进行调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.center {
    position： absolute;
    top: 50%;
    left: 50%;
    transition: translate(-50%, -50%);
}

.father {
    width: 200px;
    height: 200px;
    background: #f00;
    .center();
    
    .son {
        width:100px;
        height:100px;
        background: #00f;
        .center();
    }
}

带参数的混合

参数可以有默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@num: 50px;

// 1.打包
.radius (@num: 100px) {
    -webkit-border-radius: @num;
    -moz-border-radius: @num;
    -o-border-radius: @num;
    -ms-border-radius: @num;
    border-radius: @num;
}

// 2.调用
p {
    .radius(@num);
}

可变参数

类似 js 中的 arguments，可以拿到传递进来的所有形参。

1
2

// 语法格式：
@arguments

1
2
3
4
5
6
7

.animate(@ name, @time, @mode, @delay) {
    transition: @arguments;
}

div {
    .animate(all, 2s, linear, 3s);
}

展开运算符

如果形参使用了 ...，那么必须写在形参列表最后。

当参数数量不确定 或者 部分参数可传可不传时 使用。

1
2
3
4
5
6
7
8

// @name 和 @time 是必传的参数，其他参数可传可不传。
.animate(@name, @time, ...) {
    transition: @arguments;
}

div {
    .animate(all, 2s, linear, 3s);
}

匹配模式

通过混合的第一个字符串形参，来确定具体要执行哪一个同名混合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 上三角
.triangle ('up', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent transparent transparent @color;
}

// 调用，匹配 up
div {
    .triangle('up', @width: 40px, @color: #f00);
}

通用匹配模式

无论同名的哪一个混合被匹配了，都会先执行通用匹配模式中的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 抽出通用匹配样式
.triangle (@_, @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
}

// 上三角
.triangle ('up', @width, @color) {
    border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {
    border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {
    border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {
    border-color: transparent transparent transparent @color;
}

// 调用，匹配 up
div {
    .triangle('up', @width: 40px, @color: #f00);
}

less 导入

类似于模块化思想，解决 less 文件依赖，复用问题。

导入后可以直接调用该文件内写好的样式。

导入

独立 Less 文件之间相互引用，可以省略 .less 后缀。

1

@import "路径";

禁止导入

在 less 文件第一行添加 outL false 。

1

out: false;

less 内置方法

less 的底层是 javascript 实现的。

字符串替换

1
2
3
4

// 语法格式：
replce(“原字符串”, “要替换的参数”, “替换后的参数”);

replce(“abc”, “a”, “p”);	// pbc

判断类型

颜色操作

1
2
3
4
5
6
7
8
9
10
11
12

div {
    width: 200px;
    height: 200px;
    background: rgb(234, 233, 212);
}

div:hover {
    width: 200px;
    height: 200px;
    // 减少饱和度
    background: desaturate(rgb(234, 233, 212), 20%);
}

层级结构

& 符号表示对父选择器的引用

• 结合伪类使用，如：:before。
• 结合伪元素使用，如：:hover。

1
2
3
4
5

.father {
    .son {
        & {不生成后代关系，表示当前选择器，方便代码迁移}
    }
}

1
2
3
4
5
6
7
8

.son {
    &::before {
        content: '新增内容';
    }
    &:hover {
        color: #f00;
    }
}

:before 不可以添加 :hover 效果，伪类对不生效。

less 继承

类似于 js 中的继承，方便代码复用，便于代码维护。

1
2

// 语法格式：
.类名:expend(父类);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.center {
    position： absolute;
    top: 50%;
    left: 50%;
    transition: translate(-50%, -50%);
}

.father:expend(.center) {
    width: 200px;
    height: 200px;
    background: #f00;
    
    .son:expend(.center) {
        width:100px;
        height:100px;
        background: #00f;
    }
}

less 中的继承 和 less 中混合的区别：

1. 使用时的语法格式不同。

   混合：.类名()

   继承：:expend(父类)

2. 转换后的结果不同（混合是直接可拷贝，继承是并集选择器）

less 条件判断

less 中通过 when 给混合添加限定条件，满足才会执行混合中的代码。

when 中可以使用比较运算符(> < >= <= =)、逻辑运算符 或 函数来进行判断。

• and：并且
• , ：或者

==条件中除了可以使用比较运算符，还可以使用内置方法。==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 并且
.size1 (@w, @h) when (@w = 400px) and (@h = 400px) {
    width: @w;
    height:@h;
}
// 或者
.size2 (@w, @h) when (@w = 400px), (@h = 400px) {
    width: @w;
    height:@h;
}
// 内置方法
.size3 (@w, @c) when (iscolor(@c)) and (@w = 100%) {
    width: @w;
    color: @c;
}

div {
    .size1(300px, 400px);	// false
    .size2(300px, 400px);	// true
    .size3(#f00, 100%);		// true
}