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
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointssass function
l got the whole video till the point where Hampton Catlin used $color to get the height on other divs. can anyone explain further where he got that variable please because on top of the page its declared at #A69
.red {
background: red;
width: pxify($color);
}
4 Answers
Jeremy Faith
Courses Plus Student 56,696 PointsI hope this will answer your question. First, in the above program the line should be width: pxify( red($color)); where pxify() is a function defined by Hampton and red() is a built in sass function. The functions red(), blue(), and green() will return their respective value from a given color and the pixify() function just returns unquote( $value + "px") so you do not have to type it each time for red, blue, and green. So really the line "width: pxify( red($color));" is saying that the width will be the red value of the color (range 0-255) with "px" appended to it so it can be complied to css. This is done for red, blue, and green.
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointsthat actually makes sense and where would i find more on these built in functions?
ztwbzekpvk
12,893 PointsI still don't understand the lesson after watching it four times, Hampton brushes over stuff too quickly and doesn't explain things that well.
Jeremy Faith
Courses Plus Student 56,696 PointsWell the best I find on line is http://sass-lang.com/documentation/Sass/Script/Functions.html. There probably are better sites you just have to keep searching but this one list a many functions.
rosinapissaco
13,401 PointsYou must do it yourself in code to understand it, this is mine: http://codepen.io/rosinaaa/pen/BoZaVQ I hope this help you.
Gerrit Verhaar
17,742 PointsGerrit Verhaar
17,742 Pointsthe codepen shows the end result. So at the end of the video the $color variable is set to #A69. If you want to follow the video then it is best to clear the html and scss part in the codepen and type along with Hampton (if you can follow his speed)