Importance of Sass and Less??

What are the uses of Sass & Less and why are they better than regular ol' css?

 

No, they aren't. And the same goes for all other HTML and CSS frameworks. Having to use them implies two things: either your employer is an ignorant fool (yes, I am well aware of the fact that employers often impose bad methods to developers), or you're doing something terribly wrong.

Take that LESS garbage for instance.

As you might have noticed, they have a CSS variable system. This is the example they give to demonstrate:

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

Code (markup):

With normal CSS, all it would take do achieve the above effect would be this:

#header, h2 {
color:#4D926F;
}

Code (markup):

See how needlessly bloated it is?
When someone says that variables make one write less css (NOT their stupid slogan), I say: ever heard of inheritance? Thought so...

They also have what they call nested rules. But wait: shouldn't they rename their framework to MORE SS then? It makes you write MORE and the word cascading is not applicable anymore. Darn, again those nazi scumbags...

 

CSS Preprocessors are Awesome particularly Sass it is more advanced and dynamic way to write your regular css, i didn't like it the first time, but now i love it, not everyone need it but for advanced and complex css use its very handy.
Its not a garbage, you either haven't given it enough time to try it out, or you just a css newbie is this case Sass is not for you.

OP, Google will be more helpful to you. https://www.google.com/#q=should+we+use+css+preprocessors

 

The former is partially true, but only because I loathe markup frameworks. Framework of a framework of another framework, how cool is that? But don't get me wrong, I don't recommend assembly or machine languages either -- it's just way too much "simplifying".
As for the latter, you couldn't be further from the truth.

From my experience, even some of those fancy selectors are useless when you enhance your properly written semantic markup with styles. Complicated CSS almost always implies presentational markup, DIV for nothing and fixed layout. For instance, try to find a "pure CSS dropdown menu" on themeForest without ">". I highly doubt you'll succeed.
Cool, so why don't we make even more bloated and needlessly complex?! SASS and LESS are great -- NOT.

 

Wiicker has it right, those steaming piles of manure serve little if any legitimate purpose, and if you find them of actual use -- as Wiicker95 just said, it means you probably don't know enough about CSS -- inheritance in particular -- to even be making websites in the first place!

They are at best a sleazy shortcut, and worst make more work and fat bloated garbage code... generally speaking they seem crafted entirely to sweep ineptitude and ignorance under the rug, which is why (much like every other web framework) I've NEVER seen ANYTHING built with them that was worth a flying purple fish and didn't reek of "I can haz intarnets?" developers who, as I say all the time need to call an dentist to handle the extraction of their noggin from 1997's rear end... because that's how far up they've managed to shove it.

 

Hmm, you are looking at this very one-sided in my opinion.
It IS a shortcut, yes. Is that a bad thing?
Concider the following;

.button (@colour){
    font-size: 4.5em;
    color: @colour;
    ....
}

#mainButton{
      .button (@colour)
     /* insert other properties here */
}

#contactButton{
      .button (@colour)
      /* insert other properties here */
}

.sideButton{
      .button (@colour)
      /* insert other properties here */
}

Code (markup):

Obviously the '@colour' is just an example, but it illustrates what you can do with it.

You can of course give all your buttons that you wish to have these properties the button-class, but then you are filling up your html code rather quick, this way, you can save all of it for your css. Some may concider this a benefit, I don't know if I should like it or not, but I understand that it could have its use.
For complex sites, don't you agree that this could have its purpose?

 

@profoundDmd, see, that's where pairing selectors comes in:

#mainButton,
#contactButton,
.sideButton { /* values shared in COMMON */
    font-size: 4.5em;
    color: #800;
}
 
#mainButton{
	/* UNIQUE values here */
}
 
#contactButton{
	/* UNIQUE values here */
}
 
.sideButton{
	/* UNIQUE values here */
}

Code (markup):

Even IF those 'variables' were useful, if you have enough CSS to 'make' it useful there's probably something horrifically and terrifyingly wrong with your CSS... But that's probably because I say if you 'need' more than 48k of CSS for an entire site, you're doing it all wrong. Hell, an entire forum skin has NO excuse for more than that apart from developer ineptitude, a failure to grasp how to use selectors, failure to grasp how to use inheritance, etc, etc... Lands sake if the base template not counting page unique stuff takes more than 16k, you're a ***** MORON! Same goes if your markup to content ratio exceeds 3:1... and typically that's what the re-re's who find idiotic bull like LESS or SASS tend to be vomiting up!

