Estilos avanzados con SASS en View Components

Clase 20 de 28 • Curso de Frameworks y Librerías de JavaScript

Resumen

¿Cómo estilizar aplicaciones web usando View Components y Sass?

Aprender a estilizar una aplicación web puede ser un desafío, especialmente cuando se trata de replicar estilos en diferentes componentes. En lugar de usar CSS convencional, aprovechar las capacidades de Sass puede simplificar esta tarea. En esta guía, exploraremos cómo trabajar con Sass en aplicaciones desarrolladas con View Components, maximizando la reutilización del código y mejorando la eficiencia.

¿Cuál es el proceso para inicializar estilos globales sin el atributo scoped?

Empezaremos definiendo nuestros estilos globales sin el atributo scoped. Esto permite que los estilos se apliquen a toda la aplicación y no solo a un componente específico. Para ello:

Eliminar Estilos Predeterminados: Borra cualquier estilo predeterminado que venga por defecto.
Definición de Estilos Globales: En el archivo app.view, añade tus estilos globales directamente. Incluye elementos como background, color, font-family, y margin sin utilizar el atributo scoped.

¿Cómo comenzar a usar Sass en una aplicación?

Para comenzar a utilizar la sintaxis de Sass (SCSS):

Atributo Lang: Añade el atributo lang="scss" en tu etiqueta style. Esto indica que estás usando el lenguaje SCSS.
Instalación de Dependencias: CodeSandbox instalará automáticamente todas las dependencias necesarias al cambiar a SCSS. Si no funciona automáticamente, recarga el editor.
Uso de Variables: Define tus colores y otras propiedades en un archivo _variables.scss, lo cual evita repetir colores y nombre de fuentes a lo largo de tus componentes. Por ejemplo, para definir un color de fondo:
```
$bg: #030;
$color: #522;
```

¿Cómo organizar variables y estilos personalizados eficazmente?

La organización es clave para el mantenimiento y reutilización de código. Sigue estos pasos para crear y utilizar variables de manera eficiente:

Crear un Archivo de Variables: Crea un archivo para almacenar variables Sass, por ejemplo, _variables.scss.
```
_variables.scss
$bg: #030;
$color: #522;
```
Importar Variables: Importa este archivo en otros archivos SCSS donde lo necesites:
```
@import 'ruta_a_styles/variables';
```
Uso de Variables en Estilos: Implementa las variables en tus estilos de componente para uniformidad y facilidad de actualización.
```
body {
  background-color: $bg;
  font-family: sans-serif;
}
```

¿Cómo aplicar estilos adicionales usando Sass para componentes específicos?

Para estilos específicos en componentes, como formularios y botones, asegúrate de aplicar técnicas avanzadas con Sass:

Estilos en Archivos Individuales: En el archivo de cada componente, asegura subirse al nivel adecuado en el directorio si es necesario, utiliza la estructura:

@import '../styles/variables';
// Ejemplo de uso de SCSS en un formulario:
form {
  border: 1px solid $color;
  background-color: $bg;
  padding: 10px;
}

