

首页  思维导图  详情



bootstrap

2016-10-21 20:42:04   0  举报





仅支持查看

AI智能生成

Bootstrap 知识体系

Bootstrap Less

模版推荐

作者其他创作

大纲/内容

响应式及起步

响应式原理

什么是响应式布局

介绍

特点

优缺点

优点

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

3.相比app，无需安装成本，迭代更新容易

缺点

1.兼容各种设备工作量大，效率底下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

网站案例

http://www.ghostchina.com/

http://www.golaravel.com/

http://expo.bootcss.com/

媒体查询 Media Query

代码演示

<pre style="background-color:#002240;color:#ffffff;font-family:'宋体';font-size:15.0pt;">@media screen and (min-width:990px){ div{ border:1px solid #3c763d; background-color:#67b168; color:#3c763d; } } @media screen and (min-width:780px) and (max-width:989px){ div{ border:1px solid #2b669a; background-color:#46b8da; color:#2b669a; } } @media screen and (max-width:779px){ div{ border:1px solid #ac2925; background-color:#ce8483; color:#ac2925; } }</pre>

练习

作用

根据客户端浏览器设备的特性，有选择的执行部分CSS功能

Media 

指浏览网页的设备，如 screen、print、 tv 等

Query

查询出当前浏览器设备的特性，如类型，宽度，高度，分辨率，色彩位深，方向 Orientation( Landscape / Portrait)

测试响应式网页

使用真实物理设备

效果可靠但任务量大

模拟测试软件

chrome 浏览器

下载与安装

官网

http://getbootstrap.com/

中文技术网站

CDN

Content Delivery Network 内容分发网络

新浪：http://lib.sinaapp.com/

基本模板

视口 viewport 概念

bootstrap引入

代码演示

开发工具

editplus

webMatrix

webstorm

注意

避免使用绝对单位px

用相对单位代替 ( %, auto, em 等）

使用流式布局

float

图片大小实现自适应

img{ max-width:100% }

bootlint

全局CSS样式

移动设备优先

html 样式审查

10px

box-sizing: content-box  border-box 区别

content-box: 一个盒子的总宽度 = margin + padding + border + width

border-box: 一个盒子的总宽度 = margin + width   ( padding 和  border 都算入 width )

Normalize.css 和 reset.css

功能

差异

布局容器

container  

container-fluid

代码演示

*如何解决父元素的第一个子元素的margin-top越界问题

问题

<pre style="background-color:#002240;color:#ffffff;font-family:'宋体';font-size:15.0pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent1{ width:400px; height:200px; background-color:#faa; } .parent2{ width:400px; height:200px; background-color:#afa; } .child2{ width:200px; height:100px; background-color:#aaf; margin-top:10px; } </style> </head> <body> <div class="parent1"></div> <div class="parent2"> <div class="child2"></div> </div> </body> </html></pre>

解决方案

给父元素加border-top

有副作用

多了一个边框

给父元素家padding-top

有副作用，导致距离变大

给父元素加 overflow:hidden

副作用，内容必须隐藏

*如何解决所有子元素浮动后父元素高度变为0,且影响后面的元素问题

问题

<pre style="background-color:#002240;color:#ffffff;font-family:'宋体';font-size:15.0pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ width:800px; /*height:500px;*/ background:#faa; } .child1{ width:400px; height:100px; float:left; background:#afa; } .child2{ width:400px; height:100px; float:left; background:#aaf; } </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> </div> <hr> </body> </html></pre>

解决方案

1.为父元素指定 overflow:hidden;  有副作用

2.为元素指定高度

有局限性

子元素内容不确定

3.后面元素加上样式 clear:both

4.后置内容生成

<pre style="background-color:#002240;color:#ffffff;font-family:'宋体';font-size:15.0pt;">.parent:after{ content:""; display:table; clear:both; }</pre>

栅格系统

原理

排版布局

表格

优势：简单，结构清晰

不足：加载效率

div+css

优势：加载效率高，速度快，灵活

不足：不易控制

栅格(Grid Layout) 布局系统

优势：加载速度快，灵活，支持响应式功能，容易控制（有行/列的概念，但使用DIV + CSS 实现）

参数

设置

列设置

嵌套

列偏移

.col-md-offset-*

http://v3.bootcss.com/css/#grid-offsetting

列排序

.col-md-push-*

跨设备组合

清除浮动

.clearfix

visible

http://v3.bootcss.com/css/#grid-responsive-resets

示例代码

注意

1.row必须包含在container 或者 container-fluid 之中

2.每行只能包含12列等份，超过将另起一行。

3.列必须包含在row之中

4.列设置小分辨率向大分辨率兼容

代码示例

特点

1）分为多行（row）,一行中平均分为12列

2）内容只能放在col中，不能直接放在row中

3）所有的row必须放在容器中： .container 或 .container-fluid 之中

图片

响应式图片

.img-reponsive

图片形状

IE8不支持

代码演示

排版和链接

body

background-color: #fff;

Normalize.css

标题

H1-H6

标题样式

.h1 - .h6

副标题

标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。

中心内容 .lead

对齐方式

<div>Left aligned text.</div><div>Center aligned text.</div><div>Right aligned text.</div><div>Justified text.</div><div>No wrap text.</div>

强调文本

small

strong

cite

缩略语

子主题

地址元素

代码标签

<code>

<kbd>

<pre>

<var>

列表

无样式列表   .list-unstyled

内联列表  .list-inline

dl  .dl-horizontal

表格

基本表格

class=table

条纹表格

table-striped

带边框

.table-border

紧凑型表格

.table-condensed

表格更加紧凑，单元格中的内补（padding）均会减半。

响应式表格

.table-responsive

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格

响应式表格在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

鼠标悬停

.table-hover

行状态类

.active

.success

.info

.warning

.danger

表单

基本表单

.form-group

使每组控件之间保持一定间距 15px

不要将表单组直接和输入框组( .input-group )混合使用。建议将输入框组嵌套到表单组中使用。

.form-control

内联表单

.form-inline

.sr-only

水平排列表单

.form-horizontal

起到row的作用，元素的排列需要用到栅格系统

栅格设置不能放在 .form-group 一起

默认栅格系统： .container > .row > .col-*   水平表单中的栅格系统： .form-horizontal > .form-group > .col-*

控件支持

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

datetime chrom，ie等不支持

控件状态

静态控件

将一行纯文本和 label 元素放置于同一行，为 元素添加 .form-control-static 类即可。

焦点状态

autofocus

只读状态

readonly

禁用状态

disabled

可以为fieldset 设置disabled属性，使包含的所有控件禁用

校验状态

.has-warning  .has-error  .has-success

任何包含在定义了这些类的元素之中的控件，如果有.control-label  .form-control 和 .help-block类属性，将呈现校验状态样式

控件尺寸

.input-lg设置高度

.col-lg-*设置宽度

.form-group-lg 或 .form-group-sm 为 .form-horizontal包裹的label元素和表单控件快速设置尺寸

辅助文本

.help-block

按钮

按钮样式

.btn-default

 btn-primary

btn-success

btn-info

btn-warning

btn-danger

btn-link

尺寸

.btn-lg

.btn-sm

.btn-xs

.btn-block

状态

激活状态 .active

禁用状态 disabled 属性

多标签支持

强烈建议尽可能使用<button>元素来获得各浏览器相匹配的效果

图片

响应式图片

.img-responsive

图片形状

.img-rounded

.img-circle

.img-thumbnail

ie8及以下版本不支持

辅助类

文本颜色

text-muted

text-primary

text-success

text-info

text-warning

text-danger

文本背景颜色

bg-primary

bg-success

bg-info

bg-warning

bg-danger

关闭按钮

class="close"     &times;

三角符号

.caret

浮动

.pull-left

.pull-right

.center-block

清除浮动  .clearfix

隐藏与显示

隐藏

.hidden

显示

.show

响应式工具

组件

字体图标

使用方式

要求

不要和其他组件混合使用

只对内容为空的元素起作用

路径

font字体相对路径不要改变

文件夹名称也不能改变

改变相对路径，修改Less，重新编译

引用服务器端字体的方式

<pre style="background-color:#002240;color:#ffffff;font-family:'宋体';font-size:15.0pt;">@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }</pre>

练习

下拉菜单

基本实现

div  .dropdown   .dropup

button

ul  .dropdown-menu

对齐

.dropdown-menu-right

标题

.dropdown-header

分割线

.divider

禁用菜单项

.disabled

按钮组

基本按钮组

.btn-group

按钮工具栏

包含多组按钮组

.btn-toolbar

尺寸

.btn-group-lg sm xs

嵌套

在 .btn-group中包含 .btn-group

垂直排列

.btn-group-vertical

和 btn-group 冲突

自适应按钮组

.btn-group-justified

和 btn-group 组合使用

兼容性问题解决

按钮式下拉菜单

.btn-group

data-toggle="dropdown"

分裂式按钮下拉菜单

尺寸

.btn-lg sm xs

.dropup

输入框组

基本用法

.input-group 

.input-group-addon 

输入框组（.input-group）中只能包含单个表单控件

输入框一侧不能添加多个额外元素.input-group-addon

尺寸

为.input-group添加相应的尺寸类，内部包含元素自动调整尺寸，不需要每个元素重复添加

.input-group-lg  sm

多选框和单选框

按钮下拉菜单

分裂式按钮下拉菜单

导航

基本用法

.nav

标签页 .nav-tabs

胶囊式 .nav-pills

堆叠式 .nav-stacked

两端对齐

.nav-justified

导航条

基本用法

基础样式

.navbar

样式

.navbar-default

.navbar-inverse

导航头

.navbar-header

作用：位于导航左边，通常用来显示单位名称或商标图片等，屏幕收缩时仍保持显示

商标

.navbar-brand

可包裹文字或图片

导航内容

导航

.navbar-nav

表单

.navbar-form

按钮

.navbar-btn

文本

.navbar-text

链接

.navbar-link

组件排列

.navbar-left

.navbar-right

导航条位置

固定在顶部

.navbar-fixed-top

导航条有50px，需要设置body样式 padding-top:50px

固定在底部

.navbar-fixed-bottom

静止在顶部

.navbar-static-top

反色导航条

.navbar-inverse

导航堆叠效果

效果：小窗口时，导航内容自动隐藏，点击按钮堆叠排列出来

导航头

设置按钮

属性 data-toggle="collapse"

属性 data-target 指向内容区id，需要加#

导航内容包裹

.navbar-collapse

设置id

分类

按位置

顶部导航条

navbar-fixed-top

底部导航条

.navbar-fixed-bottom

按颜色

浅色底深色字

.navbar-default

深色底浅色字

.navbar-inverse

按定位

相对定位

position:relative

固定定位

position:fixed

结构

导航条头部

商标+按钮

.navbar-header

导航条折叠菜单

菜单，按钮，搜索框，链接，文本。。。

.navbar-collapse

面包屑导航和分页

面包屑

.breadcrumb 包裹

分页

普通分页

.pagination 包裹

.active 当前激活项目

.disabled 禁用项目

左右翻页

.pager 包裹

.previous 靠左

.next 靠右

标签、徽章、大屏展播、页面标题

标签

.label

.label-default primary success info warning danger 

徽章

.badge

大屏展播

.jumbotron

可以放在.container外，内包裹.container，实现屏幕对齐效果

页头

.page-header

缩略图、警告框

缩略图

.thumbnail

.caption

结合栅格系统使用

警告框

.alert

.alert-danger warning success info

关闭按钮

&times

class="close"

data-dismiss="alert"

进度条、媒体对象

进度条

.progress

.progress-striped

.progress-bar

.progress-bar-danger info warning success

.active

.progress-bar-striped

数值： style="width:40%" 

堆叠效果

.progress 包裹多个.progress-bar

总数不能大于100%

媒体对象

基本用法

.media 包裹

多媒体展示

.media-left  right

.media-middle bottom

主体内容

.media-body

.media-heading 定义主体标题

媒体对象列表

ul  class="media-list"

li class="media"

嵌套使用

列表组、面板

列表组

基本用法

.list-group 包裹

.list-group-item 列表项

徽章

链接

可用于ul li，也可用于 div a 组合

禁用条目

.disabled

情景类

.list-group-item-success info warning danger

定制内容

.list-group-item 可包裹其它内容形成定制

.list-group-item-heading 突出显示定制内容头

面板

基本用法

.panel 包裹

.panel-primary success info warning danger 情景效果

.panel-heading 面板标题

.panel-body 面板内容

.panel-footer 面板注脚

不会继承情景颜色

带表格面板

带列表组面板

JavaScript插件

选项卡

基本用法

导入 tab.js

选项卡中加入 data-toggle="tab"或"pill"  属性

href="#" 指向面板id

js控制

选择器选中选项卡

调用 .tab('show')

面板效果

面板中加入 fade 样式属性

默认激活项应同时加入 fade  in 样式属性

提示框和弹出框

提示框

基本用法

导入tooltip.js

属性设置

 data-toggle="tooltip"

data-placement="left right top bottom"

title="提示文字"

js初始化

$('#example').tooltip(options)

注意：不同于其他插件，提示框因考虑性能等原因，必须要初始化才能使用

属性配置

http://v3.bootcss.com/javascript/#tooltips

方法

$().tooltip(options)

.tooltip('show hide toggle destroy')

事件

show.bs.tooltip

shown.bs.tooltip

hide.bs.tooltip

hidden.bs.tooltip

弹出框

基本类同提示框

差异

显示内容分为 title 和 data-content

导入popover.js

警告框

导入 alert.js

为关闭按钮添加 data-dismiss="alert" 属性

方法

$().alert()

$().alert('close')

折叠效果

导入 collapse.js

如果单独引用，依赖transition.js

基本用法

按钮或链接添加 data-toggle="collapse" 属性

data-target="#id" 指向需要隐藏区域id

隐藏区域添加样式 collapse 初始需要显示加样式 in

百叶窗效果

面板组样式

在面板头部 panel-heading 中加入链接以及相关属性设置

将 panel-body 包裹在 .panel-collapse 属性之中

如果做成子菜单效果，则可去掉panel-body,直接加上list-group

为没个隐藏项目设置 data-parent="#id" 使其具有自动收缩效果

轮播( carousel )

导入carousel.js

基本用法

主容器

.carousel slide 包裹

设置id

data-ride="carousel" 属性

图片组

.carousel-inner 包裹

每张图片

 .item 包裹

.active 设置当前图片

.carousel-caption 包裹提示文字或相关信息

指示器

.carousel-indicators 包裹 

data-target="主容器id"

data-slide-to="对应图片序号"

.active 当前激活状态

左右翻页控件

左翻页

.left carousel-control 包裹

data-slide="prev" 属性

右翻页

.right carousel-control 包裹

data-slide="next"属性

javascript

$('.carousel').carousel()

属性设置

http://v3.bootcss.com/javascript/#carousel

options

方法

http://v3.bootcss.com/javascript/#carousel

Methods

事件

slide.bs.carousel

定制

less

关于Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

官网

www.lesscss.org

http://lesscss.cn/

编译工具

koala编译

使用介绍

http://koala-app.com/index-zh.html

node.js库

浏览器编译模式

less文件引入

rel="stylesheet/less"

less.js引入

变量

注释

/**/

// 编译时会自动过滤掉

普通变量

@变量名: 值

作为选择器和属性名

<div>@leftNav:lNav;</div><div>.@{leftNav}{</div><div>  width:100px;</div><div>}</div>

作为URL

<div>@imgURL:"https://www.baidu.com/img";</div><div>.header{</div><div>  background:url('@{imgURL}/logo.png') no-repeat;</div><div>}</div>

延迟加载

变量是延迟加载的，在使用前不一定要预先声明

<div>h1{</div><div>  font-size:@bigSize;</div><div>}</div><div>@bigSize:100px;</div>

定义多个同名变量

同名变量定义多次时，取最终定义的变量值

同级优先，就近优先

<div>@var:0;</div><div>.demoClass{</div><div>  @var:1;</div><div>  height:@var;</div><div>  @var:2;</div><div>  .testClass{</div><div>    @var:3;</div><div>    width:@var;</div><div>    @var:4;</div><div>  }</div><div>}</div><div>@var:5;</div>

混合

普通混合

混合就是一种将一系列属性从一个规则集引入（“混合”）到另一个规则集的方式。

<div>.btn{</div><div>  display:block;</div><div>  width:100px;</div><div>  height:50px;</div><div>}</div><div>.btn-primary{</div><div>  .btn;</div><div>  background-color:blue;</div><div>}</div><div>.btn-danger{</div><div>  .btn;</div><div>  background-color:red;</div><div>}</div>

不带输出的混合

需要建一个混合集，但是又不想让它输出到样式之中

<div>.btn1(){</div><div>  display:block;</div><div>  width:100px;</div><div>  height:50px;</div><div>}</div>

带选择器的混合

<span class="hljs-class" style="box-sizing: border-box; color: rgb(40, 74, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.my-hover-mixin() { <span class="hljs-keyword" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">&<span class="hljs-pseudo" style="box-sizing: border-box; color: rgb(101, 123, 131); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">:hover { <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">border: <span class="hljs-number" style="box-sizing: border-box; color: rgb(42, 161, 152); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">1px solid red; } } <span class="hljs-tag" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">button { <span class="hljs-class" style="box-sizing: border-box; color: rgb(40, 74, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.my-hover-mixin(); }

带参数的混合

<span class="hljs-class" style="box-sizing: border-box; color: rgb(40, 74, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.border-radius(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius) { <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">-webkit-border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">-moz-border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; }

带参数并且有默认值

<span class="hljs-class" style="box-sizing: border-box; color: rgb(40, 74, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.border-radius(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius: <span class="hljs-number" style="box-sizing: border-box; color: rgb(42, 161, 152); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">5px) { <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">-webkit-border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">-moz-border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">border-radius: <span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@radius; }

带多个参数的混合

<div>.mixins(@color;@padding:20px;@margin:30px){</div><div>  color-1:@color;</div><div>  padding-1:@padding;</div><div>  margin-1:@margin;</div><div>}</div><div>div{</div><div>  //.mixins(1,2,3);</div><div>  //.mixins(1,2,3;)</div><div>  //.mixins(1,2,3;50px;)</div><div>  .mixins(red)</div><div>}</div>

定义多个参数用分号";"分隔

调用混合时给定参数值列表中，如果有分号“；”，则分号表示分隔多个参数值，没有分号，则逗号表示分隔多个参数值

定义多个具有相同名称和参数数量的混合

<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(<span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color-1<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @color; } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(<span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@padding:2) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color-2<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @color; <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">padding-2<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @padding; } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(<span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@padding; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@margin: 2) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color-3<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @color; <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">padding-3<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @padding; <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">margin<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @margin @margin @margin @margin; } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.some <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.selector <span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">div { <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(<span class="lang-id" style="box-sizing: border-box; color: rgb(153, 0, 0); font-weight: bold; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">#008000); }

原则是能匹配上的都匹配

.minxin(...){}

命名参数

<div>.mixin(@color: black; @margin: 10px; @padding: 20px) {</div><div>  color: @color;</div><div>  margin: @margin;</div><div>  padding: @padding;</div><div>}</div><div>.class1 {</div><div>  .mixin(@margin: 20px; @color: #33acfe);</div><div>}</div><div>.class2 {</div><div>  .mixin(#efca44; @padding: 40px);</div><div>}</div>

调用的时候给出参数名称，则可以按照自己需要的顺序来排列参数

默认值必须是从右往左赋值

如果想给第一，第三设定值，第二取默认值，有两种方法

方法一：.不能  mixin( red;  ;30px) ,需要把第二个参数默认值抄写上去 .mixin(red; 10px; 30px)

方法二：带上参数名字 .mixin(@color:red;@padding:30px)

@arguments变量

<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.box-shadow(<span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@x: 0; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@y: 0; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@blur: 1px; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color: #000) { -webkit-<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">box-shadow<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @arguments; -moz-<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">box-shadow<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @arguments; <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">box-shadow<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: @arguments; } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.big-block { <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.box-shadow(2px; 5px); }

@arguments变量指代整个参数列表，不需要逐一罗列

匹配模式

<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(dark; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: darken(@color, 10%); } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(light; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: lighten(@color, 10%); } <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">.mixin(<span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@_; <span class="lang-at_rule" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">@color) { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">display<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: block; }

得到混合中变量的返回值

嵌套规则

什么是嵌套规则

基本用法

传统css写法

<div>.nav{</div><div>  width:960px;</div><div>}</div><div>.nav ul{</div><div>  list-style:none;</div><div>}</div><div>.nav ul li{</div><div>  display:block;</div><div>  width:150px;</div><div>}</div><div>.nav ul li a{</div><div>  text-decoration:none;</div><div>  color:#2b669a;</div><div>  font-size:14px;</div><div>}</div><div>.nav ul li a:hover{</div><div>  text-decoration:underline;</div><div>}</div>

less写法

<div>.nav{</div><div>  width:960px;</div><div>  ul{</div><div>    list-style:none;</div><div>    li{</div><div>      display:block;</div><div>      width:150px;</div><div>      a{</div><div>        text-decoration:none;</div><div>        color:#2b669a;</div><div>        font-size:14px;</div><div>        &:hover{</div><div>          text-decoration:underline;</div><div>        }</div><div>      }</div><div>    }</div><div>  }</div><div>}</div>

父元素选择器 &

基本用法

<span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">a { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: blue; &<span class="lang-pseudo" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">:hover { <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">color<span class="lang-value" style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(248, 248, 248);">: green; } }

注意区分没有加&的情况

名称拼接

<div>.btn{</div><div>  &-primary{</div><div>    background-color:blue;</div><div>  }</div><div>  &-danger{</div><div>    background-color:red;</div><div>  }</div><div>}</div><div> </div>

&代表完整的父级节点（而不仅仅是上一级）

改变选择器顺序

运算

说明

任何数值，颜色和变量都可以进行运算

less会自动推断数值的单位，所以你不必为每一个数值都加上单位(但必须至少有一个值有单位)

运算符和值之间必须以空格分开，涉及优先级时以（）进行优先级运算

数值型运算

颜色运算

#000000+21

工作方式：将16进制模式转换为rgb(0-255)来进行加法运算，再转换为16进制显示

如果超过255，则显示255

不支持英文颜色直接运算

函数

Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数

rgb(255,0,0)

blue(#343242)

提取某种颜色中蓝色的十进制数值

命名空间

<pre style="padding: 15px; white-space: pre-wrap; word-wrap: break-word; border: 2px dashed rgb(217, 238, 242); margin-top: 15px; margin-bottom: 15px; color: rgb(31, 76, 122); font-size: 18px; line-height: 26px;"><code style="font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace !important; font-size: 15px;">#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }</code></pre>

引用

作用域

首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

<pre style="padding: 15px; white-space: pre-wrap; word-wrap: break-word; border: 2px dashed rgb(217, 238, 242); margin-top: 15px; margin-bottom: 15px; color: rgb(31, 76, 122); font-size: 18px; line-height: 26px;"><code style="font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace !important; font-size: 15px;">@var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }</code></pre>

import

引入less

引入 .less 文件, .less 后缀可带可不带

引入css

导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以

导入的css内容不能进行样式混合

<div>@import "index.css";</div><div>.nav{</div><div>  //.test; //报错不能将导入的css内容参与混合。</div><div>}</div>

参数

<ul style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">reference</code>: use a Less file but do not output it</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">inline</code>: include the source file in the output but do not process it</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">less</code>: treat the file as a Less file, no matter what the file extension</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">css</code>: treat the file as a CSS file, no matter what the file extension</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">once</code>: only include the file once (this is default behavior)</li><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">multiple</code>: include the file multiple times</li></ul>

引导(导引)

基本用法

定义

当我们想根据表达式进行匹配，而非根据值和参数匹配时,则可以使用导引

<pre style="padding: 15px; white-space: pre-wrap; word-wrap: break-word; border: 2px dashed rgb(217, 238, 242); margin-top: 15px; margin-bottom: 15px; color: rgb(31, 76, 122); font-size: 18px; line-height: 26px;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 15px;">.mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; }</code></pre>

导引中比较运算符

> >= = =< <

true只表示布尔真值，除去关键字true以外的值都被视示布尔假

<pre style="padding: 15px; word-wrap: break-word; border: 2px dashed rgb(217, 238, 242); margin-top: 15px; margin-bottom: 15px;">.truth (@a) when (@a) { ... } .truth (@a) when (@a = true) { ... } .class { .truth(40); // Will not match any of the above definitions. } </pre>

逻辑运算符

and

not

逗号,

<span class="hljs-class" style="box-sizing: border-box; color: rgb(40, 74, 128); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">.mixin (<span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@a) <span class="hljs-keyword" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">when (<span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@a > <span class="hljs-number" style="box-sizing: border-box; color: rgb(42, 161, 152); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">10), (<span class="hljs-variable" style="box-sizing: border-box; color: rgb(75, 94, 100); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">@a < -<span class="hljs-number" style="box-sizing: border-box; color: rgb(42, 161, 152); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 18.5714px; white-space: pre-wrap; background-color: rgb(245, 245, 245);">10) { ... }

常见检测函数

类型

<ul style="list-style-type: none; color: rgb(20, 51, 82); font-family: Georgia, serif; font-size: 18px; line-height: 26px;"><li style="list-style-type: none;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 16px;">iscolor</code></li><li style="list-style-type: none;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 16px;">isnumber</code></li><li style="list-style-type: none;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 16px;">isstring</code></li><li style="list-style-type: none;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 16px;">iskeyword</code></li><li style="list-style-type: none;"><code style="font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Courier, monospace !important; font-size: 16px;">isurl</code></li></ul>

单位

关键字( important )

<div>.mixin(){</div><div>  color:yellow;</div><div>}</div><div>.demo{</div><div>  .mixin() !important;</div><div>}</div><div> </div>

循环

<div>.loop(@num) when(@num>0){</div><div>  .loop((@num - 1));</div><div>  width:(10px * @num);</div><div>}</div><div>div{</div><div>  .loop(5);</div><div>}</div>

合并

以，号分割属性值

<div>.mixin(){</div><div>  border+:1px;</div><div>}</div><div>.demo{</div><div>  .mixin();</div><div>  border+_:solid;</div><div>}</div><div> </div>

以空格（）分割属性值

<span style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">为了避免意外的合并，<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">merge</code><span style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;"> 需要在每个需要合并的属性名后面添加一个 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">+</code><span style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;"> 以作标示。

函数库

其他函数

字符串函数

长度相关函数

数学函数

类型函数

颜色值定义函数

颜色通道提取函数

子主题