Let's make CSS great again!
La web ya no es la misma de hace 15 años
CSS Tambien se debe adaptar a estos cambios
Preprocesadores de CSS
@ManuCastrillonM
- Permiten extender la sintaxis de CSS.
- Ayuda a que los estilos sean mantenibles y escalables.
- Uso de variables, funciones, mixins, anidación...
Algunos de ellos ...
@ManuCastrillonM
* Te aconsejo primero aprender los conceptos claves de css antes de utilizar los preprocesadores
SASS
@ManuCastrillonM
- Sintaxis
- Comunidad
- Funciones
- Superpoderes
Syntactically Awesome StyleSheets
How to...
Rock with SASS
1. Necesitamos un 'traductor'
@ManuCastrillonM
Los navegadores solo entienden css, entonces necesitamos la gema de Ruby que nos ayude a hacer esta traducción
2. Elige una sintaxis
@ManuCastrillonM
.SASS
.SCSS
div
border-radius: 5px
background-color: #FF0000
div {
border-radius: 5px;
background-color: #FF0000;
}
3. Superpoderes
Variables
Permite reutilizar valores a través de toda la hoja de estilo.
Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Nesting
Permite anidar los estilos de forma jerárquica
Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Import
Haciendo uso de
`@import url-del-archivo` puedes hacer uso de otro archivo scss
Import
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
// base.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Partials
Puedes crear archivos con pequeños trozos de código con el objetivo de modularizar tu código.
_nombre-del-archivo .scss
Mixins
Los mixins nos permiten reutilizar un trozo de código, agrupando una serie de lineas que pueden ser insertadas posteriormente en otro lugar del css.
Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Inheritance
La herencia permite reutilizar estilos agregando nuevos si se necesitan.
Inheritance
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Operators
sass permite hacer uso de los operadores básicos matemáticos como
+, -, *, / y %
Operators
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
Y ya?
NO!
Number Operations
Color Operations
String Operations
Interpolation
!default
@debug
@warn
@error
@if
@for
@each
@while
Gracias!
Sass Pioneras
By Manu Castrillón
Sass Pioneras
- 806