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 trialLiam Maclachlan
22,805 PointsJust sharing some SASS development -- Take a look at let me know what you think :)
It was just a starter project to play round with functions a bit more. I have taken 4 colors and wanted to display them all with darkened variations. Took about an hour to code (not used SASS like this before) and was quite a fun learning curve.
1 Answer
Craig Watson
27,930 PointsThis is pretty damn cool!
Liam Maclachlan
22,805 PointsLol. Thanks man. I'm going to go back to this soon and see if I can add a simple loop for the colors. Seeing they use the exact same set of options it seems stupid to keep retyping t5he variations ( dark, darker, darkest etc) over and over again, to create a simple map of the palette.
Craig Watson
27,930 PointsI have not seen palettes used much in other peoples code and nor do I use them, maybe I am missing something.
I even looked through the bootstrap 4 alpha release and even they just name the colors outright with variables but something looks very organised about the way you have the color palette set out and it will keep colors separated from variables which might be nice on a large project.
Think I better have a read of the Sass dosc to see the intended use behind them.
Liam Maclachlan
22,805 PointsHey man. Was going over an older course and found this. The intro to the video explains the use of maps :)
Craig Watson
27,930 PointsHi Liam,
I have been messing around with this to try and get a dynamic set of utility classes generated based on font size and line height set in what would be your normal _variables partial scss file.
http://sassmeister.com/gist/bcacafe209e12794c9c5
I will be looking to add a couple of extras like .mar-x for left right margin and .mar-y for top and bottom, but I thought I'd let another pair of eyes run over it to see if this would even become useful / if improvements can be made.
A heads up if you want to flick things around a bit and try to improve, for some reason sass will allow @each rules nested twice but if you go for a third all hell breaks loose, at least in this case anyway lol.
Really appreciate your feedback, Craig
Liam Maclachlan
22,805 PointsHey man.
That kicks ass. Shame that you can only nest two @each statement; that would really help tidy thinks up and add to the dynamic content....
On tht note, can you not add a .length() to the variable to make it dynamic and avoid the @each problem?
Instead of:
@for $i from 1 through 5 {
//Code
}
$dynamic-variable: $sizes.length();
@for $i from 1 through $dynamic-variable {
//Code
}
Not sure if my Syntax is right, but you get the idea
Craig Watson
27,930 PointsHi Liam,
Thanks for the feedback! :), I would love to be able to use the setup you suggested however because I have to declare 5 @if statements in that loop Id simply be adding a variable for the sake of it I feel.
That loop will never be able to run more than the five times the property is needed so if it was added to it would be meaningless anyway.
But if I have miss understood and you feel it would work please don't hesitate to point out what im not looking at or seeing :) if you get time of course.
Thanks Again
Liam Maclachlan
22,805 PointsI'lll look in to this mixin further but I just remebered a mixin 've been playing around with
@mixin layout__spacing--lr($spacing, $left, $right:$left) {
#{$spacing}-left: $left;
#{$spacing}-right: $right;
}
@mixin layout__spacing--tb($spacing, $top, $bottom:$top) {
#{$spacing}-top: $top;
#{$spacing}-bottom: $bottom;
}
I think that there may be a hybrid between what you have been workign on and this. #ImABemKindaG uy
Craig Watson
27,930 PointsGo the X and Y finally working, WOW is sass picky where you put things lol
Liam Maclachlan
22,805 PointsI can' even see where the X and Y come from! Lol. What line are they first reference man?
EDIT: Don't worry. Being an idiot. Foud it =p
EDIT2: Oh! And the dynamic variable could also be useful at this point. It will save you having to track back and update in multiple places, if need be, as the lib expands. Ah, but the calls are made in a specific order for the nth(). Makes sense that you may not have to worry about this.
Liam Maclachlan
22,805 PointsLiam Maclachlan
22,805 PointsYeah. The use of color maps is covered in the Modular CSS with SASS course. I'm just extending the project a little bit more to tidy up repeatable code.