less预处理器的高级用法只BEM命名的运用

less预处理器的高级用法只BEM命名的运用

主流的css预处理器有如下几种：less、scss、sass。
本博文侧重介绍less预处理器的高级用法，对于想学习基础用法的朋友，请移步 less的基础用法进行学习。
本例以一个简单的输入框表单进行举例，采用bem命名法起名，bem的规则详见 bem在css中的应用。

优缺点分析

大家都知道bem的一个缺点就是命名过长，而less的高级用法中符号&，可以完美解决这个问题。

效果图

html

<div class="form">
    <div class="form__item">
        <label class="form__item__label">姓名label>
        <input type="text" class="form__item__input">
    div>
    <div class="form__item form__item--required">
        <label class="form__item__label">手机号label>
        <input type="text" class="form__item__input">
    div>
div>

less

/*
  less高级标签&的使用--表单的写法（BEM写法
*/
.form{
    border:1px solid #f00;
    width:600px;
    margin:40px auto;
    &__item{
        overflow: hidden;
        &:not(:last-child){
            margin-bottom:10px;
        }
        &__label,&__input{
            font-size: 14px;
            float:left;
        }
        &__label{
            width:20%;
            padding-right:10px;
            text-align:right;
            &:before{
                display: inline-block;
                color:#f00;
            }
        }
        &__input{
            width:60%
        }
        &--required &{
            &__label:before{
                content:"*";
            }
        }
    }
}

css

/**
  less高级标签&的使用--表单的写法（BEM写法
*/
.form {
  border: 1px solid #f00;
  width: 600px;
  margin: 40px auto;
}
.form__item {
  overflow: hidden;
}
.form__item:not(:last-child) {
  margin-bottom: 10px;
}
.form__item__label,
.form__item__input {
  font-size: 14px;
  float: left;
}
.form__item__label {
  width: 20%;
  padding-right: 10px;
  text-align: right;
}
.form__item__label:before {
  display: inline-block;
  color: #f00;
}
.form__item__input {
  width: 60%;
}
.form__item--required .form__item__label:before {
  content: "*";
}