less学习

Posted 2020-08-22 喵～

// 1.变量:颜色可做+-
    // from
    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #header { color: @light-blue; }
    // to
    #header { color: #6c94be;}

// 2.混入(Mixins)，#id,.class的样式直接添加
    // from
    .bordered {
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
    #backgroundcolor {
        background-color: #fcf;
    }
    #menu a {
        color: #111;
        .bordered;
        #backgroundcolor;
    }
// 2.1 带参数混入
.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}
// 3.嵌套规则
    // from
    #header {
        color: black;
        .navigation {
            font-size: 12px;
        }
        .logo {
            width: 300px;
        }
    }
    // to
    #header {
        color: black;
    }
    #header .navigation {
        font-size: 12px;
    }
    #header .logo {
        width: 300px;
    }
    // 套用伪类
    .clearfix {
        display: block;
        zoom: 1;

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

// 4.运算：任何数字、颜色或者变量都可以参与运算。
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

// color: #888 / 4;
// background-color: @base-color + #111;
// height: 100% / 2 + @filler;

// 5.函数 percentage, saturate, spin, lighten
@base: #f04615;
@width: 0.5;

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

// 6.命名空间和访问器
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle > .button;//引入
}

// 7.作用域：拥有块级作用域{}
@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}
#footer {
    color: @var; // red
}
// 8.导入import， 同一个文件只能导入一次，@import xx 只有第一次语句有效
@import "lib.css";
@import "lib"; //lib.less;
@imported-color: red;
h1 { color: green; }

@import "library.less" screen and (max-width: 400px); // 通过media query指定的import
@import "library.less"; // 无media query的import

.class {
    color: @importedColor; // 使用导入的变量
}
// to
// 对应通过media query指定的import
@media screen and (max-width: 400px) {
    h1 { color: green; }
}

// 对应无media query的import
h1 { color: green; }
.class {
    // 使用导入的变量
    color: #ff0000;
}
// 8.1 在规则中导入
pre {
    @import "library.less";
    color: @importedColor;
}

// 9.字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
// 10.选择器插值
@name: blocked;
[email protected]{name} {
    color: black;
}
// 11.media query作为变量
@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
    set {
        padding: 3 3 3 3;
    }
}
// to
@media screen, (max-width: 500px) {
    set {
        padding: 3 3 3 3;
    }
}