Sngular - Sass: Vitamina tu CSS

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

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.

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.

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.

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?

sngular.com/eventos/
Eventos
sHub Sevilla

Spain | Mexico | United States
www.sngular.team
inmaculada.rodriguez@sngular.com

¿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

De cero a fantSasstico
Conociendo Sass

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?

Release Actuales
LibSassDart Sass Ruby Sass

Instalación
npm install -g sassDescarga Dart Sass o LibSass:
https://github.com/sass/
export PATH="tu-directorio:$PATH"
choco install sass
brew install
sass/sass/sass
sass --version
Comprobar la versión instalada
GITHUB
NPM
OTRAS

Tipos y
conversión de
ficheros

¿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

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;
}

Conversión entre tipos:
sass-convert style.sass style.scss
a CSS:
sass style.sass style.css
sass --watch sass/style.sass:css/style.css

main.sass
// Base utilities
@import "base/fonts"
@import "base/variables"
@import "base/style-utilities"
// Partials
@import "partials/reset"
@import "partials/structure"
@import "partials/buttons"
@import "partials/forms"
...
// Vendors
@import "vendor/jquery.ui.core"
...

Variables
// Fuentes
$font: ‘Open Sans’, sans-serif
$font-title: Montserrat, sans-serif
// Colores
$green: #63D297
$gray: #666666
$primary-color: $green
// Otros valores
$box-shadow: 3px 3px 5px $gray
// Componentes
$accordion-border: $primary-color
Almacenaremos en ellas cualquier tipo de información.
.accordion
box-shadow: $box-shadow
&-title
font-family: $font-title
border-bottom: $accordion-border
.accordion {
box-shadow: 3px 3px 5px #666666;
}
.accordion-title {
font-family: Montserrat, sans-serif;
border-bottom: #63D297;
}
CSS
Uso_variables.sass

%button-secondary
background-color: #ffffff
padding: 10px
color: #333333
border: 1px solid
%button-2col
float: left
display: block
width: 50%
Extends: Definición y uso
button
@extend %button-secondary
!optional
.btn-success
border-color: green
.btn-cancel
border-color: red
Podemos compartir las propiedades CSS de un selector a otro.
UsoDefinición

button, .btn-success, .btn-cancel {
background-color: #ffffff;
padding: 10px;
color: #333333;
border: 1px solid;
}
.btn-success {
border-color: green;
}
.btn-cancel {
border-color: red;
}
Extends: Definición y uso
CSS

=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

=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)
DEFINICIÓN
USO

ul {
margin-left: 0;
}
ul li {
padding-left: 16px;
background: url('/images/ico-bullet.png') no-repeat center;
list-style-type: none;
}
CSS

$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

.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

$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

● Números
● Cadenas de texto
● Colores
● Booleanos
● Valores nulos
● Listas de valores
● Mapas (clave: valor)
Tipos de Datos
Soportados por CSS
● Caracteres unicode
● !important
● ...

● @if
● @for
● @each
● @while
Directivas de Control

$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

@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

$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

$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

Sass: Utilidades
SassDocSassmeister SassMe The Sass Way

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

Spain | Mexico | United States
www.sngular.team
carmen.garcia@sngular.com

Sngular - Sass: Vitamina tu CSS

Más contenido relacionado

Similar a Sngular - Sass: Vitamina tu CSS (20)

Último (9)

Sngular - Sass: Vitamina tu CSS

Notas del editor