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)
Fundamentos del Desarrollo Web Profesional
Frameworks JavaScript: React, Angular y Vue Desglosados
Creación y Reutilización de Componentes con JavaScript
Componentización de Menús Web Interactivos
Reactividad y Render en Frameworks de JavaScript
Diferencias entre Librerías y Frameworks en Desarrollo Web
Herramientas esenciales para empaquetar proyectos JavaScript con Webpack
Contexto y funcionamiento de los Frameworks JavaScript
Programación con React.js: Componentes y Hooks
Ciclo de vida de un componente en React
Desarrollo de Aplicaciones con React y Code Sandbox
Manejo de Estados en React con Hooks
Migración de AngularJS a Angular: Pasos y Buenas Prácticas
Angular: Maquetación Básica con Componentes y Directivas
Programación Reactiva con Vue.js: Crea tu Propio Mini Framework
Creación de apps web dinámicas con Vue.js en HTML
Desarrollo de Interfaces Web con Svelte
Creación de Aplicaciones con Svelte: Formularios y Arrays
Estilos con CSS, preprocesadores y CSS-in-JS
"CSS en JS: Estilos Dinámicos con JavaScript"
Estilos CSS Avanzados en Angular: Guía Práctica
Componentes Vue.js: Creación y Maquetación de Formularios
Estilos con SASS en Vue: Uso de Variables y Scope
Estilos dinámicos con Styled Components en React
Estilos Dinámicos Globales con Styled Components
Variables CSS y Emotion en Svelte: Estilos Dinámicos Avanzados
Cómo escalar sitios o aplicaciones web
Routing y Renderizado en Aplicaciones Web Modernas
Creación de rutas dinámicas con Next.js
Organización de carpetas en proyectos React: Componentes y Features
Selección de Frameworks y Librerías JavaScript: Ejemplos Prácticos
Frameworks JavaScript: Comparativa y Usos Prácticos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
app.view
, añade tus estilos globales directamente. Incluye elementos como background
, color
, font-family
, y margin
sin utilizar el atributo scoped
.Para comenzar a utilizar la sintaxis de Sass (SCSS):
lang="scss"
en tu etiqueta style
. Esto indica que estás usando el lenguaje SCSS._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;
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;
}
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;
}
Después de configurar tus estilos, asegúrate de que Sass esté compilando correctamente y reflejando los cambios en la aplicación:
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!
Aportes 20
Preguntas 4
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)
Con scss tambien podemos hacer esto
form{
background: $color1;
&:hover{
background: $color2;
}
}
Me he enamorado de Vue 💚
lo hice con dos componentes para los botones 😄
<template>
<h1>{{ msg }}</h1>
<form v-for="movie in movies" v-bind:key="movie.name">
<h2>{{ movie.name }}</h2>
<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>
<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>
<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:
/* 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>
<h2>Películas</h2>
<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">
<h3>{{ movie.name }}</h3>
<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>
<h2>Películas</h2>
<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">
<h3>{{movie.name}}</h3>
<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.
Yo hice un componente de un <div> con un <h2> y <p> anidados.
<template>
<div v-for="profile in profiles" :key="profile.name">
<h2>{{ profile.name }}</h2>
<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
<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>
<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>
<template>
<h3>{{ msg }}</h3>
</template>
<script>
export default {
name: "Title",
props: {
msg: String,
},
};
</script>
<style>
</style>
<template>
<h2>Películas</h2>
<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>
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 ^-^
Enamorado de vue!!!♥♥♥
. FINAL
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?