Desarrollo web front-end: ¿Qué preprocesador CSS debo elegir como el primero?

Alguna lectura:

Hay muchas publicaciones de blog en los distintos preprocesadores de CSS, y cuál puede ser mejor:

Sass vs. MENOS vs. Stylus: tiroteo del preprocesador – Tutorial de Envato Tuts + Code

Por qué elijo Stylus (y tú también deberías) – Envato Tuts + Web Design Article

Preprocesadores CSS comparados: MENOS vs. Sass vs. Stylus

Sass es más popular

En el trabajo, debatimos sobre Sass vs. Stylus por un tiempo. Sass ganó simplemente porque más personas lo sabían. No solo todos nuestros desarrolladores de front-end lo sabían, la mayoría de nuestros clientes lo sabían, y la mayoría de las agencias de diseño con las que trabajamos también lo sabían.


Por qué prefiero Stylus:

Son las variables:

Sass:

$someVar : #333;

Aguja

someVar = #333;

En los lenguajes de programación, asignamos valores a las variables con el símbolo igual, sin requerir algún carácter arbitrario para hacerlo. Stylus no requiere que recuerde una nueva sintaxis. Sass lo hace.

Y es la @:

Hablar con descaro a:

@mixin border-radius ($ horizontal, $ vertical) {
@if $ vertical {
-wekbit-border-radius: $ horizontal $ vertical;
radio de borde: $ horizontal $ vertical;
} más {
-wekbit-border-radius: $ horizontal;
radio de borde: $ horizontal;
}
}

Aguja:

radio de borde (horizontal, vertical) {
si vertical {
-wekbit-border-radius: horizontal vertical;
radio de borde: horizontal vertical;
} más {
-wekbit-border-radius: horizontal;
radio de borde: horizontal;
}
}

En Stylus, no necesito usar un símbolo que ya esté reservado en CSS para hacer una mezcla o escribir un bloque lógico. Tener una cosa menos que necesito almacenar en mi cerebro es una forma más de codificar de manera más eficiente.

Oh, la flexibilidad:

Sass requiere que use corchetes, dos puntos y punto y coma. Si te pierdes uno, es un error de compilación. ¿Pero sabes que? Hay algo sobre escribir esto:

.artículo
tamaño de fuente: 2em
.panel
tamaño de fuente: 1.5em
.enlazar
color azul
decoración de texto: ninguno

¿ Ves eso? Es glorioso Es como no usar ropa interior cuando hay una brisa fresca; incómodo al principio, pero finalmente refrescante.

Ahora, no recomiendo no abandonarlo todo . Deja esos dos puntos allí. Puedes volar demasiado cerca del sol, Iccarrus.

Este fue un buen artículo que encontré aquí: 6 Opciones actuales para preprocesadores CSS

¿Qué preprocesador de CSS utiliza?

  • Hablar con descaro a
  • Less.js
  • Aguja
  • CSS-Crush
  • Mito
  • Rehacer
  • Otras opciones de preprocesador CSS

Aquí hay otras opciones más oscuras para los preprocesadores CSS. No los examiné en profundidad, por lo que tendrá que examinarlos usted mismo para ver si satisfacen sus necesidades.

  • Clay: un preprocesador CSS creado con Haskell
  • DtCSS: un script PHP que analiza la sintaxis de DtCSS en CSS
  • Preprocesador CSS: un preprocesador implementado en PHP5. Este es viejo y parece inactivo.
  • Cambiar CSS: un preprocesador CSS que se ejecuta en Apache (mod_python necesita estar instalado y habilitado)

Respuesta corta: Recomiendo SASS: potente, fácil de acceder y más buscado, por ejemplo, para listados de descripciones de trabajo / vacantes y recursos de aprendizaje disponibles.


Realmente no importa mientras estés cómodo, familiar y productivo con él. Generalmente brindan más flexibilidad, mejor arquitectura de código, DRY, etc.

En cierto modo, me gustó más el stylus que cualquiera de ellos, es un poco más popular entre la multitud de node.js … Podría volver a él para proyectos personales, pero creo que es mejor seguir uno y no preocuparme por eso.

MENOS es … cuando llegué a los preprocesadores a lo grande pude ver que SASS estaba ganando la guerra, y por ninguna otra razón que ir con el status quo / popularidad, fui con SASS


SASS es bastante impresionante y fácil de conseguir. Puede escribir CSS puro en sus archivos .scss (ya que css es un subconjunto de SCSS) … por lo que todos los tutoriales de css3 en profundidad aún funcionarán en SCSS. De hecho, puede cambiar un archivo css a la extensión .scss y luego importarlo a su main.scss con ‘@include’.

Foundation y (creo) Bootstrap ahora están usando SASS para que pueda importar todo el marco scss, pero la belleza es que simplemente puede elegir los componentes que desee

[matemáticas] @incluye ‘vendedor / bootstrap / grid’ [/ matemáticas]

[matemáticas] @incluye ‘vendedor / bootstrap / tipografía’ [/ matemáticas]

Cualquiera que sea el preprocesador que elija, debe intentar seguir una estructura buena / coherente de sus archivos fuente (no completados), para que sea más fácil encontrar cosas, compartir código, etc. Copio mis ideas de man travis principal:


En lo que respecta a los preprocesadores, literalmente puede ir a través del sitio web sass e instalarlo directamente como una gema ruby ​​(si tiene ruby ​​instalado) … pero para extender su ‘toolbelt’ es preferible incluirlo en su proceso de desarrollo de desarrollo.

un buen punto de partida es usar Compile Less, Sass, CoffeeScript y mucho más con la actualización del navegador en vivo. prepros es gratis (prueba) y se ejecuta en mac / windows, ¡es muy, muy fácil de comenzar!

Si desea tener más control / extender su proceso de construcción aún más, puede usar herramientas como grunt gulp o webpack. Prefiero tragar de todos estos

no uso ningún preprocesador CSS

Solo uso CSS3 central, cubro todo para mí.

selección de fila impar, incluso más que esto

Todavía no estoy pensando en usar y probar ningún preprocesador CSS

yo uso jQueiry || jScript cuando sea necesario, otras formas en que evito usar bibliotecas de script java

mejor uso de marcos CSS


gracias por a2a

Fui con SASS cuando miré a los preprocesadores. Encontré los documentos fáciles de entender. Está construido sobre Ruby, que se instaló de manera predeterminada en Mac y me gustó el hecho de que podría configurar la salida de sintaxis y agregarle bibliotecas como Compass para obtener más potencia. Lo recomiendo encarecidamente. Incluso Bootstrap 4 se ha creado con SASS.