Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:sass [2014/12/27 17:37]
alfred
+++ 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.
-==== Comments ====
 <code>
-// These comments will
+sass --watch main.scss:../stylesheet.css
-// not be output to the
-// compiled CSS file
-/* This comment will */
 </code>
-Will compile to...
+===== Install and fix errors =====
-<code css>
-/* This comment will */
+<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>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página