Day 18 - Sass

What it is Sass (Syntactically Awesome Style Sheets)?

Sass is a CSS preprocessor and is compatible with all versions of CSS. Sass provided:

• variables,

$back_color: red;

body {
    background: $back_color;
}

• nesting,

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

• partials - Partials are smaller Sass files that can be imported (see next section) into other Sass files. A partial is designated as such by naming it with a leading underscore: _partial.scss.

• import,

//file name -  _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

and import in other file

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

• mixins,
• extend\inheritance,

.textBorder {
    border: 1px solid black;
}

.first{
    @extend .border;
    color: red;
}

• operators - +, -, *, /, and %

$base-size: 20px;

p {
    font-size: $base-size;
}
button {
    font-size: $base-size * 2; // 40px
}

Read more

For mor informations read:

• Mike Dane (youtube) - nice tutorial
• Sass offical