Crear Interacciones con Usuarios: Utiliza selectores como :hover para efectos interactivos:
```
form:hover {
  transform: scale(1.2);
}
```
Adaptaciones para Estados del Elemento: Define también estados como :disabled para botones:
```
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

¿Cómo se asegura de que Sass está funcionando correctamente?

Después de configurar tus estilos, asegúrate de que Sass esté compilando correctamente y reflejando los cambios en la aplicación:

Recarga de Editor: Si los cambios no se aplican, recarga tu sandbox para forzar la actualización.
Pruebas de Verificación: Realiza pruebas visuales para asegurar que los colores y transformaciones se aplican correctamente.
Debugging de Errores: Verifica errores comunes como rutas incorrectas o atributos mal escritos (lang en vez de langg).

Aprovechando estas técnicas y organizando eficientemente tus proyectos, puedes mejorar significativamente la calidad de tus aplicaciones web. Recuerda que la práctica constante te ayudará a dominar Sass en View Components, fomentando un desarrollo web ágil y profesional. ¡Sigue explorando y no te detengas en tu aprendizaje!

Jair Yara

student•

Cuando se usa la función rgba en Sass se puede tambíen usar los colores declarados en variables para no usar los colores en rgba. E.g

rgba($color, 0.5)

Juan Castro

teacher•

¡Joyita!

Cristian Florez

student•

Con scss tambien podemos hacer esto

form{
  background: $color1;
  &:hover{
    background: $color2;
  }
}

Jimmy Buriticá Londoño

student•

++Preprocesadores CSS++

Obed Paz

student•

Me he enamorado de Vue 💚

Natali Rivero

student•

Según entiendo puedes usar Sass en cualquier framework, no es que sea algo específico de Vue. Por ejemplo, yo lo he usado con Bootstrap para crear templates de HTML puro, y el workflow es súper rápido. Pero me parece que también lo podrías usar con React o Svelte si quisieras, aunque recién estoy descubriendo estás tecnologías, que alguien me corrija si me equivoco :)

Fran Narbona

student•

No te equivocas Natali, Sass lo puedes utilizar en cualquier proyecto. Incluso puedes desarrollar un tema para wordpress usando Sass y luego compilar tu código a CSS para que el navegador lo reconozca. O aplicarlo a un proyecto sin frameworks y que sólo trabajes con HTML, JS y utilices Sass para generar tus estilos aprovechando el potencial que te ofrece.

Joel Andres Bonilla Tellez

student•

lo hice con dos componentes para los botones :D

Form.vue

<template>
  <h2>{{ msg }}</h2>
  <form v-for="movie in movies" v-bind:key="movie.name">
    <h3>{{ movie.name }}</h3>
    <SubstractButton
      v-on:substract="subtractTickets(movie)"
      v-bind:movie="movie"
    />
    {{ movie.quantity }}
    <AddButton v-on:add="addTickets(movie)" v-bind:movie="movie" />
  </form>
</template>

<script>
import AddButton from "./AddButton.vue";
import SubstractButton from "./SubstractButton.vue";
export default {
  name: "Form",
  components: {
    AddButton: AddButton,
    SubstractButton: SubstractButton,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      movies: [
        { name: "DareDevil", quantity: 0, available: 5 },
        { name: "The Punisher", quantity: 0, available: 3 },
        { name: "Avengers", quantity: 0, available: 4 },
      ],
    };
  },
  methods: {
    addTickets(movie) {
      movie.quantity += 1;
    },
    subtractTickets(movie) {
      movie.quantity -= 1;
    },
  },
};
</script>

AddButton.vue

<template>
  <button
    type="button"
    v-on:click="add"
    :disabled="movie.quantity >= movie.available"
  >
    +
  </button>
</template>

<script>
export default {
  name: "AddButton",
  methods: {
    add() {
      this.$emit("add");
    },
  },
  props: ["movie"],
};
</script>

SusbractButton.vue

<template>
  <button type="button" v-on:click="substract" :disabled="movie.quantity <= 0">
    -
  </button>
</template>

<script>
export default {
  name: "SubstractButton",
  methods: {
    substract() {
      this.$emit("substract");
    },
  },
  props: ["movie"],
};
</script>

Carlos Rodríguez

student•

Ojo, el propio sass ya no recomienda usar import, recomienda es el suo de used y forward

Alex Francisco Bustos Pinzon

student•

Desde la W3C han atendido varias de las razones por las que surgieron scss y similares; implicando cambios que ya hacen parte de CSS Nivel 3, haciendo actualmente inecesario usar scss u otros preprocesadores, o por lo menos si para lo único que se quiere es para poder trabajar con variables, Por ejemplo:

Variables

/* Para declararlas con -- */
:root {
  --mi-color: red;
}

/* Para usarlas, con var() */
em {
  color: var(--mi-color);
}

(En otras palabras, no es necesario instalar ningun preprocesador, ya hay soporte nativo en navegadores que soporten CSS3, a la fecha la mayoría, se puede trabajar simplemente con CSS)

Guido Podesta

student•

Por si a alguien le interesa debajo dejo el código.

**App.vue**

//HTML
<template>
	<h3>Películas</h3>
	<Form/>
</template>

//JS - Vue
<script>
	import Form from "./components/Form.vue";
	export default {
		name: "App",
		components: {
			Form: Form,
		},
	};
</script>

//CSS - SCSS
//En otro archivo llamado _variables.scss
//Se guardan las siguientes varibles con sus respectivos valores.
//$bg: #ccffcc
//$color: #030
<style lang="scss">
	@import "./styles/_variables.scss";

	html,
	body {
		background: $bg;
		color: $color;
		margin: 0;
		font-family: sans-serif;
	}

	h2 {
		border-bottom: 1px solid $color;
		padding-bottom: 10px;
	}
</style>

Form.vue

<template>
  <form v-for="(movie, i) in movies" :key="i">
    <h4>{{ movie.name }}</h4>
    <button
      type="button"
      v-on:click="movie.quantity--"
      v-bind:disabled="movie.quantity <= 0"
    >
      -
    </button>
    {{ movie.quantity }}
    <button
      type="button"
      v-on:click="movie.quantity++"
      v-bind:disabled="!(movie.quantity < movie.available)"
    >
      +
    </button>
  </form>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      movies: [
        { name: "Avengers", available: 5, quantity: 0 },
        { name: "Wonder Woman", available: 15, quantity: 0 },
      ],
    };
  },
};
</script>

//<!-- Add "scoped" attribute to limit CSS to this component only -->
//CSS - SCSS
//En otro archivo llamado _variables.scss
//Se guardan las siguientes varibles con sus respectivos valores.
//$bg: #ccffcc
//$color: #030
//$color2: rgba(50, 100, 50, 0.5)
<style lang="scss" scoped>
	@import "./styles/_variables.scss";

	form {
		background: $bg;
		border: 1px solid $color;
		margin: 0 50px 25px;
		font-family: courier;
		padding: 10px 25px 25px;
		text-aling: center;
		transform: scale(1);
		transition: 0.3s transform;
	}

	form:hover {
		transform: scale(1.2);
	}

	button {
		background: $color2;
		border: 1px solid transparent;
		cursor: pointer;
		padding: 5px 10px;
		transition: border-color 0.15;
	}

	button:hover {
		border-color: $color2;
	}

	button[disabled]{
		opacity: 0.5;
	}
</style>

Max Andy Diaz Neyra

student•

Código final de esta clase: Archivo app.vue

<template>
  <h3>Películas</h3>
  <Form />
</template>

<script>
import Form from "./components/Form.vue";
export default {
  name: "App",
  components: {
    Form,
  },
};
</script>

<style lang="scss">
@import "./styles/_variables.scss";

html,
body {
  background-color: $bg;
  color: $color;
  margin: 0;
  font-family: sans-serif;
}
h2 {
  border-bottom: 1px solid $color;
}

</style>

Archvo styles.scss

$bg:#ccffcc;
$color:#030;
$color2: rgba(50,100,50,0.5);

Archivo Form.vue

<template>
  <form v-for="(movie,i) in movies" :key="i">
    <h4>{{movie.name}}</h4>
    <button
        type="button"
        @click="()=>movie.quantity--"
        :disabled="movie.quantity<=0"
      >
        -
      </button>
      {{movie.quantity}}
    <button
        type="button"
        @click="()=>movie.quantity++"
        :disabled="movie.quantity>=movie.available"
      >+
      </button>
  </form>
</template>

<script>
export default {
  name: "HelloWorld",
  // props: {
  //   msg: String,
  // },
  data(){
    return {
      movies:[
        {
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
      ]
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../styles/_variables.scss";

form {
  background-color: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  font-family: "Courier New", Courier, monospace;
  padding: 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3 transform;
}
form:hover {
  transform: scale(1.2);
}

button {
  background: $color2;
  border: 1px solid $color;
  cursor: pointer;
  padding: 5px 10px;
}

button:hover {
  border-color: $color;
}

button[disabled] {
  opacity: 0.5;
}

</style>

Elvis Moreira

student•

Un resumen del código y breve explicación

Cambiamos los estilos en la Aplicación principal App.vue

<style lang="scss">
@import "./styles/_variables.scss";
html,
body {
  background: $bg;
  color: $color;
  margin: 0;
  font-family: sans-serif;
}
h2 {
  border-bottom: 1px solid $color;
  padding-bottom: 10px;
}
</style>

En este aspecto se pone en la etiqueta style el atributo lang para trabajar con el lenguaje scss

Se importa los colores definidos en un archivo a través de

@import

En nuestro componente Form.vue se hace el mismo procedimiento quedando así

     ```jsx