Of course that's why I consider people who use CSS frameworks to be drooling re-re's, since they are well past those numbers before they've even added any of their own code to those train wrecks. They use more code, more complex code, more steps, have to learn something else on top of the already complex specification, and then call it EASIER? <carlin>BULLSHIT!</carlin> High quality bullshit...

It's just an extra pointless step that much like a lot of other goofy tricks people pull like stripping whitespace, seems to exist more to sweep developer ineptitude under the rug than to actually write better code!

 

Oh wait, you have that stupid nested selector thing going on... I just find that confusing as hell and stupid if you're leveraging semantic markup and understand selectors. I'd bad enough trying to keep that mess straight with media queries without adding it everywhere else.

Spaghetti CSS?

 

Which is your opinion, which doesn't make it right
You are also falsely assuming everyone knows html & css (or should) as well as you (assuming of course you are fluent in those languages^^). You are using your knowledge as the norm, that's like Einstein would say that everyone is stupid because they don't know all the mathematical formules as well as he does. And no, developing a website isn't rocket science, but is it really that big a deal that some people haven't learned everything about webdevelopment?

Even if it's because a developers 'ineptitude', so what, who cares. If his css is 96k, it'll still download fast enough so the user won't notice that it's twice your maximum size. At least not in this day and age, maybe 10 years ago, yes. So long as the site is consistent, bug free and everything is easily downloadable, I don't see any problems.

Although that being said, I also very much agree with you!
And I still make mistakes, alot, but the more websites I make, the better I will be at it. And if I make some errors in the process, so be it. There's nothing wrong with not being perfect

 

Don't fool yourself. Sass, Less and other 'helpers' can only slow your development. I am reminded of my first paid site. It was an E-commerce site for a friend, because I knew all about computers and stuff. Hah! He gave me his copy of Dreamweaver to use. A little study was all it took to realize I could learn the finer points of HTML faster than DWs UI. Likewise years later when I looked at Sass or Less or another of their ilk; it was easier to simply use css as it was designed. Don't even get me started on the stupidity that is the grid system.

Size does matter. Yeah, most people have high speed access (but not all). The issue is not completely about bandwidth. You have to consider the number of gets. A while back I needed to download ~25,000 files of data averaging ~1mB each (from a few hundred bytes to tens of mBytes). Actual download times totaled a little less than four hours. Latency (time spent waiting for gets to be answered) amounted to just under sixteen hours. Most of that was spent negotiating through nine machines in my ISP's server farm before it could hit the open road. An oversized web page tends to have a large number of files associated with it. GETs take time.

Do yourself a favor and start now to aim at best practice coding. Drop the crutches and walk.

cheers,

gary

 

Don't get me wrong, I surely am!
I just also like to play with new technologies

Even if LESS isn't useable in its current form, who knows what will happen in a few years, making it a robust and realiable tool!

 

... and yet, if it's "not an issue" why do people whitespace compress, have the server use modDeflate to send files gzipped, and tools like ySlow and Google pagespeed even EXIST? (as flawed as they are).

Extra crap like scripts for nothing increases the number of handshakes, people splitting CSS across multiple files for nothing increasing the number of handshakes -- until suddenly it's taking a minute here to load the resulting monstrosity even when I'm now on a 30mbps connect. I'm not rocking 30mbps/5mbps to have it behave like 33.6k dialup!

Of course, you always get the "everyone has broadband now" or "it'll download fast enough" asshattery -- forgetting that at the same time as using the web people are watching netflix, kids are playing WoW or Neverwinter in the other room, while someone else is using skype to talk to a friend in Japan... and that's just at home! From the office where 30 people are sharing a 30mbps connect, to the folks at Starbucks or Panera Bread sharing a 5mbps connect... To the folks up the road from me at the retirement home sharing a 768kbps DSL connection!

... and that's without even TALKING mobile with it's restricted RAM, even more restricted data plans... and of course talking about Data plans, how about our friends in Canada or Australia with metered data plans with a cutoff?

... and that's without even TALKING hosting, where the bytes add up fast... very fast. More so for folks who can't afford much in the way of hosting; you know, the types who go "what do you mean I can't have more than 30 users on my forums at once with Xenforo on shared hosting without getting kicked off the server?"

