这个 sass 代码是什么意思？答案

【问题标题】：What does it mean this sass code?这个 sass 代码是什么意思？
【发布时间】：2019-04-03 17:02:37
【问题描述】：

我是 sass 的新手，我有很多这样的台词：

-webkit-border-top-right-radius: $topright;
-moz-border-radius-topright: $topright;

和

&::-webkit-input-placeholder {@content}
&:-moz-placeholder           {@content}

我不知道那些以“-”开头的名字是什么，我想知道“&:”和“&::”是什么意思。

谢谢

【问题讨论】：

以“-”开头的名称称为供应商前缀：davidwalsh.name/vendor-prefixes
谢谢 ;) 我知道了，例如&:after，这是写伪元素的sass方式，但我不知道这两个是什么意思：&:和&..

标签： css sass

【解决方案1】：

这些都不是 sass 代码。

-webkit 和 -moz 前缀是特定于供应商的样式。这些是适用于 Safari 和 Firefox 使用的 Webkit 和 Mozilla 引擎的非标准样式。

没有 &: 和 &:: 选择器，& 只是常规的 sass parent selector 和 : 和 :: 是 :-moz-placeholder 伪类和 @987654330 的一部分@伪元素。

【讨论】：

谢谢你 ;) @Guffa，帮了我很多

【解决方案2】：

-webkit-border-top-right-radius: $topright; 
-moz-border-radius-topright: $topright;

这里 - $topright 是一个具有一些 css 值的变量，例如 $topright : 10px;

然后转成css

 -webkit-border-top-right-radius: 10px; 
-moz-border-radius-topright: 10px;


&::-webkit-input-placeholder {@content}
&:-moz-placeholder           {@content}

:: is a 是一个伪选择器，内部元素类似于锚

a{
 &::after{

 }
}

会变成

a:after{
}

【讨论】：

【解决方案3】：

-moz-border-radius-topright 只是 Mozilla 浏览器的供应商特定属性，用于支持在实际标准中（并且标准发布）之前的属性。有several more vendor prefixes如moz、webkit、o（歌剧）

& 在 sass 中（也在 less 中）表示“父范围的选择器”（: 和 :: 只表示 pseudo-selectors，这里没有特定于 sass 的内容，这是正常的 css）。例如：

a {
  color:blue;
  &:hover {
    color:red;
  }
}

翻译成

a { color:blue; }
a:hover { color:red; }

【讨论】：

谢谢你 ;) @knittl，对于两个回答者

【解决方案4】：

& 是父母的选择器。例如：

div {
    background: red;
    &.blue {
       background: blue !important;
    }
    &:hover {
       background: transparent;
    }
}

编译成：

div { 
    background: red;
}
div.blue {
    background: blue !important;
}
div:hover {
    background: transparent;
}

您可以查看文档：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

: 或 :: 是一个伪元素。在这种情况下设置占位符属性的样式。

在此处查看示例：http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element

- 是一个供应商前缀，就像@xbonez 在他的评论中所说的那样。

【讨论】：

【解决方案5】：

“-”实际上是 CSS 的一部分。它们用于指示供应商前缀，这些前缀用于尚未成为正式 CSS 规范的一部分的新 CSS 功能。更多信息 - http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

'&' 字符在 SASS 中用于引用父选择器。更多信息 - http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

以下SASS代码：

div {
    color: red;
    &:hover {
        color: green;
    }
}

将编译为以下 CSS：

div {
    color: red;
}
div:hover {
    color: green;
}

':' 和 '::' 字符用于选择伪元素 - 请参阅 http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#Pseudo-elements

【讨论】：