====== Sass ======

===== Execute =====

<code>
sass --watch main.scss:../stylesheet.css
</code>
===== Install and fix errors =====

<code>
sudo apt install sass
</code>

If there is an error with ''watch'' like: ''LoadError: cannot load such file -- sass-listen'', you will need to execute the next:

<code>
sudo apt-get install ruby-listen
sudo gem install sass-listen
</code>



===== Sintaxis =====

==== Imports ====

<code>
@import "definitions";
@import "global";
@import "frontpage";
</code>

==== Import de fuentes ====
Al iniciar el documento:
<code>
@import url("https://fonts.googleapis.com/css?family=Kreon|Bitter");
</code>

O de un ttf:
<code>
@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans/OpenSans-Regular.ttf");
}
</code>
==== Uso de fuentes ====

<code>
$font-title: "Kreon", "Courier New", monospace;
font-family: $font-default;
</code>

==== Maps ====

<code>
$scale-large: (
    h1: 2.961rem,
    h2: 2.2rem,
    h3: 1.2rem,
    p: 1rem,
    p-little: 0.8rem
);
...
font-size: map-get($scale-large, h2);
</code>

==== Mixins ====

<code>
@mixin size($elem) {
  font-size: map-get($scale-large, $elem);
  @media (max-width: $responsive-medium) {
    font-size: map-get($scale-medium, $elem);
  }
  @media (max-width: $responsive-small) {
    font-size: map-get($scale-small, $elem);
  }
}
nav ul {
  @include horizontal-list;  // horizontal-list is another mixin.
}

h2 {
  @include size(h2);
}

</code>

==== Operators ====

<code>
width: 600px / 960px * 100%;
</code>

==== Inheritance ====
<code>
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

</code>

==== Nesting ====

<code>
.block {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
</code>

==== Funciones ====
<code>
darken($btn-bkg, 10%);
lighten($btn-bkg, 10%);
transparentize($primary-background-color, 0.5);
</code>
===== Snippets =====
==== Si no está definida... ====
Si no está previamente definida la variable ''django-backcolor'' asigna el valor ''red'':
<code>
$django-backcolor: red !default;
</code>