Grow your CSS skills. Land your dream job.

[Solved] Lets Learn SASS together.

  • # May 15, 2012 at 7:05 am

    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]–>

    */

    # May 15, 2012 at 7:37 am

    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)! ;)

    # May 15, 2012 at 9:37 am

    @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);
    }


    */

    # May 15, 2012 at 9:37 am

    For Windows there’s a handy tool called Scout (on Mac as well) – which is a GUI for outputting.

    I believe it also doesn’t need Ruby to be running on your Windows Machine – so you don’t even need to worry.

    I personally hate the command line – GUI’s were invented for a reason (to make boring stuff pretty and user friendly) so apps like this are awesome.

    # May 15, 2012 at 9:52 am

    Also – as I suck at Github I think I’ve probably created this wrong, but it seems a good idea.

    I’ve created a repo with some branches here https://github.com/andyunleashed/Fun-with-SASS-LESS

    Might be good to add as we go.

    # May 15, 2012 at 10:25 am

    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?

    # May 15, 2012 at 10:42 am

    Here’s a really good article about the differences –> http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

    Personally I think that they both do an awesome job and are very similar with regard to mixins, variables etc.

    There has been some assumption that SASS requires Ruby on the server to process but just like LESS it can be pre-processed and uploaded as traditional CSS.

    # May 15, 2012 at 12:55 pm

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

    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.

    # May 15, 2012 at 1:18 pm

    @mottie – pretty much the same format, one handy trick I learned is you can also chain them, so if your link/visited pseudo or hover/active’s are the same;

    &:hover, &:active {text-decoration: underline;}
    # May 15, 2012 at 3:30 pm

    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 */
    }
    # May 15, 2012 at 8:09 pm

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

    # May 15, 2012 at 11:58 pm

    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/

    # May 16, 2012 at 12:36 am

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

    # May 16, 2012 at 7:06 am

    @chriscoyier – I also have COMPASS but my understanding is that it comes with a lot of stuff – similar to other bootstraps I don’t find it super appealing because I spend alot of time battling with and trying to understand another persons code rather than having full 100% control from start to finish. Though I think longtime you’re probably right that having a core base is the best way forward.

    @johhuanhibbert – Absolutely, because I am terrible at it!

    @joshwhite – It’s definitely worth it, I’ve been running 4 projects simultaneously and finally just forced myself to use it. I actually started by going back into a small site that I was making and rewriting the CSS into SASS – trial and error for the win.

    # May 16, 2012 at 1:22 pm

    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.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".