Utilizando LESS, el preprocesador CSS

Extracto de la transcripción automática del vídeo realizada por YouTube.

okay all right well I want to thank you guys all for coming you know session right after lunch on the last day of the conference gorgeous weather outside for the first time you know but so so we'll see look see how fast we can go through this but no okay

so this is about less which I assume that everybody in here has heard of or you never would have bothered to come to this session who here has actually used less or looked at it at all okay so everybody's done a little bit of it is there anybody here who

has never used less at all okay use it you just looked at it and you've seen it right yeah yeah I did a presentation okay yes less you know okay so I'm gonna be going through what it is most of you know so that this won't take very long but using

less and this is just losing less in general and then actually how do you use less in Joomla itself so first of all what is less it's dynamic CSS it lets you do easy customization one of the things that you can do is because it's dynamic you are able

to specify certain things that will then follow throughout your CSS excuse me sorry yeah I need some more there's water over there okay sorry get started as I died in front of you all right hmm okay so we're talking about good timing gives everybody

a chance to tell me hundreds I'm sitting here dying Oh what was that um I think I got the water which should be okay so Thanks okay so we were talking dynamic CSS it lets you actually define something and then use it throughout the CSS and have changes

being made depending on what's coming into it it allows you to do easy customizations because you can define things at the beginning and then use them throughout the rest of the yes and then and then it lets you use them throughout the rest of your CSS

files and it lets you reuse a lot of things you can define certain things in one place and then just call that in with sort of like a shortcut nickname so you don't have to retype the whole thing one of the really great things about it is the power of

the variables that you're allowed to use and we'll be going over what those are and how those work so it is a superset of less that means that anything that is valid unless I'm sorry anything just valid in CSS is also valid unless in fact all you

have to do is just take a CSS file and change the dot CSS to dot L ESS you got a less file this the name of this was less you know the CSS preprocessor so there are different ways that you can do this pre-processing you can do it on the client side you can

let the browser do it using javascript this is really handy to do sometimes if you're doing your development because then you don't have to worry about separately doing it you can just put this up in your your index dot PHP file and have it automatically

compile it or pre-process it every time you've made a change so you didn't have to think about it and where you would get this if you go to this link here and I will be putting this up on SlideShare so you'll have all this there but if you go to

the less CSS org they have their the compiler that you can use that gives you or actually gives you the JavaScript file that you would use that would process the less files for you so the way that you would do it is in your index dot PHP file you would add

this link to a style sheet and it's the style sheet slash less where you're used to doing it slash CSS and then your reference is just to whatever the name of your file is in this case it's called Styles not less it could be called George dot less

whatever and then you reference the less j/s file which is the thing that you would have gotten from less CSS org which is a JavaScript file that on-the-fly translates the cieth the less file into actual CSS now obviously translating it client-side means that

every time somebody wants to go and gets to a new page it's got to go through this translation at that time so in production what you really want to do is do it server-side so that you create your less files you pre process them it gives you the output

of that is to give you a CSS file and then you just use that CSS file just like you use any CSS file you just use that in your excuse me in your index dot PHP file so you you don't even have less showing in your program at all those are just source files

that you keep in order to create your CSS file that you use so there are actually a number of different processors that you can use and a number of different workflows that you can use one of them they actually have a PHP version that you can have they've

got one from nodejs this is a real common one that I'll go through and this is what I'll actually be using in this demonstration but if you have a Mac they've got code code kit that lets you set it up so that whenever you change one of your CSS

files it automatically in the background I'm sorry whenever you change one of your less files it automatically in the background does the pre-processing for you and creates the CSS files so what you would do if you want to get this compiler down is the

first thing you do is you need to install nodejs and you get that from going to node.js org and downloading from there once you've installed that you need to install less and for that you need to go to your command prompt whether that's you know in

terminal or in the command prompt on the on the windows machine and you have to do this at a level where you have the permission so if you're doing anything this Linux based like the Mac you know you need to sudo it in there and the NPM is an installer

that node uses other things use too but it comes with node that it will actually go out and get what it is from online and bring it in and do the install for you so if you do the sudo says I'm doing this as the administrator the NPM will then do install

- G means it's going to go globally and then less and it'll go out and it'll grab the less for you and install it then what you need to do is when you have some less files you obviously I guess a step to a as you create some less files and do some

[ ... ]

Nota: se han omitido las otras 3.098 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.