Herramientas eléctricas para la web [Deprecated]

Susy está en desuso. Ya no debería usarse en nuevos proyectos y ya no recibirá ninguna actualización.

Susy es un conjunto de herramientas independiente del diseño para crear diseños potentes y personalizados. No queríamos otro sistema de red lleno de reglas y restricciones, queríamos una herramienta poderosa para construir nuestros propios malditos sistemas. La versión tres se reduce a sus componentes más básicos: funciones que se pueden usar para construir cualquier sistema de red.

• Sitio web de Susy |
  @SassSusy
• Susy3 Introducción | Difundir en Susy3
• Susy3 Documentación
• Susy1/Susy2 Documentación

Cotizaciones

“Me gusta la idea de cuadrículas bajo demanda, en lugar de un marco estricto”.
– Chris Coyier, trucos CSS

“Susy y Zendesk se han estado llevando mágicamente… Es precisamente lo que necesitas y nada más”.
— Stephany Varga, Zendesk

“Si estás interesado en leer poesía de Sass, ¡asegúrate de mirar el código fuente de Susy!”
—Kitty Giraudel, SitePoint

Recursos

• pájaro extraño | @OddBird
• Sitios que usan Susy
• registro de cambios
• Pautas para contribuir
• Licencia BSD3

Herramientas de terceros

• Puerto Susy.js CSS-in-JS

Instalación

npm install susy

Hay dos importaciones para elegir. El valor por defecto sass/susy viene con versiones sin prefijo de las funciones principales de la API. Si desea que Susy tenga un espacio de nombre, importe sass/susy-prefix en cambio.

// un-prefixed functions
@import '<path-to>/susy/sass/susy';

// susy-prefixed functions
@import '<path-to>/susy/sass/susy-prefix';

usando anteojos

Con los anteojos configurados, puede @import 'susy';
sin proporcionar la ruta de los módulos npm.

Uso del paquete web

Cerciorarse sass-loader esta instalado:

npm install sass-loader --save-dev

Asegúrese de tener sass-loader habilitado en la configuración de su paquete web:

// webpack.config.js
module: {
  rules: [
    {
      test: /.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

Empieza a usar Susy:

/* app.scss */
@import "~susy/sass/susy";

usando trago

Agregue una tarea de trago:

// gulpfile.js
gulp.task('sass', function() {
  return gulp.src('scss/*.scss')
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: ['node_modules/susy/sass']
      }).on('error', sass.logError))
      .pipe(gulp.dest('dist/css'));
});

Empieza a usar Susy:

/* app.scss */
@import 'susy';

Usando Grunt (y Yeoman)

Para agregar a Susy a la tarea de Sass, edite su Gruntfile.js en el nivel raíz de su proyecto y busque las reglas relacionadas con Sass. Agregar require: 'susy' dentro del objeto de opciones:

// Gruntfile.js
sass: {
  dist: {
    options: {
      style: 'expanded',
      require: 'susy'
    },
    files: {
      'css/style.css': 'scss/style.scss'
    }
  }
}

Suponiendo que ya haya instalado Susy, ahora se agregará al proyecto y no entrará en conflicto con las reglas de Yeoman.

Empieza a usar Susy:

/* app.scss */
@import 'susy';

susy vs su

Puede notar que algunas funciones tienen un susy- prefijo, mientras que otros sólo tienen su-. Esto ayuda a distinguir entre las dos capas distintas:

• La capa central de grid-math se llama do, y se compone de funciones “puras” que esperan valores normalizados. Esto es útil si prefiere la sintaxis de argumentos a la sintaxis abreviada, o si está creando sus propios mixins de Susy.
• La parte superior susy capa proporciona sintaxis-azúcar: valores predeterminados globales, análisis abreviado, normalización y un conjunto más pequeño de funciones de uso común que recurren a las matemáticas básicas según sea necesario. Esta es la API principal para la mayoría de los usuarios.