LESS中的字体单元和＆符号与BEM语法问题

Question

我对使用BEM语法和字体单元的LESS编译器中的＆符号行为感到困惑

1. 当使用pxtoem将px转换为em时，基本字体大小为px为12px（0.75em），但转换为11px时为0.917em。

2. 关于＆符行为

示例：

<div class="search-form search-form--full">
    <p class="search-form__text">
</div>

据我所知，&只会将嵌套选择器连接（连接）到外部选择器的整个列表，或者可能是同一级别，所以：

search-form{
    &__text{
        font-size: 10px;
    }
}

将遵守：

search-form search-form__text{
    font-size: 10px;
}

如何加入--full选择器。

提前感谢

Answer 1

要获取搜索表单 - 已完成，您必须执行此操作：

.search-form{
    display:block;

    &__text{
      font-size: 10px;
    }

    &--full {
      color: #fff;
    }

 }

你将拥有：

.search-form {}
.search-form__text {}
.search-form--full {}

Answer 2

关于PxToEm转换器，请注意哪个元素是父元素。

如果我们有一个LESS或Sass Mixin转换为.pxtoem（）;

例如：

body { font-size: 16px }
span { .pxtoem(12) }

它是12/16 = 0.75em

但如果你这样做：

例如：

p { font-size: 12px }
p span { .pxtoem(11) }

这一次，它是11/12 = 0.91em而不是11/16（正文字体大小）;

你的mixin肯定是孩子除以父母而不是孩子除以身体

如果您需要，请使用REM。检查一下：http://snook.ca/archives/html_and_css/font-size-with-rem