Directiva

Resumen

Las funciones nos permiten directamente modificar el valor de ciertas propiedades. Para crear una función vamos a usar el @function.

Sergio Toshio Minei

student•

Crear funciones

@function suma($numero-uno, $numero-dos) {
  @return $numero-uno + $numero-dos;
}

.div {
  padding: suma(10px, 5px);
}

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Rodrigo Rodriguez

student•

Gracias!!

Gerardo Nava Pereda

student•

😮 muy parecido a la syntaxis de JavaScript

Christopher Jose Olivares Parra

student•

es basado en js si no me equivoco

Gonzalo Pimentel

student•

Hasta ahora no me voy muy conforme con el curso me hubiera gustado ver la aplicación a algún proyecto...

Alessandri Fonseca

student•

Revisa el curso de preprocesadores, utilizan pug, sass, less y stylus en un proyecto practico. Este curso es mas a explicarte la sintaxis y lo que se puede hacer con sass como tal

Gonzalo Pimentel

student•

Si justamente venía de ahí para profundizar con Sass pero bueno no encontré lo que esperaba pero ya cada uno haciendo proyectos profundiza :)

Mildred Guerra Rodríguez

student•

Funciones: pueden ser incluidas como una valor de una propiedad , podemos añadir una función a un valor. Modificar el valor de propiedades _Mixins _: Nos permiten crear propiedades y generar valores a esas propiedades

/*Funciones*/
@function suma($numero-uno, $numero-dos) {
  @return $numero-uno + $numero-dos;
}
.div {
  padding: suma(10px, 5px);
}

/*mixin */
@mixin max-width($max-width: 800px) {
	max-width: $max-width
	margin-left: auto
	margin-right: auto
}

.container {
	@include max-width(1200px);
}

Platzi Team

student•

Gracias por el aporte compañera

Sebastian Marin

student•

es un poco confuso para mi ..... pero no me rindo

Lorena Pena Verdú

student•

Sebastian!!!! Lo terminaste??????

Jose Chirinos

student•

Por lo que leí, solo se utilizan funciones puras, con un resultado (sin efectos secundarios)

Gerardo Ruiz

student•

se pueden sumar colores?

Diego Forero

Team Platzi•

Si es posible, ademas puedes hacer una serie de cambios interesantes, encontré esto que te puede ayudar mucho http://jackiebalzer.com/color

Camilo Alexander Velandia Velandia

student•

proncipal diferencia entre function y mixin es que function lo puedes usar para modificar un valor especifico

Angélica Rocha

student•

Con este vídeo si pude entender la diferencia entre un mixin y una funcion a parte que la funcion devuelve algo ese algo puede ser aplicado al valor de una propiedad mientras que con el mixin podemos crear propiedades y generar valores a dichas propiedades.

gracias Platzi, gracias Profesor . :D

Imderf Rios

student•

Realizando una función de suma con Saas que permite modificar el valor de ciertas propiedades:

@function suma($numero-uno, $numero-dos){
@return $numero-uno + $numero-dos;
}
.div{
padding: suma(10px, 5px);
/*padding: suma(suma 10px + 5px;*/
}

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Cesar Israel Aguilar Carrera

student•

Excelente

Jhonatan David Ibarra Lavado

student•

sigamos :D

Alessandri Fonseca

student•

como dato, con CSS vanilla podemos realizar este tipo de operaciones matematicas utilizando la funcion calc() aqui la doumentacion

Tomas Salina

student•

La siguiente funcion la vi en el curso de preprocesadores:

@function get-opacity($color, $amount) {
  @return rgba($color, $amount);
}

Carlos Alberto Conde Moreno

student•

Es muy interesante

Angel Raúl Acosta Rojas

student•

No se, yo lo veo completamente inútil, como afán de complicar algo que ya era sencillo.

Stalin Badillo

student•

Quiero compartirles algo que me paso al querer multiplicar para crear una función:

@function multiply($number-one,$number-two,$number-three) {
    @return $number-one * $number-two * $number-three;
}
header{
	width:100%;
	height:50%;
	margin:multiply(5px, 5px, 8px);
}

No sé si sea algo lógico, pero quiero compartir que si ponemos px a todos los parámetros saldrá error, por lo tanto se debe poner los px a un solo parámetro si estamos multiplicando así:

@function multiply($number-one,$number-two,$number-three) {
    @return $number-one * $number-two * $number-three;
}
header{
	width:100%;
	height:50%;
	margin:multiply(5px, 5, 8);
}

/*Funciones*/
@function suma($numero-uno, $numero-dos) {
  @return $numero-uno + $numero-dos;
}
.div {
  padding: suma(10px, 5px);
}

/*mixin */
@mixin max-width($max-width: 800px) {
	max-width: $max-width
	margin-left: auto
	margin-right: auto
}

.container {
	@include max-width(1200px);
}

Directiva

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