Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tunde Adegoroye
20,597 PointsWhat does this symbol mean
Hi all i've been looking at this mixin and i was wondering what does the "#" symbol mean in sass ?
Here is the mixin
@mixin vendor-prefix($name, $argument) { -webkit-#{$name}: #{$argument}; -ms-#{$name}: #{$argument}; -moz-#{$name}: #{$argument}; -o-#{$name}: #{$argument}; #{$name}: #{$argument}; } p { @include vendor-prefix(hyphens, auto) }
Kevin Korte
28,149 PointsThe ultimate goal is what Jason said. I'm an Autoprefixer user myself. Another option is Prefix Free.
Jason Anello
Courses Plus Student 94,610 PointsThanks for the link Kevin.
2 Answers
Coco Jackowski
12,914 PointsThe #{} denotes interpolation. Interpolation just means that the variable inside the curly braces that come after the hash will be compiled into whatever its value is in the CSS output.
So this:
$color: red;
div.#{$color} {
background-color: #{$color};
}
will become this:
div.red {
background-color: red;
}
Tunde Adegoroye
20,597 PointsThanks for that. I just don't get why he used it for the vendor prefixes and arguements etc
Kevin Korte
28,149 PointsTunde Adegoroye because it makes this Mixin very universal. When you build the mixin, you don't have any idea what css property or value it might receive.
I could use the same mixin and get this result.
.box {
@include vendor-prefix(border-radius, 4px);
@include vendor-prefix(transform, rotate(270deg);
}
And it will compile to
.box {
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
All of that prefixed code when we only had to write one mixin, and two more lines of code.
Coco Jackowski
12,914 PointsKevin strikes again! We're both feeling helpful today.
Coco Jackowski
12,914 PointsThat vendor prefix mixin generates a list of vendor prefixed rules. It takes in $name and $argument and automatically outputs vendor prefixes so you don't have to.
This:
img {
@include vendor-prefix(border-radius, 10px);
}
Becomes this:
img {
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
It's useful because it's a pain to type all the vendor prefixes by hand, so the variable interpolation just puts the property and value you want right into the CSS.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYour question has been answered but I'd like to point out that while I agree you should have some method for managing vendor prefixes, this mixin is not the best way to handle it.
This mixin blindly adds in all vendor prefixes. Whether they're needed or not.
It's best to use some type of service which handles proper vendor prefixes for you. Autoprefixer is an example of this.
It pulls data from caniuse.com to determine which prefixes really need to go into your style sheets.
This way you write your css according to the latest spec and autoprefixer adds in what is needed.
You can check the "Usage" section in the docs to find something that will work with whatever workflow you have.