Herramientas de usuario

Herramientas del sitio


wiki2:sass

¡Esta es una revisión vieja del documento!


Sass

Execute

sass --watch main.scss:../stylesheet.css

Sintaxis

Imports

@import "definitions";
@import "global";
@import "frontpage";

Import de fuentes

Al iniciar el documento:

@import url("https://fonts.googleapis.com/css?family=Kreon|Bitter");

Uso de fuentes

$font-title: "Kreon", "Courier New", monospace;
font-family: $font-default;

Maps

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

Mixins

@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);
  }
}
...
@include size(h2); 

Operators

width: 600px / 960px * 100%;

Inheritance

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

Nesting

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Snippets

Si no está definida...

Si no está previamente definida la variable django-backcolor asigna el valor red:

$django-backcolor: red !default;
wiki2/sass.1589012710.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)