• LESS速查


    注释

    缓存式注释/*注释内容*/ 
    非缓存式注释//注释内容

     

    变量

    @nice-blue: #5B83AD;

    @light-blue: @nice-blue + #111;

    #header { color: @light-blue; }

     

    混合

    1.混合类:

    .bordered {

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

    }

    #menu a {

    color: #111;

    .bordered;

    2.混合带参数:

    .border-radius (@radius) {

    border-radius: @radius;

    -moz-border-radius: @radius;

    -webkit-border-radius: @radius;

    }}

     

    #header {

    .border-radius(4px);

    }

    我们还可以像这样给参数设置默认值:

    .border-radius (@radius: 5px) {

    border-radius: @radius;

    -moz-border-radius: @radius;

    -webkit-border-radius: @radius;

    }

    #header {

    .border-radius;

    }

     

    模式匹配

    LESS 提供了通过参数值控制 mixin 行为的功能,让我们先从最简单的例子开始:

    .mixin (@s, @color) { ... }

    .class {

    .mixin(@switch, #888);

    }

    如果要根据 @switch 的值控制 .mixin 行为,只需按照下面的方法定义 .mixin:

     

    .mixin (dark, @color) {

    color: darken(@color, 10%);

    }

    .mixin (light, @color) {

    color: lighten(@color, 10%);

    }

    .mixin (@_, @color) {

    display: block;

    }

    然后调用:

    @switch: light;

     

    .class {

    .mixin(@switch, #888);

    }

    将会得到以下 CSS:

     

    .class {

    color: #a2a2a2;

    display: block;

    }

    传给 .mixin 的颜色将执行 lighten 函数,如果 @switch 的值是 dark,那么则会执行 darken 函数输出颜色。

     

    运算:

    @test:800px;

    body{

    @test - 200; //运算会自动同步单位

    }

     

    嵌套规则

    LESS 可以让我们以嵌套的方式编写层叠样式

    #header {

    color: black;

     

    .navigation {

    font-size: 12px;

    }

    .logo {

    300px;

    &:hover { text-decoration: none }

    }

    }

    注意 & 符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

    例如:

    .bordered {

    &.float {

    float: left;

    }

    .top {

    margin: 5px;

    }

    }

    会输出:

     

    .bordered.float {

    float: left;

    }

    .bordered .top {

    margin: 5px;

    }

     

    @arguments 变量

    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

    box-shadow: @arguments;

    -moz-box-shadow: @arguments;

    -webkit-box-shadow: @arguments;

    }

    .box-shadow(2px, 5px);

    将会输出:

    box-shadow: 2px 5px 1px #000;

    -moz-box-shadow: 2px 5px 1px #000;

    -webkit-box-shadow: 2px 5px 1px #000;

     

    避免编译

    ~"样式" 可用单引号或双引号

    有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

     

    要输出这样的值我们可以在字符串前加上一个 ~,例如:

    .class {

    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

    }

    这叫作“避免编译”,输出结果为:

     

    .class {

    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

    }

     

    作用域

    LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。

    @var: red;

    #page {

    @var: white;

    #header {

    color: @var; // white

    }

    }

    #footer {

    color: @var; // red

    }

     

    !important关键字

     

    调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important:

     

    .mixin (@a: 0) {

    border: @a;

    boxer: @a;

    }

    .unimportant {

    .mixin(1);

    }

    .important {

    .mixin(2) !important;

    }

    编译成:

     

    .unimportant {

    border: 1;

    boxer: 1;

    }

    .important {

    border: 2 !important;

    boxer: 2 !important;

    }

  • 相关阅读:
    学习&分享
    跳槽
    20121113:延期通知书
    2012.9.9 baocheng博客园正式与大家见面啦!
    数据库
    ASP.Net模板引擎
    javascript图片切换效果
    dockercompose环境下zookeeper单机搭建、集群搭建
    Linux服务器日常巡检脚本
    MMOS FFB伺服直驱方向盘主控板DIY
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/5478342.html
Copyright © 2020-2023  润新知