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 [2014/12/27 17:56] alfred borrado |
wiki2:sass [2023/02/02 09:12] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== SaSS ====== | + | ====== Sass ====== |
| - | ===== Basics ===== | + | |
| - | * Sassy CSS (.scss) is the default file extension. | + | ===== Execute ===== |
| - | * CSS is valid SCSS. | + | |
| + | <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 ==== | ==== Imports ==== | ||
| - | You can import other files to the current one. Using something like: ''@import "buttons";'' \\ | ||
| - | It will import files with names ''_buttons.sass'', ''buttons.sass'', ''_buttons.scss'', or ''buttons.scss''. Tje file extension is not required. | ||
| - | If the file is named ''buttons.scss'', it will create a new file ''buttons.css''. To import partials, we will put an underscore before the namefile: ''_buttons.scss''. It won't create a ''buttons.css'' file. | ||
| - | ==== Comments ==== | ||
| <code> | <code> | ||
| - | // These comments will | + | @import "definitions"; |
| - | // not be output to the | + | @import "global"; |
| - | // compiled CSS file | + | @import "frontpage"; |
| - | /* This comment will */ | + | |
| </code> | </code> | ||
| - | Will compile to... | + | |
| - | <code css> | + | ==== Import de fuentes ==== |
| - | /* This comment will */ | + | Al iniciar el documento: |
| + | <code> | ||
| + | @import url("https://fonts.googleapis.com/css?family=Kreon|Bitter"); | ||
| </code> | </code> | ||
| - | ==== Selectors ==== | + | O de un ttf: |
| + | <code> | ||
| + | @font-face { | ||
| + | font-family: "OpenSans"; | ||
| + | src: url("../fonts/OpenSans/OpenSans-Regular.ttf"); | ||
| + | } | ||
| + | </code> | ||
| + | ==== Uso de fuentes ==== | ||
| <code> | <code> | ||
| - | .content { | + | $font-title: "Kreon", "Courier New", monospace; |
| - | border: 1px solid #ccc; | + | font-family: $font-default; |
| - | padding: 20px; | + | </code> |
| - | h2 { | + | |
| - | font-size: 3em; | + | ==== Maps ==== |
| - | margin: 20px 0; | + | |
| + | <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); | ||
| + | } | ||
| } | } | ||
| - | p { | + | nav ul { |
| - | font-size: 1.5em; | + | @include horizontal-list; // horizontal-list is another mixin. |
| - | margin: 15px 0; | + | |
| } | } | ||
| + | |||
| + | h2 { | ||
| + | @include size(h2); | ||
| } | } | ||
| + | |||
| </code> | </code> | ||
| - | Will compile to... | + | |
| - | <code css> | + | ==== Operators ==== |
| - | .content { | + | |
| - | border: 1px solid #ccc; | + | <code> |
| - | padding: 20px; | + | width: 600px / 960px * 100%; |
| + | </code> | ||
| + | |||
| + | ==== Inheritance ==== | ||
| + | <code> | ||
| + | %message-shared { | ||
| + | border: 1px solid #ccc; | ||
| + | padding: 10px; | ||
| + | color: #333; | ||
| } | } | ||
| - | .content h2 { | + | |
| - | font-size: 3em; | + | .message { |
| - | margin: 20px 0; | + | @extend %message-shared; |
| } | } | ||
| - | .content p { | + | |
| - | font-size: 1.5em; | + | </code> |
| - | margin: 15px 0; | + | |
| + | ==== 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> | </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> | ||
wiki2/sass.1419703001.txt.gz · Última modificación: 2020/05/09 09:24 (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