<style lang="scss" scoped>
@import "../styles/_variables.scss";
form {
  background: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  font-family: courier;
  padding: 10px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3s transform;
}

form:hover {
  transform: scale(1.2);
}
button {
  background: $color2;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 5px 10px;
  transition: border-color 0.15;
}
button:hover {
  border-color: $color2;
}
button[disabled] {
  opacity: 0.5;
}
</style>

Ciro Alejandro Sira Mogollon

student•

No entiendo porque no se colocot todo los estilo en el archivo sass y ya. en de tener una parte separada en el js.

Nicolás Felipe Fernandez Fandiño

student•

También se puede creando los módulos para cada parte del proyecto o los archivos fonts.scss y colors.scss, pero como un ejemplo tan pequeño lo ilustro de esta forma.

Jose Castillo

student•

Yo hice un componente de un <div> con un <h3> y <p> anidados.

<template>
  <div v-for="profile in profiles" :key="profile.name">
    <h3>{{ profile.name }}</h3>
    <p>{{ profile.occupation }}</p>
  </div>
</template>

<script>
export default {
  name: "Container",
  data() {
    return {
      profiles: [
        {
          name: "Dahmer",
          occupation: "Carnicero",
        },
        {
          name: "Daniel",
          occupation: "programador",
        },
        {
          name: "Jo",
          occupation: "Chef",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(130, 50, 40, 0.5);
  border: 1px solid #000;
  margin-top: 25px;
}
h2 {
  color: #000;
}
</style>

Me esta gustando vue!

Elvis Milan

student•

Sass

Emanuel Alvarado Godinez

student•

Así quedó el reto:

Button.vue

<template>
  <button
    v-if="math == `add`"
    type="button"
    :disabled="movie.quantity >= movie.available"
    v-on:click="movie.quantity += 1"
  >
    +
  </button>
  <button
    type="button"
    v-else-if="math == `subs`"
    :disabled="movie.quantity <= 0"
    v-on:click="movie.quantity -= 1"
  >
    -
  </button>
</template>

<script>
export default {
  name: "Button",
  props: {
    math: String,
    movie_prop: Object,
  },
  data() {
    return {
      movie: this.movie_prop,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/_variables.scss";
button {
  background-color: $btnbg;
  border: none;
  color: $color;
  padding: 5px 15px;
  transition: 0.2s background-color;
}

button:hover {
  background-color: $btnbgHover;
  cursor: pointer;
}

button[disabled] {
  background-color: rgba($btnbg, 0.5);
}

button:hover[disabled] {
  background-color: rgba($btnbg, 0.5);
  cursor: default;
}
</style>

Adder.vue

<template>
  <Button math="subs" v-bind:movie_prop="movie" />

  {{ movie.quantity }}

  <Button math="add" v-bind:movie_prop="movie" />
</template>

<script>
import Button from "./Button";

export default {
  name: "Adder",
  components: {
    Button,
  },
  props: {
    movie_prop: Object,
  },
  data() {
    return {
      movie: this.movie_prop,
    };
  },
};
</script>

<style>
</style>

Title.vue

<template>
  <h4>{{ msg }}</h4>
</template>

<script>
export default {
  name: "Title",
  props: {
    msg: String,
  },
};
</script>

<style>
</style>

Form.vue

<template>
  <h3>Películas</h3>
  <form v-for="movie in movies" :key="movie.name">
    <Title v-bind:msg="movie.name" />

    <Adder v-bind:movie_prop="movie" />
  </form>
</template>

<script>
import Adder from "./Adder";
import Title from "./Title";

export default {
  name: "Form",
  components: {
    Adder,
    Title,
  },
  data() {
    return {
      movies: [
        {
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
      ],
    };
  },
  // props: {
  //   msg: String,
  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../styles/_variables.scss";

form {
  background: $bg;
  border: 1px solid $color;
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.2s transform;
  border-radius: 15px;
}

form:hover {
  transform: scale(1.1);
}
</style>

Alejandro Martinez

student•

si quisiera separar la lista de películas en otro archivo, como se haría?, lo he intentado varias veces y no logro dar con la forma

Juan Castro

teacher•

Mira: https://reactgo.com/vue-read-json-file/

David Rangel

student•

Decidí hacer un repo en github y desarrollarlo en mi entorno local: https://github.com/dr1602/vue-precss

Esta práctica no la pude hacer en sandbox ya que la versión de Vuejs presentada en clase ya no existe, y aunque hay una similar, no permite instar SASS con los comandos en la terminal

Publicación 5 de Abril de 2024.

MAXIMILIANO JAYME DAHLQUIST

student•

Yo hice un fork de un proyecto base que encontré googleando codesanbox vue 3 sass

Andres Prieto

student•

Viendo esta clase y recordando las cosas que sé que Vue.js me parece tan triste que la oferta laboral de Vue no sean tan grande como la de React... Vue tiene una construcción genial ^-^

Laura Roa

student•

Hola! El profe menciona que hay un curso de sass y no lo veo dentro de la ruta de Web! Me podrian indicar si es necesario hacerlo para continuar y cual es? Muchisimas gracias!

Juan Castro

teacher•

Mira: https://platzi.com/cursos/preprocesadores/

Joalin Pineda

student•

¡Hola! Ya no esta listado por que hay un curso mas actualizado, te comparto una clase del curso de Sass 2018.

BTW este es el Curso mas actualizado de Preprocesadores CSS donde puedes aprender Sass, Less y Stylus.

Luis Berenguer

student•

En qué curso enseñan SCSS? (no lo encuentro)

Iris Valentina Barrios

student•

¡Hola Platzinauta 👋! Puedes ver los diferentes tipos de pre-procesadores de CSS en nuestro Curso de Preprocesadores CSS 👈👀

Julian David Alzate Cuervo

student•

no se porqué pero $colo2 no me funciona y me toca poner el color en vez de la variable para que me funcione, alguien sabe como solucionar esto?