Joomla LESS/es: Difference between revisions

From Joomla! Documentation

Created page with "Joomla LESS"
 
 
(48 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude><languages /></noinclude>
<noinclude><languages /></noinclude>


Most of the Joomla 3.0 default template stylesheets are written using [[wikipedia:LESS_(stylesheet_language)|LESS]] and then compiled to generate the [[wikipedia:CSS|CSS]] files.
La mayoría de las hojas de estilo de las plantillas predeterminadas de Joomla! 3.0 son escritas usando [[es.wp:LESS_(stylesheet_language)|LESS]] y luego se compilan para generar los archivos [[es.wp:Hoja_de_estilos_en_cascada|CSS]].


== Where can you find the .less stylesheets and compiler? ==
== ¿Dónde se pueden encontrar los bloques de construcción .less y el compilador? ==


The <code>.less</code> building blocks are located in <code>media/jui/less/</code>. The template specific <code>.less</code>files are located in <code>templates/&lt;templates&gt;/less/</code>.
Los bloques de contrucción <code>.less</code> se encuentran en <code>media/jui/menos/</code>. Los archivos <code>.less</code> de la plantilla específica se encuentran en <code>templates/&lt;nombre_plantilla&gt;/less/</code>.


The CSS generation wrapper script, LESS compiler, and other similar build tools are located in the <code>build/</code> directory of the Joomla source located on GitHub. Refer to [[S:MyLanguage/Git_for_Coders|Git for Coders]] for more information on using GitHub. The build directory is only available from the Joomla source, it is not included in an official Joomla release.  
El  script contenedor del generador CSS , compilador de LESS, y otras herramientas de construcción similares se encuentran en el directorio <code>build/</code> del Joomla! fuente ubicado en GitHub. Consulta [[S:MyLanguage/Git_for_Coders|Git para Codificadores]] para más información sobre el uso de GitHub. El directorio de construcción sólo está disponible desde el sitio de origen, no está incluido en una versión oficial de Joomla!.  


== How to re-generate the CSS stylesheets ==
== Cómo volver a generar las hojas de estilo CSS ==


To re-generate all the CSS files from a Joomla core distribution, you will need to execute the generation scripts as a [[wikipedia:Command-line_interface|CLI application]].
Para volver a generar todos los archivos CSS de la distribución de Joomla!, tendrás que ejecutar un script de generación como una [[es.wp:Interfaz_de_línea_de_comandos|aplicación CLI]].


For example:
Por ejemplo:


<pre>cd joomla-cms/build
<pre>cd joomla-cms/build
Line 19: Line 19:
</pre>
</pre>


== Compiling your own LESS files for your template ==
== Compilar tus propios archivos LESS para tu plantilla ==


To compile less files for your own template, you will need to take a copy of the <code>generatecss.php</code> script and adjust it to suit your template.
Para compilar archivos ''less'' para tu propia plantilla, tendrás que hacer una copia del script <code>generatecss.php</code> y ajustarlo para que se adapte a tu plantilla.


Alternatively you can use a LESS Compiler plugin which compiles your .less files automatically on page reload:  
Alternativamente, puedes utilizar un plugin Compilador LESS que compile el archivo <code>.less</code> automáticamente cuando la página se recarga:  
http://extensions.joomla.org/extensions/miscellaneous/development/22424
http://extensions.joomla.org/extensions/miscellaneous/development/22424


More alternatives and tools on a recent Joomla! Magazine article:  
Más alternativas y herramientas en un reciente artículo de Joomla! Magazine:  
http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less
http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less


== Not all LESS compilers are equal ==
== No a todos los compiladores LESS son iguales ==
The LESS compiler used for the Joomla core for code style consistency is obtained from [http://leafo.net/lessphp leafo.net/lessphp].   
El compilador LESS usado para el núcleo de Joomla!, para lograr consistencia en el estilo del código, se obtiene a desde [http://leafo.net/lessphp leafo.net/lessphp].   


If you're working on your own template you can use any compiler you like.
Si estás trabajando en tu propia plantilla puedes usar cualquier compilador que te guste.


== Difference CSS vs LESS imports ==
== Diferencia de CSS vs LESS en las importaciones ==


The main .less file and starting point e.g. in protostar is located in <pre>/templates/protostar/less/template.less</pre>
Los archivos .LESS principales y de inicio, por ejemplo en protostar, se encuentran en <pre>/templates/protostar/less/template.less</pre>
If you open that file you will find many @imports in this file - imports from many different places. Unlike imports in CSS, imports in LESS get compiled to a single CSS file. This will result in fewer http requests and speed your site up.
Si abres ese archivo puedes encontrar muchas declaraciones <tt>@imports</tt> - las importaciones proceden de muchos lugares diferentes. A diferencia de las importaciones en CSS, las importaciones en LESS se compilan en un solo archivo CSS. Esto dará lugar a un menor número de peticiones http y acelerará tu sitio.


== From existing CSS to LESS / import CSS files ==
== De CSS existente a LESS / importar archivos CSS ==


You may want to add your existing CSS files and classes to your LESS powered template or start with what you have. All CSS declarations are compatible with LESS so you can just rename your .css files to .less and you can compile and use them. You can then step by step make use of the great dynamic features LESS has to offer: variables, mixins, operations and functions. See http://www.lesscss.org
Puede que desees añadir a tus archivos CSS ya existentes clases LESS potenciando tu plantilla o empezar con lo que tienes. Todas las declaraciones CSS son compatibles con LESS por lo que sólo debes cambiar el nombre de la extensión de tus archivos de <tt>.css</tt> a <tt>.less</tt> y puedes compilarlos y usarlos. Entonces puedes, paso a paso, hacer uso de las grandes características dinámicas que LESS tiene para ofrecer: variables, mixins, operaciones y funciones. Mira http://www.lesscss.org


Notice: the examples below reference the default Protostar template for clarity. Your paths may be different.  
Aviso: para los siguientes ejemplos de referencia se usa la plantilla Protostar predeterminada, para mayor claridad. Tus rutas pueden ser diferentes. <br />
Notice: If you want to customize Protostar template it is a good idea to copy the template and customize it afterwards - so that Joomla! updates do not overwrite your customizations.
Aviso: Si deseas personalizar la plantilla Protostar es una buena idea copiar la plantilla y personalizarla después - para que las actualizaciones de Joomla! no sobrescriba las personalizaciones.


=== Option 1: import your .css as .less files ===
=== Opción 1: importar tus archivos .css como .less ===
(a little bit work but worth it, imho)
(un poco de trabajo pero vale la pena, en mi humilde opinión)


Now lets assume you want to include your custom files and get them parsed by LESS compiler - you do NOT need to rewrite your .css to LESS because plain .css works as well. The only thing you have to do is to rename your .css files to .less and add an @import statement into above mentioned main /templates/protostar/less/template.less
Ahora vamos a suponer que deseas incluir tus archivos personalizados y que se procesado por el compilador LESS - NO necesitas volver a escribir tus archivos <tt>.css</tt> para LESS, porque los <tt>.css</tt> tal como están funcionan igual de bien. La única cosa que tienes que hacer es cambiar el nombre de la extensión de tus archivos <tt>.css</tt> por <tt>.less</tt> y añadir una declaración <tt>@import</tt> en el ya mencionado principal <tt>/templates/protostar/less/template.less</tt>


I assume you put your custom .css files renamed to .less into the /templates/protostar/less folder. Now you open /templates/protostar/less/template.less and at the bottom of the file you import your custom .less files so that they override existing declarations:
Supongo que pones tus archivos <tt>.css</tt> personalizados, con el nombre de la extensión cambiada a <tt>.less</tt> en la carpeta <tt>/templates/protostara/less</tt>. Ahora abre <tt>/templates/protostara/less/template.less</tt> y en la parte inferior del archivo importa tu archivo <tt>.less</tt> personalizado para que se sobrescriban las declaraciones:


<pre>
<pre>
Line 59: Line 59:
</pre>
</pre>


If you now compile your main template.less file you end up with one main template.css optimized and minified (if you wish). You also reduced your http requests and the site should load faster. Now you can start step by step in your custom.less files to use less variables and other cool stuff http://lesscss.org has to offer.
Si ahora compilas el archivo principal <tt>template.less</tt> terminaras con un principal <tt>template.css</tt> optimizado y minimizado (si lo deseas). También se redujeron tus peticiones http y el sitio se debe cargar más rápido. Ahora puedes comenzar, paso a paso, en personalizar los archivos <tt>.less</tt> para utilizar variables y otras cosas interesantes que http://lesscss.org tiene para ofrecer.


=== Option 2: just import your .css / does not work for overriding ===
=== Opción 2: importar tu .css / no funciona para sobreescribir ===
In /templates/protostar/less/template.less just import your .css files and they will be included as imports into main template.css:
En <tt>/templates/protostar/less/template.less</tt> importa tus archivos <tt>.css</tt> y se incluirán como importaciones en la plantilla <tt>template.css</tt>:


<pre>
<pre>
Line 70: Line 70:
</pre>
</pre>


But this way you do not get any optimization. And a big issue is that this import is always on top before other declarations - so you can't override an existing declaration.
Pero de esta manera no obtienes ningún tipo de optimización. Y un gran problema es que esta importación se hace siempre en la parte superior antes de otras declaraciones - de modo que no puedes sobrescribir una declaración existente.


More information: http://lesscss.org/#usage (Section Importing)
Más información: http://lesscss.org/#usage (Sección Importación)


== References ==
== Referencias ==


http://kyleledbetter.com/jui/less/ - Example of building your own template.less
http://kyleledbetter.com/jui/less/ - Ejemplo de la construcción de su propia plantilla.less


<noinclude>[[Category:New in Joomla! 3.0]]
<noinclude>[[Category:New in Joomla! 3.0/es]]
[[Category:Bug Squad]]
[[Category:Bug Squad/es]]
[[Category:Template Development]]
[[Category:Template Development/es]]
[[Category:Development]]
[[Category:Development/es]]
</noinclude>
</noinclude>

Latest revision as of 19:56, 5 November 2015

Other languages:

La mayoría de las hojas de estilo de las plantillas predeterminadas de Joomla! 3.0 son escritas usando LESS y luego se compilan para generar los archivos CSS.

¿Dónde se pueden encontrar los bloques de construcción .less y el compilador?

Los bloques de contrucción .less se encuentran en media/jui/menos/. Los archivos .less de la plantilla específica se encuentran en templates/<nombre_plantilla>/less/.

El script contenedor del generador CSS , compilador de LESS, y otras herramientas de construcción similares se encuentran en el directorio build/ del Joomla! fuente ubicado en GitHub. Consulta Git para Codificadores para más información sobre el uso de GitHub. El directorio de construcción sólo está disponible desde el sitio de origen, no está incluido en una versión oficial de Joomla!.

Cómo volver a generar las hojas de estilo CSS

Para volver a generar todos los archivos CSS de la distribución de Joomla!, tendrás que ejecutar un script de generación como una aplicación CLI.

Por ejemplo: 

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

Compilar tus propios archivos LESS para tu plantilla

Para compilar archivos less para tu propia plantilla, tendrás que hacer una copia del script generatecss.php y ajustarlo para que se adapte a tu plantilla.

Alternativamente, puedes utilizar un plugin Compilador LESS que compile el archivo .less automáticamente cuando la página se recarga: http://extensions.joomla.org/extensions/miscellaneous/development/22424

Más alternativas y herramientas en un reciente artículo de Joomla! Magazine: http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

No a todos los compiladores LESS son iguales

El compilador LESS usado para el núcleo de Joomla!, para lograr consistencia en el estilo del código, se obtiene a desde leafo.net/lessphp.

Si estás trabajando en tu propia plantilla puedes usar cualquier compilador que te guste.

Diferencia de CSS vs LESS en las importaciones

Los archivos .LESS principales y de inicio, por ejemplo en protostar, se encuentran en 

/templates/protostar/less/template.less

Si abres ese archivo puedes encontrar muchas declaraciones @imports - las importaciones proceden de muchos lugares diferentes. A diferencia de las importaciones en CSS, las importaciones en LESS se compilan en un solo archivo CSS. Esto dará lugar a un menor número de peticiones http y acelerará tu sitio.

De CSS existente a LESS / importar archivos CSS

Puede que desees añadir a tus archivos CSS ya existentes clases LESS potenciando tu plantilla o empezar con lo que tienes. Todas las declaraciones CSS son compatibles con LESS por lo que sólo debes cambiar el nombre de la extensión de tus archivos de .css a .less y puedes compilarlos y usarlos. Entonces puedes, paso a paso, hacer uso de las grandes características dinámicas que LESS tiene para ofrecer: variables, mixins, operaciones y funciones. Mira http://www.lesscss.org

Aviso: para los siguientes ejemplos de referencia se usa la plantilla Protostar predeterminada, para mayor claridad. Tus rutas pueden ser diferentes.
Aviso: Si deseas personalizar la plantilla Protostar es una buena idea copiar la plantilla y personalizarla después - para que las actualizaciones de Joomla! no sobrescriba las personalizaciones.

Opción 1: importar tus archivos .css como .less

(un poco de trabajo pero vale la pena, en mi humilde opinión)

Ahora vamos a suponer que deseas incluir tus archivos personalizados y que se procesado por el compilador LESS - NO necesitas volver a escribir tus archivos .css para LESS, porque los .css tal como están funcionan igual de bien. La única cosa que tienes que hacer es cambiar el nombre de la extensión de tus archivos .css por .less y añadir una declaración @import en el ya mencionado principal /templates/protostar/less/template.less

Supongo que pones tus archivos .css personalizados, con el nombre de la extensión cambiada a .less en la carpeta /templates/protostara/less. Ahora abre /templates/protostara/less/template.less y en la parte inferior del archivo importa tu archivo .less personalizado para que se sobrescriban las declaraciones: 

@import "modules.less";
@import "components.less";
@import "articles.less";

Si ahora compilas el archivo principal template.less terminaras con un principal template.css optimizado y minimizado (si lo deseas). También se redujeron tus peticiones http y el sitio se debe cargar más rápido. Ahora puedes comenzar, paso a paso, en personalizar los archivos .less para utilizar variables y otras cosas interesantes que http://lesscss.org tiene para ofrecer.

Opción 2: importar tu .css / no funciona para sobreescribir

En /templates/protostar/less/template.less importa tus archivos .css y se incluirán como importaciones en la plantilla template.css: 

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

Pero de esta manera no obtienes ningún tipo de optimización. Y un gran problema es que esta importación se hace siempre en la parte superior antes de otras declaraciones - de modo que no puedes sobrescribir una declaración existente.

Más información: http://lesscss.org/#usage (Sección Importación)

Referencias

http://kyleledbetter.com/jui/less/ - Ejemplo de la construcción de su propia plantilla.less

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Joomla_LESS/es&oldid=253415"