Instalación y Configuración de SAS en Visual Studio Code

Clase 3 de 20 • Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Clase anteriorSiguiente clase

Ulqernesh Karvenae

student•

Cuando ejecuten el comando : .

Ctrl + Shift + P verifiquen que ejecutan "Live Sass: Watch Sass"

Juan Antonio Delgadillo Carrillo

student•

muchas gracias un pequeño detalle que no sabier por que no se crearon los archios live Sass Watch Sass en esa opcio se crean los archivos

Rubén Vega

student•

Muchas gracias por ese detalle, se me pasó completamente por alto y pensaba que el error estaba en el link de HTML con CSS. . Mis kudos

Joel Dominguez Merino

student•

Que felicidad cuando todo funciona correctamente!

Nestor Rios Garcia

student•

Siii, también me paso.

Ramses jecsan

student•

Tienes bien tu formaro settings.json? a mi me dice que tengo 7 problemas

Juan David García Montenegro

student•

Para que el CSS no te guarde en una carpeta random, cambia la ruta de guardado a esta:

"savePath": "~/../css",

Lo anterior iría en el settings.json, así siempre te va a guardar en la carpeta que es y no depende desde dónde hayas abierto el VSC 🙌😀

Ramses jecsan

student•

crees que me puedas pasar tu contenido de settings.json? a mi me aparece que tengo 7 problemas y no se como puedo solucionarlo

Sebastián Caraballo Marzola

student•

gracias me funciono

Nicolas Neira

student•

El proceso de Compilado

. Para hacer uso de SASS dentro de nuestro proyecto tenemos que tener en cuenta 3 puntos importantes que forman parte del proceso de compilación. .

Imput file (archivo de entrada) —> Es donde vamos a escribir nuestros estilos haciendo uso de la sintaxis de Sass, incluyendo la extensión .scss en el nombre del archivo. .
Output file (archivo de salida) —> Es donde se colocarán los estilos finales con CSS nativo, que provienen del archivo de entrada. (nunca se debe editar directamente el archivo de salida) .
Los comandos para ejecutar y compilar Sass —> Hay varias formas de ejecutar y compilar Sass, cada una con sus propios comandos y herramientas. La elección del método dependerá del entorno de desarrollo y las preferencias personales del desarrollador.

Carlos Palacios

student•

No me corre el live scss, ejecuto el comando y me sale "Not a Sass file The file currently open in the editor window isn't a sass file"

Que podria hacer?

Adan Saavedra

student•

La profe no lo específica, pero cuando abres el command palette (command + shift + P) después de escribir 'live sass' debes buscar el que dice 'watch sass'. Te tiro ese problema por que cuando pones 'live sass', la primera opción es 'check file will be included' . Espero haberte ayudado😁

Ricardo Veliz Canaviri

student•

Gracias

Juan Cortez

student•

Mis apuntes.

Para trabajar con SASS:

Crear una carpeta CSS (NO EDITABLE) y SCSS (EDITABLE)
Dentro de la carpeta SCSS crear el archivo main.scss
Obviamente, instalar las extensiones SASS de Syler y SASS Compiler de Glenn Marks
Ir a Settings y buscar la edición del JSON de Live SASS Compiler (En el buscador poner: SASS Format)
Configurar en la opción: "savePath": "/css",
Ctrl + Shift + P y escribir Live SASS: Watch SASS
Poner un fondo de cualquier color en el archivo main.scss

Creo que ahí está.

Miguel de la Cruz

student•

Las extensiones que se descargan son:

Sass - Syler
Live Sass Compiler - Glen Marks
Liver Server - Ritwick Dey

Cecilia Mansilla

student•

Me sale ese error, y no me toma el color red. alguna ayuda de porque pasa?

Ariel Hernán Contini

student•

Hay algo raro con los vídeos de los nuevos cursos de platzi...tienen problemas de optimización de carga. si de verdad están interesados en llegar a todo tipo de personas, es importante que revean la tecnología con la que están trabajando al momento de visualizar los vídeos...sería muy bueno que le peguen una debuggeada porque no esta siendo muy efectiva la experiencia de usuario.

Victor Vls

student•

he seguido la ruta y en este video hay muchas cosas nuevas que no se explicaron

3:08 de donde apareció esa consola y los comandos usados

5:30 que es un archivo json

6:20 que es un boilerplate

N40 M10

student•

Todo iba bien hasta que apareció Live Sass compiler.

Benjamin Allen Ramirez Horna

