![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
less
Mengzy007
这个作者很懒,什么都没留下…
展开
-
less-作为函数使用的混合
1、编辑less:.mixin() { @width: 100%; @height: 200px;}.caller { .mixin(); width: @width; height: @height;}生成css:.caller { width: 100%; height: 200px;}2、编辑less:.average(@x, @y) { @a原创 2017-06-20 00:03:06 · 511 阅读 · 0 评论 -
less转css
1、命令行: $ lessc mian.less原创 2017-06-13 22:29:10 · 849 阅读 · 0 评论 -
less-Extend(扩展)
扩展是一个合并减少伪类选择器是放在与匹配的引用。1、扩展编辑less:nav ul { &:extend(.inline); background: blue;}.inline { color: red;}生成css:nav ul { background: blue;}.inline,nav ul { color: red;}2、扩展嵌套选择器编辑less:.原创 2017-06-18 01:01:26 · 635 阅读 · 0 评论 -
less-高级参数和@reset变量
1、.mixin(3)编辑less:.mixin(@a: 3) { property: @a;}p{ .mixin();}生成css:p { property: 3;}2、.mixin(…)编辑less:.mixin(@listofvariables...) { border: @listofvariables;}p { .mixin(1px; solid; r原创 2017-06-21 00:34:12 · 873 阅读 · 0 评论 -
less-变量
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;header { color: @light-blue; }输出: #header { color: #6c94be; }原创 2017-06-17 14:29:11 · 227 阅读 · 0 评论 -
less-mixin(混入)
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered;}.post a { color: red; .bordered;}输出:.bordered { border-top: dotted 1px blac原创 2017-06-17 14:33:54 · 3420 阅读 · 0 评论 -
less-Nested Rules(嵌套规则)
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}输出:#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 3原创 2017-06-17 14:39:10 · 410 阅读 · 0 评论 -
less-伪元素
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }}输出:.clearfix { display: block原创 2017-06-17 14:42:31 · 15282 阅读 · 0 评论 -
less-Namespaces and Accessors(名称空间和访问器)
组织mixin,提供封装,重用或分发编辑less:#bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } //可以原创 2017-06-17 19:17:38 · 384 阅读 · 0 评论 -
less-Variable Interpolation(变量插值)
1、选择器编辑less:// Variables@my-selector: banner;// Usage.@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto;} 输出css:.banner { font-weight: bold; line-height: 40px; marg原创 2017-06-17 19:39:37 · 599 阅读 · 0 评论 -
less-Reducing CSS Size(减少css)
减少重复代码编辑less:.my-inline-block() { display: inline-block; font-size: 0;}.thing1 { .my-inline-block;}.thing2 { .my-inline-block;}生成css:.thing1 { display: inline-block; font-size: 0;原创 2017-06-18 21:19:45 · 241 阅读 · 0 评论 -
less-mixin(混合)
1、混合类选择器和id选择器编辑less:.a, #b { color: red;}.mixin-class { .a(); //括号可以省略}.mixin-id { #b(); //括号可以省略}生成css:.a, #b { color: red;}.mixin-class { color: red;}.mixin-id { color: re原创 2017-06-18 22:49:10 · 532 阅读 · 0 评论 -
less-带参数的混合(arguments)
1、编辑less:.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}#header { .border-radius(4px);}.button { .border-radius(原创 2017-06-19 23:52:47 · 3196 阅读 · 0 评论