Letting people sleaze out stuff any old way without at least telling them they are doing so only promotes ignorance... and there's enough of that out there for the sleazeball predators like the PSD Jockeys who call themselves "designers" but don't actually know shit about shit, the outright scam artist bullshit that has turned SEO into a cottage industry, and the cons who sleaze together off the shelf parts to charge thousands of dollars on as little effort as possible... Basically people who don't know enough about HTML, CSS, or accessibility to be flapping their gums on the subject of web development!

Though really what burns me most about these tools and frameworks and other garbage is they make it more complicated, adds more to the giant heap of stuff you have to learn, often result in more code... but people say "It's so easy!" -- ON WHAT SMEGGING PLANET?!?

But then I remember the lesson I was taught 35 years ago when I started out hand assembling RCA 1802 machine language and entering it 8 bits at a time on toggle switches: The less code you use, the less there is to break! I swear today it's like most developers seem to want to go back to being paid by the K-Loc like the worst of the late '70's early '80's mainframe scumbag scammers. Who were as responsible for the death of big iron as the suits who saw microcomputers as pathetic toys that would never amount to anything.

A lesson truly lost on the pathetic fools who see merit in LESS, SASS, jQuery, MooTools YUI, BluePrint, HTML 5, and all the other outright halfwit bull that does nothing more than let them shove their heads further up the 1990's backside... to the point their shoelaces are tickling the tonsils!

 

Lmao, your posts are a pleasure to read, really!

I didn't exactly say it "wasn't an issue", I merely implied you are exaggerating^^
Of course you have to reduce http-requests as much as possible, but people who live in the middle of frikking nowhere aren't gonna have a good time on ANY site, even if it's optimised. I bet you can optimize 99% of all the websites out there anyway....

The only valid point here imo is mobile. For mobile it indeed is recommended to try and cut those kb's down. No matter how small. But even that is a matter of time. In a few years, that won't be an issue anymore. Unless of course the frameworks increase in size as well

