Herramientas de usuario
wiki2:sass
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:sass [2018/10/13 14:07] alfred |
wiki2:sass [2023/02/02 09:12] (actual) |
||
|---|---|---|---|
| Línea 4: | Línea 4: | ||
| <code> | <code> | ||
| - | sass --watch main.scss ../stylesheet.css | + | sass --watch main.scss:../stylesheet.css |
| </code> | </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 ===== | ===== Sintaxis ===== | ||
| Línea 23: | Línea 37: | ||
| </code> | </code> | ||
| + | O de un ttf: | ||
| + | <code> | ||
| + | @font-face { | ||
| + | font-family: "OpenSans"; | ||
| + | src: url("../fonts/OpenSans/OpenSans-Regular.ttf"); | ||
| + | } | ||
| + | </code> | ||
| ==== Uso de fuentes ==== | ==== Uso de fuentes ==== | ||
| Línea 56: | Línea 77: | ||
| } | } | ||
| } | } | ||
| - | ... | + | nav ul { |
| - | @include size(h2); | + | @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> | </code> | ||
wiki2/sass.1539439641.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
