Less | 学习Less(npm版本)

Install Less

cnpm install less -g

查看版本(可能还没有假如环境变量，手动加入吧!!!)

lessc -v

index.less

//变量
@nice-blue: rgba(22, 110, 197, 0.2);
@light-blue: #c2f2f8;

.header {
    background: @light-blue;
}


// 混合
.floter {
    border-top: dotted;
    border-bottom: soild 2px black;
}

.line-foolter {
    .floter;
    display: flex;
    flex-direction: column;
}

// 参数混合
.line(@height) {
    width: 100%;
    height: @height;
}

.black {
    .line(100px);
    margin: 100px auto;
}

.black2 {
    .line(3000px);
    margin: 200px auto;
}

// 参数默认值
.chen(@xingming : 20px) {
    width: @xingming;
    height: @xingming/2;
}


div {
    .chen(30px);
}

.divP {
    .chen();
}

// @arguments 变量
.box-shadow(@x: 0, @y: 0, @blur: 1px, @coloe: #666) {
    box-shadow: @arguments;
}

body {
    .box-shadow(2px, 3px);
}

// LESS通过导引混合而非if/else语句来实现条件判断
.mixin(@a) when (@a>10) {
    background: white;
}

.mixin(@a) when (@a=10) {
    background: black;
}

.mixin(@a) when (@a<10) {
    background: #666;
}

.backG {
    .mixin(30);
}


//嵌套规则
#header {
    color: black;

    .navigation {
        font-size: 12px;
    }

    .logo {
        width: 300px;

        &:hover {
            text-decoration: none
        }
    }
}

//  & 符号（串联选择器）
.bordered {
    &.float {
        float: left;
    }

    .top {
        margin: 5px;
    }
}

//运算
@base: 10px;

.xinxiao {
    margin: @base+10 auto;
}


// Color函数
@base: #f04615;

.class {
    color: saturate(@base, 5%);
    background-color: lighten(spin(@base, 8), 25%);
}


// Math 函数
h1 {
    font-size: ceil(2.4)
}

// 命名空间
#bundle {
    .button () {
        display: block;
        border: 1px solid black;
        background-color: grey;

        &:hover {
            background-color: white
        }
    }

    .tab {}

    .citation {}
}

#header a {
    color: orange;
    #bundle>.button;
}

//   作用域
@var: red;

#page {
    @var: white;

    #header {
        color: @var; // white
    }
}

#footer {
    color: @var; // red  
}

//注释
/*这个注释能显示在.css文件之中*/

//Importing
@import './index2.less';
// 可以不用后缀.less
// @import './index2';

// 也可以不用处理直接引入css文件(LESS就会跳过它不去处理它)
@import "index2.css";

// 避免编译
.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

// JavaScript 表达式
@var：`"hello".toUpperCase() + '!'`;

index2.less

/*我的第二个.less文件*/

index2.css

body{
    background: url("./images/wx.png");
}

index.css

@import "index2.css";
.header {
  background: #c2f2f8;
}
.floter {
  border-top: dotted;
  border-bottom: soild 2px black;
}
.line-foolter {
  border-top: dotted;
  border-bottom: soild 2px black;
  display: flex;
  flex-direction: column;
}
.black {
  width: 100%;
  height: 100px;
  margin: 100px auto;
}
.black2 {
  width: 100%;
  height: 3000px;
  margin: 200px auto;
}
div {
  width: 30px;
  height: 15px;
}
.divP {
  width: 20px;
  height: 10px;
}
body {
  box-shadow: 2px 3px 1px #666;
}
.backG {
  background: white;
}
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}
.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}
.xinxiao {
  margin: #fa501f auto;
}
.class {
  color: #f6430f;
  background-color: #f8b38d;
}
h1 {
  font-size: 3;
}
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}
#page #header {
  color: white;
}
#footer {
  color: red;
}
/*这个注释能显示在.css文件之中*/
/*我的第二个.less文件*/
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
@var ：HELLO!;