1

I'm newbie at sass and I've a lot of lines like this:

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

and

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

I don't know what are those names that start with a "-" and I want to know what "&:" and "&::" mean.

Thanks

Cremix_hellven
  • 895
  • 2
  • 7
  • 13
  • 1
    Those names that start with a '-' are called vendor prefixes: http://davidwalsh.name/vendor-prefixes – Ayush Aug 19 '14 at 09:24
  • Thanks you ;) I learnt that, e.g. `&:after`, it's the sass way to write pseudo-elements but I don't know what means those two: `&:` and `&..` – Cremix_hellven Aug 19 '14 at 09:37

5 Answers5

6

None of those are sass code.

The -webkit and -moz prefixes are vendor specific styles. Those are non-standard styles that apply to the Webkit and Mozilla engines, used by Safari and Firefox.

There are no &: and &:: selectors, the & is just the regualar sass parent selector and the : and :: is part of the :-moz-placeholder pseudo-class and the ::-webkit-input-placeholder pseudo element.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
1

& is a parent's selector. For example:

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

It is compiled to:

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

You can see the documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

The : or :: is a pseudo-element. In this case to set the style for the placeholder attribute.

See examples here: http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element

- is a vendor prefix like @xbonez has said in his comment.

SnakeDrak
  • 3,406
  • 4
  • 28
  • 41
1
-webkit-border-top-right-radius: $topright; 
-moz-border-radius-topright: $topright;

here - $topright is a variable with some css value like $topright : 10px;

then converted to css 

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


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

:: is a is a pseudo-selector with inner element like anchor 

a{
 &::after{

 }
}

will become 

a:after{
}
knittl
  • 246,190
  • 53
  • 318
  • 364
Suraj Rawat
  • 3,685
  • 22
  • 33
1

-moz-border-radius-topright is simply a vendor specific property for Mozilla browsers, to support properties before they were in the actual standard (and the standard was published). There are several more vendor prefixes such asmoz, webkit, o (opera)

& in sass (also in less) means "the selector of the parent scope" (: and :: just denote pseudo-selectors, nothing sass-specific here, that's normal css). For instance:

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

Gets translated into

a { color:blue; }
a:hover { color:red; }
Community
  • 1
  • 1
knittl
  • 246,190
  • 53
  • 318
  • 364
0

The '-' is actually part of CSS. They are used to indicate vendor prefixes which are used for new CSS features that are not yet part of the formal CSS specification. More info - http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

The '&' character is used in SASS to refer to the parent selector. More info - http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

The following SASS code:

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

Will compile to the following CSS:

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

The ':' and '::' characters are used to select pseudo-elements - see http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#Pseudo-elements

heardy
  • 54
  • 4