Estilos avanzados con SASS en View Components
Contenido del curso
Jair Yara
Juan Castro
Profesor
Cristian Florez
Jimmy Buriticá Londoño
Obed Paz
Natali Rivero
tiken .
Joel Andres Bonilla Tellez
Carlos Rodríguez
Alex Francisco Bustos Pinzon
Guido Podesta
Max Andy Diaz Neyra
Elvis Moreira
Ciro Alejandro Sira Mogollon
Nicolás Felipe Fernandez Fandiño
Jose Castillo
Elvis Milan
Emanuel Alvarado Godinez
Alejandro Martinez
Juan Castro
Profesor
David Rangel
MAXIMILIANO JAYME DAHLQUIST
Andres Prieto
Laura Roa
Juan Castro
Profesor
Joalin Pineda
Luis Berenguer
Iris Valentina Barrios
Julian David Alzate Cuervo
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)
¡Joyita!
Con scss tambien podemos hacer esto
form{ background: $color1; &:hover{ background: $color2; } }
++Preprocesadores CSS++
Me he enamorado de Vue 💚
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 :)
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.
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>
Ojo, el propio sass ya no recomienda usar import, recomienda es el suo de used y forward
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)
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>
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>
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>
No entiendo porque no se colocot todo los estilo en el archivo sass y ya. en de tener una parte separada en el js.
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.
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!
Sass
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>
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
Decidí hacer un repo en github y desarrollarlo en mi entorno local:
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.
Yo hice un fork de un proyecto base que encontré googleando codesanbox vue 3 sass
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 ^-^
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!
¡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.
En qué curso enseñan SCSS? (no lo encuentro)
¡Hola Platzinauta 👋! Puedes ver los diferentes tipos de pre-procesadores de CSS en nuestro Curso de Preprocesadores CSS 👈👀
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?