Funciones

Resumen

Sass tiene muchas funciones que podemos usar cuando estamos modificando CSS. Muchas de estas funciones son muy útiles como por ejemplo aclarar un color u oscurecerlo. Así hay muchísimas más, sin embargo hay algunas que no nos permiten hacer cambios visuales y que pueden parecer no tan útiles.

Sergio Toshio Minei

student•

Funciones

Sass tiene muchas funciones que podemos usar cuando estamos modificando CSS. Muchas de estas funciones son muy útiles como por ejemplo aclarar un color u oscurecerlo.

darken(#ffffff, 25%)
lighten(#ffffff, 25%)
invert(#ffffff)

La lista completa de funciones se pueden ver aquí:
https://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Daniel Aarón Pipa Aguirre

student•

gracias

Fernando Pioli Martínez

student•

Como diseñador, debo decir que no estoy de acuerdo con la aplicación de estas funciones de color. Porque en la experiencia, el color es un fenómeno óptico, y debe decidirse en función de cómo lo percibe el universo de usuarios a los que nos dirijimos. Creo que el color **no es un fenómeno numérico **o matemático. Ya lo explica Josef Alberts en su ensayo “La iteración del color” les dejo un link basado en ese libro para el que le interese:

http://www.proyectacolor.cl/percepcion-del-color/interaccion-del-color/

Recomiendo el punto 4 de este ensayo en donde se ve que un mismo color parece diferente según el contexto que lo rodea. Ahi se simplifica mi punto de vista respecto de este tema.

Wilson Orlando Capacho Carmona

student•

Padre el profesor esta tomando un caso para ilustrar la clase de funciones en sass...el tema del color en estos momentos es algo casual, así que animo y palante compañero

Fernando Pioli Martínez

student•

Tenés razón, tal vez a muchos les parezca algo loco, pero creo que tengo tan marcada mi vocación Frontend que a veces no puedo evitar ver el código (y la programación en sí) como una herramienta bastante artística y expresiva. Aunque sé que no es sólo eso, o sea tenés razón.

Ivan Cardozo

student•

https://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions

Carlos Jesús Fernández Salazar

student•

Un poco más directo el link a las funciones 😄 https://sass-lang.com/documentation/Sass/Script/Functions.html

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Imderf Rios

student•

Creando funciones que oscurece o aclara un color con darken o lighten.

Oscurecer:

$color-grey: #737373
color-darkgrey: darken($color-grey, 25%);
/*color-darkgrey: funcion(color, oscurecer 25%);*/

Aclarar:

$color-grey: #737373
color-darkgrey: lighten($color-grey, 25%);
/*color-darkgrey: funcion(color, aclarar 25%);*/

Más funciones en

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Enrique Devars

teacher•

Sass tiene muchísimas funciones, si quieren profundizar más en el tema con la info actualizada puede checar este enlace

Never Andrés Aparicio Hernandéz

student•

en el curso de pre procesadores se ven las mas utiles

Sebastian Marin

student•

Muy util estas funciones

Eleazar Carreón Álvarez

student•

Ahora Sass puedes crear tus propias funciones más complejas en la cual puedes hacer que retorne un valor.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

Andrés David Loaiza Zamudio

student•

Una genialidad

Cesar Merlo

student•

Funciones para colores:

https://www.w3schools.com/sass/sass_functions_color.asp

Vania Cárdenas Andrade

student•

una función se puede crear dentro de una variable, algunas llevan parámetros como el de aclarar un color lighten($nombreVariable, 25%)y ultimo valor es el porcentaje a aclarar.

Jhonatan David Ibarra Lavado

student•

estupendo jajaja que chevere :D

Alessandri Fonseca

student•

Están muy útiles las funciones pero para colores prefiero tenerlos previamente definidos cuando se realice el diseño en lugar de calcularlos mediante código

Alejo Vera

student•

Entendí mal o yo desde el proyecto que descargue desde GItHub ya tengo el proyecto finalizado?

Néstor Raúl Guzmán Díaz

student•

asi es yo estaba pensando lo mismo.

Tomas Salina

student•

Sinceramente la única funcion que suelo usar es rgba($color, $alpha)

Josue Daniel Paz Gómez

student•

Una pregunta de casualidad alguien tiene los archivos que hemos venido trabajando antes del proyecto de platzi music no se que le paso a mi compu y se me borro todo por si alguien me los puede compartir porfavor

Fernando Galdós

student•

Sigamos

Naldo Duran

student•

Valentina Arenas Lozano

student•

creo que no cuesta mucho poner los enlaces.... Uno los busca, pero no sé, creo que es cuestión de orden, no sólo mostrar una u otra página.

Valentina Arenas Lozano

student•

Es bueno el contenido, pero sólo muestra código sin sentido, podría intentar tener así sea un texto con el color de fondo que esta cambiando, porque lo único que se ve que cambia es el código. Y si bien uno hace las practicas, creo que hace falta esa parte de "Resultado" que si han tenido otros profesores. Salirse un poco de VS ha mostrado el navegador como 3 veces y css es estar viendo todo el tiempo como van cambiando las cosas, no sólo porque funcione en la cabeza se debe asumir que ya está. La verdad me parece que para ser un curso "Enfocado" en sass, tuvo más contenido y fue más enfocado el modulo de sass en el curso de preprocesadores.

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