这个sass代码是什么意思?

时间:2014-08-19 09:22:03

标签: css sass

我是sass的新手,我有很多这样的行:

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

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

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

由于

5 个答案:

答案 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,例如webkito&(歌剧)

sass中的

:(也是更少)意味着"父范围的选择器" (::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