我是sass的新手,我有很多这样的行:
-webkit-border-top-right-radius: $topright;
-moz-border-radius-topright: $topright;
和
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
我不知道那些以" - "开头的名字是什么?我想知道"&:"和"& ::"的意思。
由于
答案 0 :(得分:6)
这些都不是sass代码。
-webkit
和-moz
前缀是供应商特定的样式。这些是非标准样式,适用于Safari和Firefox使用的Webkit和Mozilla引擎。
没有&:
和&::
选择器,&
只是标准parent selector而:
和::
是其中的一部分:-moz-placeholder
伪类和::-webkit-input-placeholder
伪元素。
答案 1 :(得分:1)
&
是父母的选择器。
例如:
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在他的评论中所说的供应商前缀。
答案 2 :(得分:1)
-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}
::
是一个伪选择器,内部元素如锚
a{
&::after{
}
}
将成为
a:after{
}
答案 3 :(得分:1)
-moz-border-radius-topright
只是Mozilla浏览器的供应商特定属性,用于支持属性在实际标准之前(并且标准已发布)。有moz
,例如webkit
,o
,&
(歌剧)
:
(也是更少)意味着"父范围的选择器" (::
和a {
color:blue;
&:hover {
color:red;
}
}
只是表示several more vendor prefixes,这里没有任何特定的,这是正常的CSS。例如:
a { color:blue; }
a:hover { color:red; }
获取翻译成
{{1}}
答案 4 :(得分:0)
' - '实际上是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