And you don't like jquery?! Oh boy, you sure hang on to your oldschool ways of development (not saying it's better or worse though).
The minified version is about 33kb (+ it's even smaller if you use a customised build), and you probably think that's alot, but honestly, is it? Is it really that much effort to download another 33kb. If your site is running slow because of 33kb, I would say jquery isn't the main problem. And the benefits are imo huge. Or at least, they COULD be.

At my previous work I was a java developer, although I did some webdev as well. If clients asked us to make a slider for example. We could start from scratch to make a cross-browser, responsive, bug free slider to fit our needs. Or we could use jquery and be done with it in a matter of hours. Would it be better to build one of our own? Sure! But it would/could take weeks, and that is a luxery that alot of companies don't have, they fight tight deadlines daily and because of that jquery comes in handy at times. So yes, sometimes jquery IS easy.

And of course there is alot of misuse, hell, even I use jquery for doing small things that I could do with plain css3 (although that's mainly because I still have to take a good look at all of the new possibilites). Afaik, css3 still isn't fully cross-browser.......or is it?

And just like you say "if it's not an issue why do people whitespace compress, have the server use modDeflate to send files gzipped, and tools like ySlow and Google pagespeed even EXIST?".
I can say if LESS, SASS, jQuery, MooTools YUI, BluePrint, HTML 5,... don't offer any benefits, why do they even exist?

 

Funny thing is to me, it's not oldschool COMPARED to most of what I cite as rubbish, because most of what I cite as rubbish ignores all the improvements of the past fifteen years for "gee ain't it neat" bull that quite often has no blasted business on a website in the first place!

Half... well, more like two-fifths my ideal template size (that's HTML+CSS+SCRIPTS+IMAGES) before you even have the page DOING anything? Yeah, that's a lot.

Another handshake you don't need, wasted bandwidth -- yeah, it's not worth it for what it provides.

It's not so much that 33k, as it is what's running on top of it, the extra overhead it creates, the needlessly pointlessly cryptic code it makes, and to be brutally frank that 99% of what people do with jQuery falls into three categories -- doing CSS' job, could be written smaller without jQuery, or - as I already mentioned - has no malfing business on a website in the first place. I've never seen a website that used jQuery where it wasn't the equivalent of walking through a pile and tracking it all over the website's carpets.

Ok, type of crap that doesn't belong on a website, go on...
Only half joking on that. Not a fan -- but there's a lot of things people do in forms that leaves me screaming at the screen "OH for **** sake just let me type it in!"

HOURS? It's a slider?!? Half hour at most if you actually know HTML, CSS and Javascript (should be more like ten minutes). Have the input with a class in the DOM (as your scripting off fallback), during your processing stage attach via class, put a div next to it, put a div inside it (in both cases using the dom), add 'mousedown', 'mouseout','mouseup' event triggers, pull minimum and maximum values from the input's class, scale it to the DIV's width... done.

WEEKS?!? Whiskey tango foxtrot!!!

A LOT of misuse -- when people see nothing wrong with a page that has 1.5k of plaintext and a half dozen content images having 80k of markup, 200k of scripting in 8 separate files, and a megabyte of javascript in dozens of files... misuse, that's a understatement. It's why it's a laugh when you have people in that boat come to forums like this one, ask "Why is my site slow", you actually *SHOCK* tell them, and they get their panties in a wad. Then some jackass will come along telling them to do everything except cut it down -- because when something is fat, bloated and slow, adding more steps to working on it and more code to the final process is always the answer -- NOT!

It is sufficiently cross browser for what WORKS... IE9 you lose goofy animations -- OH WELL! IE8/lower you lose shadows and rounded corners, OH WELL! Right now I support IE6 more than most developers, I even check the page is usable in IE 5.5 just for laughs -- generally speaking my design and development choices allow me to do that out of the box because I practice progressive enhancement of semantic markup, keeping in mind things like the unwritten rule of javascript -- that way the page gracefully degrades when the fancy **** isn't available. Users of legacy browsers should be thankful any of us think of them at all -- but unlike a lot of developers I draw the line at "does it work" on IE8/lower, instead of "OMFG it HAS to look identical!". That's not what HTML and CSS are for, and the sooner people realize it the better!

In case you never heard of it, the unwritten rule of Javascript is that your page should work and be 100% usable and useful to visitors before you even THINK about adding a single line of scripting to it. If you can't do that, you have no business adding javascript to it! ... and really the same should go for your CSS!

Ignorance, apathy and wishful thinking? Though to be fair, I do say the same thing about whitespace compression. Extra step, and usually used to sweep garbage coding under the rug.

Though in HTML 5's case, most of it is the W3C shrugging it's shoulders and saying "nobody is using any of the advances of the past decade and a half, so fine, let's just go ahead and let people sleaze everything out 1997 style, add a whole bunch of extra pointless wrappers and call them semantic, and even enhance developers ability to not even bother writing code properly!"

Of course, what can one expect when a specification about writing websites is written for people making browsers instead of people making websites... Herpafreakingderp. There's a reason I call HTML 5 the new HTML 3.2 -- it quite literally undoes all the progress and clarity of STRICT. Out of the whole thing the only two things I like are MANIFEST and... uhm... well there's... uhm... ok, MANIFEST.

 

At work (Fantasy League) we have a bespoke system written in C# and we create pretty much the same games for our clients (William Hill, BBC, Marie Curie, Football League). SASS comes into it's own for producing very similar style sheets where only colours, fonts etc are changed rather then structure. Using the variables allows us to make global changes to the template with only modifying one file.

I don't use SASS for a single website as that's creating more work for myself when just starting out with a boiler plate makes much more sense.

Edit: Also @deathshadow lacks empathy, so don't take it personally his a purist.

 

I can't really see any, personally. If your CSS is sensible, logical and using "semantic" class/ID names (have a search in Google about what is/isn't semantic) then it is simple to amend without needing to use a framework. The problem with frameworks is they stop someone learning a skill properly (whether it is CSS, PHP or whatever else), understanding their mistakes and improving. In the beginning, your code will be bloated, but later on it will get smaller, more refined.

I know I still have things to learn (and always will). I feel that using a framework would be a step backwards, I would stop learning.

Also keep in mind that with frameworks development might eventually cease, or if there is a bug with it you need to wait for the next update and similar stuff like that.

My suggestion is keep your own library of default templates, code snippets, etc. Write once, use again later. (And surely overtime improve.)

 

I figured as much

 

Exactly! If you need to do something a second time, automate it or build a library. I am not averse to jQuery, except that while it is easy for tyros to use, it requires some degree of expertise to break out the functions you need for your purpose, and create your own built to purpose library. Otherwise you're filling a baggage cart with unnecessary and obfuscating code.

Worst case I've had to dig into was a site that had a huge jQuery file with several functions and gawd knows how many opaquely named variables to do the job of nine lines of code. Maybe a few less, but I'm not a master programmer.

cheers, and say hello to Tux,

gary