Sass引用父选择器，使用嵌套选择器中的&符号字符 [英] Sass referencing parent selectors using the ampersand character within nested selectors

问题描述

当我认为萨斯是切片面包最酷的事情，它不得不去让我失望。我试图使用&号来选择嵌套项目的父级。这是一个复杂的选择，并返回一些意想不到的结果...

我的sass：

 code> .page  -  about-us {
a {
 text-decoration：none; 
} 
 .fa-stack {
 .fa {
 color：pink; 
} 
 a& {
&：hover {
 .fa-circle-thin {
 color：red; 
} 
 .fa-twitter {
 color：blue; 
} 
} 
} 
} 
} 
  

$ b b

输出的CSS：

  .page  -  about-us a {
 text-decoration：none; 
} 
 .page  -  about-us .fa-stack .fa {
 color：pink; 
} 
 a .page  -  about-us .fa-stack：hover .fa-circle-thin {
 color：red; 
} 
 a .page  -  about-us .fa-stack：hover .fa-twitter {
 color：blue; 
} 
  

预期输出（注意a标签的位置）：

  .page  -  about-us a {
 text-decoration：none; 
} 
 .page  -  about-us .fa-stack .fa {
 color：pink; 
} 
 .page  -  about-us a .fa-stack：hover .fa-circle-thin {
 color：red; 
} 
 .page  -  about-us a .fa-stack：hover .fa-twitter {
 color：blue; 
} 
  

演示：
http://sassmeister.com/gist/8ed68bbe811bc9526f15

解决方案

将父选择器存储在变量中！

采取以下类似BEM的SASS：

  .content-block {
& __ heading {
 font-size：2em; 
} 
 
& __ body {
 font-size：1em; 
} 
 
&  -  featured {
& __ heading {
 font-size：4em; 
 font-weight：bold; 
} 
} 
} 
  

.content-block - featured 将会是 .content-block - featured .content-block - featured__heading

它不像单个&符号那样优雅，但是你可以将父选择器存入一个变量！所以，从上面的例子中得到你可能会没有硬编码的父选择器：

  .content-block {
 $ p：& ;; //存储嵌套使用的父选择器
 
& __ heading {
 font-size：2em; 
} 
 
& __ body {
 font-size：1em; 
} 
 
&  -  featured {
＃{$ p} __ heading {
 font-size：4em; 
 font-weight：bold; 
} 
} 
} 
  

---

所以，OP，在你的情况下，你可以尝试这样：

  .page  -  about-us {
 $约：& ;; // store about us selector 
 
 a {
 text-decoration：none; 
} 
 
 .fa-stack {
 .fa {
 color：pink; 
} 
 
＃{$ about} a& {
&：hover {
 .fa-circle-thin {
 color：red; 
} 
 .fa-twitter {
 color：blue; 
} 
} 
} 
} 
} 
  

Just when I thought Sass was the coolest thing since sliced bread, it had to go and let me down. I'm trying to use the ampersand to select a parent of a nested item. It's a complex selection and its returning some unexpected results...

My sass:

.page--about-us {
  a {
    text-decoration:none;
  }
  .fa-stack {
    .fa {
      color:pink;
    }
    a & {
      &:hover {
        .fa-circle-thin {
          color:red;
        }
        .fa-twitter {
          color:blue;
        }
      }
    }
  }
}

Outputted CSS:

.page--about-us a {
  text-decoration: none;
}
.page--about-us .fa-stack .fa {
  color: pink;
}
a .page--about-us .fa-stack:hover .fa-circle-thin {
  color: red;
}
a .page--about-us .fa-stack:hover .fa-twitter {
  color: blue;
}

Expected Output (Note the placement of the a tag):

.page--about-us a {
  text-decoration: none;
}
.page--about-us .fa-stack .fa {
  color: pink;
}
.page--about-us a .fa-stack:hover .fa-circle-thin {
  color: red;
}
.page--about-us a .fa-stack:hover .fa-twitter {
  color: blue;
}

Demo: http://sassmeister.com/gist/8ed68bbe811bc9526f15

解决方案

You can store the parent selector in a variable!

Take the following BEM-like SASS:

.content-block {
    &__heading {
        font-size: 2em;
    }

    &__body {
        font-size: 1em;
    }

    &--featured {
        &__heading {
            font-size: 4em;
            font-weight: bold;
        }
    }
}

The selector inside of .content-block--featured is going to be .content-block--featured .content-block--featured__heading which might not be what you're after.

It's not as elegant as the single ampersand but you can stash the parent selector into a variable! So to get what you might be after from the above example without hard-coding the parent selector:

.content-block {
    $p: &; // store parent selector for nested use

    &__heading {
        font-size: 2em;
    }

    &__body {
        font-size: 1em;
    }

    &--featured {
        #{$p}__heading {
            font-size: 4em;
            font-weight: bold;
        }
    }
}

---

So, OP, in your case you might try something like this:

.page--about-us {
    $about: &; // store about us selector

    a {
        text-decoration:none;
    }

    .fa-stack {
        .fa {
            color:pink;
        }

        #{$about} a & {
            &:hover {
                .fa-circle-thin {
                    color:red;
                }
                .fa-twitter {
                    color:blue;
                }
            }
        }
    }
}

这篇关于Sass引用父选择器，使用嵌套选择器中的&符号字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！