Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics (retired) Speeding up Workflow with Sass Sass Functions

sass 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);
}
Gerrit Verhaar
Gerrit Verhaar
17,742 Points

the 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)

4 Answers

Jeremy Faith
PLUS
Jeremy Faith
Courses Plus Student 56,696 Points

I 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.

that actually makes sense and where would i find more on these built in functions?

I 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
PLUS
Jeremy Faith
Courses Plus Student 56,696 Points

Well 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.

You must do it yourself in code to understand it, this is mine: http://codepen.io/rosinaaa/pen/BoZaVQ I hope this help you.