less-嵌套

嵌套规则.PNG

// &：代表的是上一层选择器的名字，此例便是header
#header {
    &:after{
        content:"less id more!"
    }
    .title {
        font-weight: bold;
    }
    &_content { //理解方式：直接把 & 替换成 #header
        margin: 20px;
    }
}

#main {
    color: blue;
    @media screen{
        @media (max-width: 768px) {
            width: 100px;
        }
    };
    @media tv {
        width: 2000px;
    }
}
/* 生成的 CSS */
#main {
  color: blue;
}
@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}
@media tv {
  #main {
    width: 2000px;
  }
}

// 实战技巧 可以借助less在元素中，去定义自己的私有样式
#main {
    &.show{
        display: block;
    }
}

.show {
    display: none // 会被覆盖
}

/* 生成的 CSS */
#main.show {
  display: block;
}
.show {
  display: none; // 会被覆盖
}