## :-: [Less 中文網](http://lesscss.cn/functions/#functions-overview)
```
- less (css預編譯)
$ npm install -g less
- less解析
$ lessc demo.less demo.css
```
```
// 雙斜線注釋(編譯后不會顯示)
/*
* 包裹注釋(編譯后會顯示)
*/
// 1.變量以及運算
@Color: red;
@w: 400px;
@h: @w - 100px;
// 2.混合(帶參數函數) 從一個規則,引入到另一個規則。 調用方式:.border(#000, red);
.border(@top-color:red,@left-color:#444) {
border-top: 2px solid @top-color;
border-left: 6px solid @left-color;
}
body {
// 作用域
@size: 16px; // 定義變量
font-size: @size;
.border(#000, red); // 調用
.wrap {
border: 1px solid @Color;
width: @w;
height: @h;
font-size: @size;
.border; // 默認參數、
.demo {
// 作用域
@size: 10px; // 定義變量
font-size: @size; // 實際上 font-size:30px; 因為變量是延遲加載的、
.border(#245, #999);
@size: 30px; // 定義變量
}
}
}
// less中模塊的引入、
@import "./transparent.less";
.demo {
// 匹配
.trangle(T, #236, 30px);
}
// @arguments
.border(@w,@s,@c) {
border: @arguments;
// 相當于 border: @w @s @c; 外部調用:.border(1px, solid, red);
}
.box {
width: 200px;
height: 200px;
.border(1px, solid, red);
}
// transparent.less 文件 @import './transparent.less';
// 外部調用:.trangle(T, #236, 30px);
.trangle(T,@color:red,@width:25px) {
border-width: @width;
border-style: solid;
border-color: transparent;
border-top-color: @color;
}
.trangle(R,@color:red,@width:25px) {
border-width: @width;
border-style: solid;
border-color: transparent;
border-right-color: @color;
}
.trangle(B,@color:red,@width:25px) {
border-width: @width;
border-style: solid;
border-color: transparent;
border-bottom-color: @color;
}
.trangle(L,@color:red,@width:25px) {
border-width: @width;
border-style: solid;
border-color: transparent;
border-left-color: @color;
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request