(a)
Posted on 2014-02-14 | Category webdev

Sass is a powerfull tool for moder front-end web development. It's a preprocessor made to make coding CSS easier. Let's look at what Sass has to offer.

Using variables for selectors or properties.

$engine-transform: transform !default;
@mixin keyframes($name) {
    @-webkit-keyframes $name {
        $engine-transform: -webkit-transform;
        @content;
    }
    @keyframes $name {
        $engine-transform: transform;
        @content;
    }
}
@include keyframes(vertical-box-flip) {
    0% {
        #{$engine-transform}: rotatex(0deg);    
    }
}
$ie10-useragent: "html[data-useragent*='MSIE 10.0']";
.call-box .flip-box {
    width: 100%;
    height: 100%;
    @include transform-style(preserve-3d);
    @include animation(vertical-box-flip, 20s, ease-in-out, infinite);
    #{$ie10-useragent} & {
        animation: none;
    }
}

Can you import a regular CSS file without changing the extension?

Mixin, Placeholder, Functions, Extend

@mixin stuff($variable1, $variable2, $variable3) {
    selector: $variable1;
    selector: $variable2;
    selector: $variable3;
}

.thing {
    @include stuff(red, green, yellow);
}
%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
    @extend %center;
}
@function my-calculation-function($some-number, $another-number){
    @return $some-number + $another-number
}

.my-module {
    padding: my-calculation-function(10px, 5px);
}

// Compass functions
color: lighten(#333, 10%);
color: darken(#fff, 20%);

// We use a function!
@function min-max($max){
    @if $max == true {
        @return 'max-width';
    } @else {
        @return 'min-width';
    }
}
.module {
    background: $header-pannel-background-color;
    padding: 0.5rem;
    border-top: 1px solid $module-border-color;
    border-bottom: 1px solid $module-border-color;
    @include bp(ipad-portrait) {
        border-left: 1px solid $module-border-color;
        border-right: 1px solid $module-border-color;
    }
}

.this-div {
    @extend .module;
}

« back to blog list