[Solved] Lets Learn SASS together.

[Andy Howells]

So I’ve been messing with SASS for a few days now and it is amazing.

If you don’t already use it for your CSS then you’re missing out – SASS will enable you to save time both in terms of creating and editing your CSS, plus it just feels right when you’re coding.

Chris’s awesome video (go to Videos on here) all about Codekit is uber helpful so I’d recommend you view it, but for those getting into or already using it, I figured a snippets thread would come in handy.

So here are some snippets I’ve made for my workflow, with instructions on how to use them in your .scss files that will output all the CSS you need. The added benefit is that you won’t even need to worry about vendor prefixes, it’s all taken care of in the mixin.

Just copy paste and then use the examples within your SASS.

–> Transitions Mixin

@mixin transition($transition-property, $transition-time, $method) {<br />
-webkit-transition: $transition-property $transition-time $method;<br />
-moz-transition: $transition-property $transition-time $method;<br />
-ms-transition: $transition-property $transition-time $method;<br />
-o-transition: $transition-property $transition-time $method;<br />
transition: $transition-property $transition-time $method;<br />
}<br />
/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser transitions.<br />
<br />
.class {<br />
@include transition($transition-property, $transition-time, $method);<br />
}<br />
<br />
$transition-property = the property you want to transition<br />
$transition-time = seconds you want the transition to last<br />
$method = how you want it to transition - e.g. ease-in-out<br />
<br />
Usage example;<br />

<hr class="bbcode_rule" />
<br />
.item {<br />
@include transition(padding, 1s, ease-in-out);<br />
}<br />

<hr class="bbcode_rule" />
<br />
*/

–> Gradients Mixin