student•

todo salio bien que bendicion aaah

Luis Angel Castillo Vega

student•

Daniel Andres Rojas Paredes

student•

me pasa algo extraño, arranco el sas y mientras escribo el .scss todo parece normal en el output me salen los errores que cometo al escribir, sin embargo cuando abri el prollecto en el navegador y vi que los estilos no se estaban aplicando a pesar de que la hoja estaba bien enganchadoa fui a revisar el main.css y me encontre conque solo tenia una de las clases. pero nisiquiera tiene un codigo con sentido adentro aca mi codigo de esa clase en sass:

  
.info{
background-color: $info-background-color;
p{margin: 4px;
  padding:4px;
  font-size: 0.75rem;
  color: $description-color;
  text-wrap: wrap;
 }
 button{background-color: $button-color;
  color: $button-text-color;
  font-size: 1rem;
  border-radius: 8px;
  }
  }
```y aca lo que me aparece en el main

```js

.info {
  background-color: info-;
}/*# sourceMappingURL=main.css.map */

``` y no me aparece ningun error en mi archivo de sas  que justifique esto, ya revise la configuracion del punto json, y no parece tener nada extraño. no se que hacer o por donde buscarle?

Ramses jecsan

student•

Alguien me pueda ayudar por que en mi formato settings.jason me sale esto? y como lo puedo solucionar espero y me puedan apoyar, gracias

Julián Mauricio Sánchez Cediel

student•

Hola chicos,

no me muestra la ruta cuando le doy en el control shif p, livee sass wacht sass, me sale este error, alguien me puede ayudar

Checking current file
No active file
There isn't an active editor window to process
Click an open file so it can be checked
--------------------
Watching...
--------------------
Watching...
--------------------
Checking current file
c:\Users\fgoju\Desktop\fonodev\scss\main.scss}
--------------------
Not a Sass file
The file currently open in the editor window isn't a sass file
--------------------
Watching...
--------------------
Watching...
--------------------
Watching...
--------------------

Luis Toro Cordero

student•

Deberias revisar que el archivo main.scss este creado correctamente, en dado caso que sea asi, verifica los ajustes del plugin que este todas las rutas y los archivos que observa esten correctamente definidos.

Pastor Alexander Castro Aguilar

student•

¿Consideran que es mejor usar Sass con los comandos o usando la extensión de Visual Studio?

Daniel Fernando Roa Chamorro

student•

A mi por que se me crearon los archivos .css y .css.map en la carpeta de scss? alguien me ayuda?

Jean Carlos Rodríguez

student•

cuando intente buscar en setting el Live sass compile no lo pude encontrar

Flor Berenice Frías Reyes

student•

no me corre, me sale el error de Not a Sass file The file currently open in the editor window isn't a sass file

abri con command+shift+P en live sass watch sass, y me aparece ese error , me podria ayudar por favor

Julián Mauricio Sánchez Cediel

student•

me pasa el mismo error, ya lo pudiste solucionar???

Instalación y Configuración de SAS en Visual Studio Code

Conociendo SASS

Desarrollo de Páginas Web con SAS para Principiantes

Funcionamiento y ventajas de los preprocesadores CSS

Instalación y configuración del entorno de trabajo

Instalación y Configuración de SAS en Visual Studio Code

Reglas y uso

Variables y Estructura de Hojas de Estilos en SAS

Selectores CSS y Variables en SAS: Aplicación Práctica

Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Uso de Nesting y Ad Rules en SAS para Modularizar CSS

Expresiones

Expresiones en CSS: Números, Strings, Colores y Booleanos

Proyecto: sección main

Estilos CSS para Sección Principal en Figma y HTML

Herencia en SASS

Uso de Herencia en SAS para Estilos Reutilizables

Estilos CSS y Herencia en Proyectos Web con Figma y VS Code

Manipulación de Flexbox para Diseño de Tarjetas en CSS

Mixins

Uso de Mixins en SAS para Simplificar Estilos en CSS

Implementación de Mixins en Visual Studio Code con Flexbox y SAS

Funciones

Operadores y Funciones en SAS: Uso y Ejemplos Prácticos

Proyecto

Estilos CSS para Sección "Por Qué Nosotros" en HTML

Estilos y Animaciones en Galerías con Figma y CSS

Estilos CSS para Sección de Ubicación y Footer en HTML

Deploy

Publicación de Proyectos con GitHub Pages

Extras

Instalación y Configuración de Sass con Node.js