Conozco muy bien CSS, pero estoy confundido acerca de Sass. ¿En qué se diferencia SCSS de CSS? Si uso SCSS en lugar de CSS, ¿funcionará igual?
Conozco muy bien CSS, pero estoy confundido acerca de Sass. ¿En qué se diferencia SCSS de CSS? Si uso SCSS en lugar de CSS, ¿funcionará igual?
Además de la respuesta de Idris :
En CSS escribimos el código como se muestra a continuación, en su totalidad.
body{
width: 800px;
color: #ffffff;
}
body content{
width:750px;
background:#ffffff;
}
En SCSS podemos acortar este código usando a @mixin
para no tener que escribir color
y width
propiedades una y otra vez. Podemos definir esto a través de una función, de manera similar a PHP u otros lenguajes.
$color: #ffffff;
$width: 800px;
@mixin body{
width: $width;
color: $color;
content{
width: $width;
background:$color;
}
}
Sin embargo, en SASS, toda la estructura es visualmente más rápida y limpia que SCSS.
Parece que actualmente no es compatible con CSS en línea.
$color: #ffffff
$width: 800px
$stack: Helvetica, sans-serif
body
width: $width
color: $color
font: 100% $stack
content
width: $width
background:$color
CSS es el lenguaje de estilo que cualquier navegador entiende para diseñar páginas web.
SCSS es un tipo especial de archivo para SASS
, un programa escrito en Ruby que ensambla CSS
hojas de estilo para un navegador y, para obtener información, SASS
agrega mucha funcionalidad adicional a las CSS
variables similares, anidamiento y más, lo que puede hacer que la escritura CSS
sea más fácil y rápida.
Los archivos SCSS son procesados por el servidor que ejecuta una aplicación web para generar un archivo tradicional CSS
que su navegador pueda entender.
css
también tiene variables. Puedes usarlos así:
--primaryColor: #ffffff;
--width: 800px;
body {
width: var(--width);
color: var(--primaryColor);
}
.content{
width: var(--width);
background: var(--primaryColor);
}
Y esto es menos
@primarycolor: #ffffff;
@width: 800px;
body{
width: @width;
color: @primarycolor;
.content{
width: @width;
background:@primarycolor;
}
}
Definiciones de variables a la derecha:
$ => SCSS, SASS
-- => CSS
@ => LESS
Todas las respuestas son buenas, pero la pregunta es un poco diferente a las respuestas.
"sobre Sass. ¿En qué se diferencia SCSS de CSS" : scss tiene una sintaxis CSS3 bien formada . utiliza el preprocesador sass para crear eso.
y si uso SCSS en lugar de CSS, ¿funcionará igual? si. si su ide es compatible con el preprocesador sass. que funcionará igual.
Sass tiene dos sintaxis. La sintaxis más utilizada se conoce como "SCSS" (para "Sassy CSS"), y es un superconjunto de la sintaxis de CSS3. Esto significa que todas las hojas de estilo CSS3 válidas también son SCSS válidas. Los archivos SCSS usan la extensión .scss.
La segunda sintaxis más antigua se conoce como sintaxis con sangría (o simplemente ".sass"). Inspirado en la concisión de Haml, está destinado a personas que prefieren la concisión a la similitud con CSS. En lugar de corchetes y punto y coma, utiliza la sangría de líneas para especificar bloques. Los archivos en la sintaxis con sangría usan la extensión .sass.
¿Qué es un preprocesador CSS?
CSS en sí mismo carece de lógica y funcionalidad complejas que se requieren para escribir código reutilizable y organizado. Como resultado, un desarrollador está sujeto a limitaciones y enfrentaría una dificultad extrema en el mantenimiento y la escalabilidad del código, especialmente cuando trabaja en proyectos grandes que involucran código extenso y múltiples hojas de estilo CSS. Aquí es donde los preprocesadores de CSS vienen al rescate.
Un preprocesador de CSS es una herramienta que se utiliza para ampliar la funcionalidad básica del CSS estándar predeterminado a través de su propio lenguaje de programación. Nos ayuda a usar una sintaxis lógica compleja como: variables, funciones, mixins, anidación de código y herencia, por nombrar algunos, sobrecargando su CSS vainilla. Mediante el uso de preprocesadores CSS, puede automatizar sin problemas las tareas domésticas, crear fragmentos de código reutilizables, evitar la repetición y la hinchazón del código y escribir bloques de código anidados que estén bien organizados y sean fáciles de leer. Sin embargo, los navegadores solo pueden comprender el código CSS vainilla nativo y no podrán interpretar la sintaxis del preprocesador CSS. Por lo tanto, la sintaxis del preprocesador compleja y avanzada debe compilarse primero en la sintaxis CSS nativa, que luego puede ser interpretada por los navegadores para evitar problemas de compatibilidad entre navegadores.
Avanzando en el artículo, veremos los 3 preprocesadores CSS más populares que utilizan actualmente los desarrolladores de todo el mundo, es decir, Sass, LESS y Stylus. Antes de decidir el ganador entre Sass vs LESS vs Stylus, déjenos conocerlos en detalle primero.
Sass - Hojas de estilo sintácticamente impresionantes
Sass es el acrónimo de "Syntactically Awesome Style Sheets". Sass no solo es el preprocesador CSS más popular del mundo, sino también uno de los más antiguos, lanzado en 2006 por Hampton Catlin y luego desarrollado por Natalie Weizenbaum. Aunque Sass está escrito en lenguaje Ruby, un Precompiler LibSass permite analizar Sass en otros lenguajes y desacoplarlo de Ruby. Sass tiene una comunidad activa masiva y amplios recursos de aprendizaje disponibles en la red para principiantes. Gracias a su madurez, estabilidad y poderosa destreza lógica, Sass se ha establecido a la vanguardia del preprocesador CSS por delante de sus pares rivales.
Sass se puede escribir en 2 sintaxis utilizando Sass o SCSS. ¿Cuál es la diferencia entre los dos? Vamos a averiguar.
Declaración de sintaxis: Sass vs SCSS
Considere el siguiente ejemplo con la sintaxis Sass vs SCSS junto con el código CSS compilado.
Sass SYNTAX
$font-color: #fff
$bg-color: #00f
#box
color: $font-color
background: $bg-color
SCSS SYNTAX
$font-color: #fff;
$bg-color: #00f;
#box{
color: $font-color;
background: $bg-color;
}
En ambos casos, ya sea Sass o SCSS, el código CSS compilado será el mismo:
#box {
color: #fff;
background: #00f;
Uso de Sass
Podría decirse que el Bootstrap del framework front-end más popular está escrito en Sass. Hasta la versión 3, Bootstrap estaba escrito en MENOS, pero bootstrap 4 adoptó Sass y aumentó su popularidad. Algunas de las grandes empresas que utilizan Sass son: Zapier, Uber, Airbnb y Kickstarter.
MENOS - Hojas de estilo más delgadas
LESS es un acrónimo de “Leaner Stylesheets”. Fue lanzado en 2009 por Alexis Sellier, 3 años después del lanzamiento inicial de Sass en 2006. Mientras que Sass está escrito en Ruby, LESS está escrito en JavaScript. De hecho, LESS es una biblioteca de JavaScript que amplía la funcionalidad del CSS vainilla nativo con mixins, variables, anidamiento y bucle de conjunto de reglas. Sass vs LESS ha sido un debate acalorado. No es de extrañar que LESS sea el competidor más fuerte de Sass y tenga la segunda base de usuarios más grande. Sin embargo, cuando bootstrap abandonó LESS a favor de Sass con el lanzamiento de Bootstrap 4, la popularidad de LESS disminuyó. Una de las pocas desventajas de LESS sobre Sass es que no admite funciones. A diferencia de Sass, LESS usa @ para declarar variables que pueden causar confusión con @media y @keyframes. Sin embargo, Una ventaja clave de LESS sobre Sass y Stylus o cualquier otro preprocesador, es la facilidad de agregarlo a su proyecto. Puede hacerlo utilizando NPM o incorporando el archivo Less.js. Declaración de sintaxis: LESS Utiliza la extensión .less. La sintaxis de LESS es bastante similar a SCSS con la excepción de que para declarar variables, en lugar del signo $, LESS usa @.
@font-color: #fff;
@bg-color: #00f
#box{
color: @font-color;
background: @bg-color;
}
COMPILED CSS
#box {
color: #fff;
background: #00f;
}
Uso de LESS El popular framework Bootstrap hasta el lanzamiento de la versión 4 estaba escrito en LESS. Sin embargo, otro marco popular llamado SEMANTIC UI todavía está escrito en LESS. Entre las grandes empresas que utilizan Sass se encuentran: Indiegogo, Patreon y WeChat.
Aguja
El lápiz óptico fue lanzado en 2010 por el ex desarrollador de Node JS TJ Holowaychuk, casi 4 años después del lanzamiento de Sass y 1 año después del lanzamiento de LESS. El lápiz está escrito en Node JS y encaja perfectamente con la pila JS. El lápiz estuvo fuertemente influenciado por la destreza lógica del Sass y la simplicidad de LESS. A pesar de que Stylus sigue siendo popular entre los desarrolladores de Node JS, no ha logrado hacerse con una parte considerable por sí mismo. Una ventaja de Stylus sobre Sass o LESS es que está armado con funciones integradas extremadamente poderosas y es capaz de manejar computación pesada.
Declaración de sintaxis: Stylus usa la extensión .styl. Stylus ofrece una gran flexibilidad en la sintaxis de escritura, admite CSS nativo y permite la omisión de corchetes, dos puntos y punto y coma. Además, tenga en cuenta que Stylus no usa los símbolos @ o $ para definir variables. En cambio, Stylus usa los operadores de asignación para indicar una declaración de variable.
STYLUS SYNTAX ESCRITO COMO CSS NATIVO
font-color = #fff;
bg-color = #00f;
#box {
color: font-color;
background: bg-color;
}
O
STYLUS SYNTAX SIN TIRANTES RIZADOS
font-color = #fff;
bg-color = #00f;
#box
color: font-color;
background: bg-color;
O
STYLUS SYNTAX SIN COLONES Y SEMICOLONES
font-color = #fff
bg-color = #00f
#box
color font-color
background bg-color