@mixin linear-gradient($fromColor, $toColor) {<br />
background-color: $toColor; /* Fallback Color */<br />
background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */<br />
background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */<br />
background-image:    -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */<br />
background-image:     -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */<br />
background-image:      -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */<br />
background-image:         linear-gradient(top, $fromColor, $toColor);<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$fromColor', EndColorStr='$toColor');<br />
}<br />
<br />
/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser linear gradients.<br />
<br />
.class {<br />
@include linear-gradient(#color, $color);<br />
<br />
}<br />
<br />
Can pass Hex values or indeed a variable color if required.<br />
<br />
Usage example;<br />

<hr class="bbcode_rule" />
<br />
$myColor: red; // not required unless using variable.<br />
<br />
.item {<br />
@include linear-gradient(#BADA55, $myColor);<br />
}<br />

<hr class="bbcode_rule" />
<br />
<br />
IE9 Support (idea courtesy of http://www.colorzilla.com/gradient-editor/ )<br />
<br />
Support for full multi-stop gradients with IE9 (using SVG).<br />
<br />
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:<br />
<br />
<!--[if gte IE 9]><br />

.gradient {
filter: none;
}

<![endif]–>

*/

[Senff]

This is genius. Expect me to contribute as soon as I got my Mac set up again this week (thanks to Chris’ video on Codekit, I realized that software vendors don’t care about Windows users much and that the best development software is Mac only)! ;)

[Mottie]

@Senff >.< ewww macs... I’ve been learning LESS and it seems very similar to SASS, but so far from your examples it seems like a little less work in that I don’t need to use “@mixin” or “@include”. LESS’s version of a mixin is just like another class name which you add inline, so something like this (borrowing from your first example):

.transition(@transition-property, @transition-time, @method) {

-webkit-transition: @transition-property @transition-time @method;

-moz-transition: @transition-property @transition-time @method;

-ms-transition: @transition-property @transition-time @method;

-o-transition: @transition-property @transition-time @method;

transition: @transition-property @transition-time @method;

}

/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser transitions.



.class {

.transition(@transition-property, @transition-time, @method);

}



@transition-property = the property you want to transition

@transition-time = seconds you want the transition to last

@method = how you want it to transition - e.g. ease-in-out



Usage example;





.item {

.transition(padding, 1s, ease-in-out);

}





*/

[Johnnyb]

Here’s a few LESS ones I just copied and pasted from a recent project:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

box-shadow: @x @y @blur @color;

-moz-box-shadow: @x @y @blur @color;

-webkit-box-shadow: @x @y @blur @color;

}

.transition(@range: all, @time: 1s, @ease: ease-in-out) {

-moz-transition: @range @time @ease;

-webkit-transition: @range @time @ease;

-o-transition: @range @time @ease;

transition: @range @time @ease;

}

.rotate(@degree){

transform: rotate(@degree);

-ms-transform: rotate(@degree);

-webkit-transform: rotate(@degree);

-webkit-backface-visibility: hidden; /*Reduces jagged edges*/

-o-transform: rotate(@degree);

-moz-transform: rotate(@degree);

}

.inline-block{

display: -moz-inline-stack;

display: inline-block;

vertical-align: top;

zoom: 1;

*display: inline;

}

Just wondering, any advantages to using SASS over LESS?

[Mottie]

Oh, I also wanted to add that I found these online LESS converters:

• http://www.dopefly.com/less-converter/less-converter.html (also does error checking)
• http://leafo.net/lessphp/#demo (lots of nice example LESS code to compile)

One thing that isn’t mentioned above is how to handle the same item in a nested list. For example, defining the style for a link with different states or classes:

a {

color: #ce4dd6;

&:hover { color: #ffb3ff; }

&:visited { color: #c458cb; }

&.navigation { color: #fff; }

}

I believe SASS and LESS use this same format.

[TheDoc]

I’ve decided on using SASS. I’m working on my first project with it, it’s pretty fantastic. MIXINS ARE AMAZING!!!!11111

A couple more mixins:

@mixin rounded($radius: 10px) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

border-radius: $radius;

}



@mixin bgcover() {

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}



@mixin opacity($decimal,$whole) {

opacity: $decimal; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */

filter: alpha(opacity=$whole); /* IE6-IE8 */

}

[JoshWhite]

I think I’ll end up trying this on my next project. It’s on that list I really want to get to, but keep running out of time to try :)

[Chris Coyier]

Quick word, maintaining your own mixins I’ve found to be a pain in the ass long term. Way easier to just use Compass http://compass-style.org/

[joshuanhibbert]

Great idea @andy_unleash! I also suck at GitHub, maybe we should make a ‘Get Good at GitHub Group’?

[jamygolden]

SASS definitely seems cooler (due to compass) than LESS, based on the information I’ve gathered.

@joshuanhibbert @andy_unleash it should probably be called “Get good at Git”. People use the word Github like it’s a thing on it’s own :p
After some time, I’d say I’m pretty comfortable with Git now. If any of you need some help setting it up or understanding what exactly is going on I’m sure I could help.

[joshuanhibbert]

@jamy_za Ha, there we go! I’m generally alright using GitHub for Mac, but I’d be hopeless using the command line.

[JoshWhite]

Didn’t Chris do a let’s suck at Github together? :) I’d join that conversation – I’d love to have something in place that didn’t rely on subversion.

Sigh… one more thing to add to the pile. I still need to sit down and dedicate some time to learning javascript/jquery. I continually feel like what I’m doing right now is probably the most inefficient way to do it that exists :)

[Senff]

So, like I said, I planned on going back to Mac because CodeKit has no Windows version. However, I looked a little further ahead and noticed that with Compass.app, I got all I need.

No Ruby needed, no other funky stuff it seems. Took me a couple of hours to figure out which is what and what is where, but now I think I got it down.

I’ll write up a blog post about this later this weekend, in case people want to give it a shot.

[Senff]

Hey guys….so from experience, I know about the learning curve and threshold that SASS may have for Windows users. A couple of times I wanted to start with SASS and once I saw Ruby and command line and whatnot, I gave up already. Not sure if that’s just me or a general PC user problem.

But, I kept going and I’m a happy SASSer now, thanks to Compass.app, so if you’re on Windows and you need to get things going, check out my (hopefully) helpful 5-step instructions: http://www.senff.com/front-end/coding-tips/getting-started-with-sass-on-windows-the-easy-way/

[Mottie]

@Senff Honestly, having a Ruby dependency is why I shied away from SASS.

I looked into LESS, which has a very similar format, and it just uses javascript to parse the LESS into true css – with some online sites to do it for you (I shared the links above). I know it won’t work if the user turns off javascript, but as I said, it’s so similar to SASS that you could convert it without too much effort.

[Author]

Posts