Ejemplos de funciones

Resumen

Las funciones también puede ser extraer valores de un array. Una función puede utilizar arrays que son más parecidas a listas. Para Sass es más un mapa. En esta clase vamos a aprender a usar mapas con los posibles tipos de fuentes que hayan.

Sergio Toshio Minei

student•

Array

$fs: (
  big: 24px,
  normal: 16px,
  small: 14px,
  x-small: 12px
);

p {
  font-size: map-get($fs, normal);
}

small {
  font.size: map-get($fs, x-small);
}

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

francisco rodrigo urcino alvarez

student•

Gracias

Wilson Fabian Pérez Sucuzhañay

student•

a este ejemplo no le encontre el sentido porque por el mismo numero de lineas de código podíamos hacer en el archivo variales.scss
$fs-small: 10px y así con todas, me ayudan con ejemplo mas real de las funciones.

Jonatan Padilla

student•

Las listas o mapas son mucho mas útiles que declarar variable por variable.
En mi caso al ejemplo le veo mucha utilidad, llamar al mapa de fuentes y luego el tamaño que deseo ya que esta variable solo se identifica en esta lista.

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Deymer Hernandez

student•

Esto ayudaría a tener tus variables, constantes y demás en un paquete de variables mas estructurado!

Ej:

Esto =>

// variables $color-secondary: rgb(2019, 216, 121); $color-brand: #eaB3ee; $color-black: rgb(0, 0, 0); $color-darkgray:#4d4d4d; $color-grey: #737373; $color-ligthgrey: #bfbfbf; $color-white: rgb(255,255,255); // colors of textura $color-alert: rgb(252, 228, 207); $color-error: rgb(218, 79, 73); $color-info: rgb(66, 184, 221); $color-success: rgb(91, 183, 91);

Sería igual a esto o "mejor" =>

// array de colores $colores: ( color-secondary: rgb(2019, 216, 121), color-brand: #eaB3ee, color-black: rgb(0, 0, 0), color-darkgray:#4d4d4d, color-grey: #737373, color-ligthgrey: #bfbfbf, color-white: rgb(255,255,255), // colorsTextura color-alert: rgb(252, 228, 207), color-error: rgb(218, 79, 73), color-info: rgb(66, 184, 221), color-success: rgb(91, 183, 91) );

Jose Alejandro Pernia Carroz

student•

Hola! esta muy bueno el curso fácil de entender, en este caso particular quisiera saber cual es la diferencia si creo un @mixing con esas propiedades de Big, Normal, small y x-small con respecto a crear la función $FS esto mismo lo pudiese hacer yo con un mixing y daría los mismo resultados?

Rodrigo Cuenca Mayuri

student•

Ahorras código

Víctor Hugo Torres Fierro

student•

Que tal @joseapc90,

El potencial de un mixin radica en el uso de parámetros. Si no hay parámetros, es mejor utilizar un @extend, en tanto que un array es precisamente una lista (o en este caso mapa) de variables y su objetivo es ser consultado. Tu puedes colocar un clavo en una pared con un zapato o con un martillo, y dará el mismo resultado, sin embargo, es el martillo la herramienta diseñada específicamente para colocar el clavo, así, ahorra tiempo y esfuerzo.

Con un mixin, estás llamando todo un bloque de código, con un array, estás llamando un valor específico.

Saludos amigo platzinauta.

andrés eduardo betancourt bescanza

student•

Los mapas o listas tienen una estructura similar a los objetos en js.

Óscar Castañeda

student•

En mi caso, no me permitió crear el “map” de manera escalonada, el compilador me marcaba que el paréntesis no se cerraba, para solucionarlo tuve que crearlo todo en una misma línea

$fs: ( big: 42px, normal: 24px, small: 16px, tiny: 10px);

Roger Carlos Ariel Alba

student•

Eso me ha pasado a mi cuando estoy usando CSSGrid en Stylus, pero solo es cuestion de orden.

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Angel Raúl Acosta Rojas

student•

Los nombres deberían ser lo más auto descriptivos posibles... no lo más corto...

Jeremy Palomino

student•

Para mí, mas que un arreglo se parece mas a un Objeto que a un Array

Camilo Alexander Velandia Velandia

student•

no seria mejor mejor definir todo en variable que en arrays?

Diego Forero

Team Platzi•

Depende, tu puedes tener arrays por tipo de variables, por ejemplo array para tamaño de fuentes como lo muestra el profesor en el ejemplo o para los colores y solo tienes que modificar esto en una sola parte, si bien las variables te permiten lo mismo, esto da una agregación adicional para separar estas variables por similitud.

Cesar Merlo

student•

no es mas facil declarar variables de fontsizes directamente envesde estar usando una funcion? igual supongo que es a modo didactico este ejemplo..

Gabriel De Andrade

student•

Si, muchas veces se hace eso de atacar el problema de manera diferente nada más para enseñar una nueva técnica pero es genial que siempre tengas en cuenta formas en las que puedes optimizar tu código.

Víctor Hugo Torres Fierro

student•

¿Será entonces más fácil tener muchas hojas sueltas en lugar de un libro?

Víctor Hugo Torres Fierro

student•

Increíble esto de los arrays! Sass es una maravilla.

Federico Miranda

student•

Esto es buenísimo :clap: :clap: :clap:

Sebastian Marin

student•

Las funciones nos ayudan a reducir el numero de lineas de codigo.... super interesante...

Esau Rosales

student•

Puede que tengamos 2 variables a las que queramos nombrar como 'pequeño', sin las hacemos en una función con array, podemos hacerlo sin problema, y para conocer entre el uso de ambas variables, recordaríamos el nombre de la función. Pero si simplemente nombramos ambas variables igual (sin función), la segunda sobrescribiera a la primera, de manera que la primera queda inservible.

Ejemplo con la función vista en la clase:


$border:(
    pequeño: 2px,
);

$margin:(
    pequeño: 3px,
);


.container{
    border: map-get($map: $border, $key:pequeño);
    margin: map-get($map: $margin, $key: pequeño)
}```

Platzi Team

student•

De gran utilidad, Excelente

Angélica Rocha

student•

Excelente :D

Robinson Buitrago

student•

Esa misma funcionalidad, podriamos manejar mejor listas no?

Fernando Pioli Martínez

student•

Estas funciones estan buenisimas!

Wilfred Vásquez

student•

Esto es muy útil. Es incluso mejor que declarar un conjunto de variables.

Cesar Israel Aguilar Carrera

student•

Excelente

Ejemplos de funciones

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales