Sass

$baseFontSize: 16px;
$bgColor: #FFF;
$defaultTextColour: rgb(255,25,233);

body {
    font-size: $baseFontSize;
}

h1 {
    font-size: $baseFontSize * 3;
}


@mixin visually-hidden {
        visibility: hidden;
        display: none;
}

#validationErrorMessage {
    color: red;
    @include visually-hidden;
}

#mainNavMenu {
  width: 100%;
  height: 50px;
  ul { list-style-type: none; }
  li {
    float: left;
    a { font-size: 20px; }
  }
}


.awesomeBox {
    border: {
        style: solid;
        top: {
            width: 100px;
            color: blue;
        }
        bottom: {
            width: 200px;
            color: red;
        }
    }
}

$kolor: darken(red, 30%);
p {
    color: $kolor;
}


$roznica: 10px;
$max: 100px;
$aktualny: $max;

@for $i from 1 through 6 {
    h#{$i} { width: $aktualny  }
    $aktualny: $aktualny - $roznica;
}


.information {
    font-size: 10pt;
    color: black;
    border-width: 10px;
}

.warning {
    @extend .information;
    color: orange;
}

.error {
    @extend .information;
    color: red;
}


a {
    font-size: 100px;
    &:hover { font-size: 200px; }
    &:visited { text-decoration: underline; }
}