Una charla introductoria a Sass donde se descubrirán novedades en el código y una gran variedad de recursos y herramientas que te permiten modificar el diseño de tu web o aplicación, haciendo que resulte más cómodo, rápido, eficaz, personalizado y fácilmente llamativo. “Don’t repeat yourself” y “CSS con superpoderes” son una filosofía y una de las descripciones de Sass. Siendo así, ¿por qué no probarlo? Una forma sencilla de introducir a los asistentes a la maquetación web o ampliar sus conocimientos.
3. Fundada en 1995, Sngular
es una compañía de
tecnología, que cuenta
con todas las
competencias digitales
clave (DKCs) para
impulsar la
transformación digital en
sus clientes
6. 1Learn
Recabamos información a partir de big
data y tendencias, combinando varias
de nuestras Key Digital Capabilities
tales como Cognitive Computing,
Innovation as a Service o Mobile
Dataset; con nuestra experiencia de
negocio para identificar oportunidades
y ventajas basadas en tecnología.
7. 2Build
Definimos el conjunto de tecnologías, talento y
requerimientos para construir cada solución
desde un enfoque que pone al usuario en el
centro del proyecto y permite en el menor
plazo testarla con quien debe utilizarla.
Nuestros equipos practican desarrollo ágil,
involucrando a especialistas en testing en el
equipo de desarrollo, en un proceso iterativo y
sostenible, adaptado al ciclo de vida de las
aplicaciones.
8. 3Grow
Lanzamos productos y servicios
digitales, captamos usuarios
segmentados y aceleramos la
adopción, apoyados en plataformas
y operaciones que permiten escalar
e incrementar las ventas.
9. Alfred es nuestro compañero virtual, un asistente en forma
de chatbot, que nos ayuda a mejorar la productividad,
eliminando las tareas aburridas y repetitivas.
Por ejemplo, puedes pedirle las vacaciones, que impute tus
dedicaciones, la clave de la wifi, y algunas dudas sobre las
políticas internas.
Puedes hablar con él a través de Hangouts y Slack.
¿Quién es Alfred?
19. ¿Qué vamos a ver?
1. Conociendo Sass
2. Instalación
3. Tipos y conversión de ficheros
4. Organización e importación
5. Definiendo variables
6. Herencia con ‘@extends’
7. Uso y definición de ‘mixins’
8. Programando con SassScript
a. Variables II
b. Tipos de datos
c. Directivas de Control
9. Recursos útiles
21. Click to edit Master title style
● Preprocesador CSS
● DRY
● Mejor organización del código
● Compatible con CSS
Anidado
Variables
Operadores
Mixins
Extends
Funciones
...
¿Qué es Sass?
26. ¿Sass o Scss?
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
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
27. Css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
38. =transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
Mixins: Definición y uso
Conjunto de propiedades para reutilizar a las que ¡podemos pasarle parámetros!
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}
SASS SCSS
39. =bullets($bullet-ico, $position: center, $padding: 14px)
margin-left: 0
li
padding-left: $padding
background-image: image-url($bullet-ico) no-repeat $position
list-style-type: none
ul
+bullets('ico-bullet.png', $padding: 16px)
Mixins: Definición y uso
DEFINICIÓN
USO
40. ul {
margin-left: 0;
}
ul li {
padding-left: 16px;
background: url('/images/ico-bullet.png') no-repeat center;
list-style-type: none;
}
Mixins: Definición y uso
CSS
42. $content: "Primer contenido"
$content: "¿Segundo contenido?" !default
#main
content: $content
Variables: default!
Nos permite mantener el valor original de la variable.
#main {
content: "Primer contenido";
}
SASS CSS
43. .title
$primary-color: pink !global
color: $primary-color
a
color: $primary_color
Variables: global!
Se definen al nivel en el que son declaradas, aunque podemos hacer uso de
!global.
.title {
color: pink;
}
a {
color: pink;
}
SASS CSS
44. $name: foo
$attr: border
p.#{$name}
#{$attr}-color: blue
Variables: interpolación
Podremos usar el valor de nuestras variables en nombres de selectores y
propiedades.
p.foo {
border-color: blue;
}
SASS CSS
45. ● Números
● Cadenas de texto
● Colores
● Booleanos
● Valores nulos
● Listas de valores
● Mapas (clave: valor)
Tipos de Datos
Soportados por CSS
● Caracteres unicode
● !important
● ...
47. $type: unicorn
p
@if $type == horse
color: blue
@else if $type == pony
color: yellow
@else if $type == unicorn
color: pink
@else
color: black
Directivas: @if
Solo muestra los estilos en caso de que cumpla la condición.
p {
color: pink;
}
SASS CSS
48. @for $i from 1 through 3
.item-#{$i}
width: 2em * $i
@for $i from 1 to 3
.item-#{$i}
width: 2em * $i
Directivas: @for
Muestra los estilos indicados para las iteraciones marcadas.
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
SASS CSS
49. $rrss: fb tw yt
@each $item in $rrss
.box-#{$item}
background-image: url('ico-#{$item}.svg')
Directivas: @each
Aplica los estilos a cada elemento de una lista o mapa.
.box-fb {
background-image: url("ico-fb.svg");
}
.box-tw {
background-image: url("ico-tw.svg");
}
.box-yt {
background-image: url("ico-yt.svg");
}
SASS CSS
50. $i: 6
@while $i > 0
.item-#{$i}
width: 2em * $i
$i: $i - 2
Directivas: @while
Se añadirán los estilos mientras se cumpla una condición
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}
SASS CSS
53. We create digital
advantages that boost
our client´s success.
RECOMENDACIONES:
Ajustar la estructura Sass a los
componentes del proyecto
No usar más de tres niveles de
selectores
Usar metodologías como BEM para la
nomenclatura de clases
Diferenciar el uso de extends y mixins
Añadir variables para los distintos
componentes
OOCSS
54. Spain | Mexico | United States
www.sngular.team
carmen.garcia@sngular.com
Notas do Editor
Dart Sass: La última implementación, se ha reescrito por el autor original en Dart, lenguaje desarrollado por Google.
LibSass: Migración a C++
Ruby Sass: La versión original, deja de tener soporte en 2019, un año después del lanzamiento de Dart Sass
Github: no tiene ninguna dependencia. Debe añadirse en la última fila del bashrc (Linux) .bash_profile (Mac) o dentro de variables del sistema (Windows), al principio de la nueva variable, seguido de un ‘;’.
Tanto NPM como Chocolatey & Homebrew instalarán Dart Sass, que es actualmente la release principal.
SASS: Sintaxis indentada. No usa llaves ni ;.
SCSS: Sassy CSS. Toda la sintaxis valida en CSS es valida en SCSS. Admite la mayoria de vendors. Contiene llaves y ;
Partials: aquellos ficheros que contienen _ antes de su nombre. Es la forma de componentizar nuestros estilos. No se compilaran como nuevo fichero.
Esta estructura puede modificarse al gusto. Por ejemplo, podría crear ficheros para las distintas regiones, separar regiones de componentes, etc...
Organización
Facilidad al modificar el diseño
El primer bloque de código se mostrará porque está extendido.
El segundo al no ser usado, no se mostrará.
También se pueden extender clases. Sass soporta herencia múltiple
Por otro lado con la directiva @media solo podremos extender lo que haya dentro de la directiva
Podemos añadir valores por defecto a los parámetros
SI tienen un valor por defecto, podemos saltarlo en la declaración siempre que pongamos el nombre del parámetro que vamos a declarar tras él
Interactive shell: sass -i
!global
podemos alternar - y _ en el uso y definición.
!global
podemos alternar - y _ en el uso y definición.
Se puede usar interpolacion en valores de propiedades, es mejor usar solo la variable, pero usando la interpolacion interpretaremos las operaciones cerca como codigo CSS.
Números con decimales marcados por el punto o seguidos de unidades como px, em...
Cadenas de texto con o sin comillas simples o dobles
Colores (valores, hexadecimal, rgba, hsla...)
Valores lógicos o booleanos (true, false)
Valores nulos (null)
Listas de valores, separados por espacios en blanco o comas (1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
Pares clave: valor ( (key1: value1, key2: value2))
Los soportados por CSS no se tratan de forma especial, Sass los considera cadena de texto.
contador
inicio y fin deben ser numeros enteros
Tambien se puede incluir la lista directamente en el each