What is SASS and LESS

HTML & CSS
1

Hi, I checked your already asked questions but they all seem to be about SASS vs LESS or problems using them. My Problem is - what are they?

I am used to using CSS but really do not understand where SASS and LESS fit into the picture. I keep seeing articles about pre-compilers and I understand Bootstrap uses SASS or LESS but I only see CSS and JS files but then I see some .map files that seem to be linked in some way to CSS or SASS or LESS but then I read that .map files are used in JS.

I am totally confused, having just sorted CSS - there are now all these new considerations.

Thanks guys

Can someone please help me to understand how these technologies fit into web design

2

I am not an expert… And I know just common facts.

SASS and LESS are attempts to create CSS in OOP style: with composition, hierrachy, variables and functions.

Out of my expirience, around 10% of projects using it. Sad but true.

3

OK, so if I am using Bootstrap with Bootstrap.min.css - am I using a CSS file, a SASS file or a LESS file, how do I tell. Does SASS or LESS create a CSS file - do they have different extensions, still confused.

4

Without getting into too much detail Sass/less are pre-processors that can facilitate the building of your css files in certain ways. They allow variables, nested code, loops & conditionals (similar to js) and other functions that you can’t do automatically in css.

At the end of the day they compile into pure CSS as that’s all a browser understands. That’s why they are called a pre processor as you can process all your fancy variables and loops in this pre-process state but once it gets complied it’s just pure css.

Big frameworks and large projects love the flexibility pre-processors can give and although I have worked with them I am not a big fan but can see the advantages in some cases.

It’s good to have knowledge of them if you are working in a team or on a large project and there are plenty of tutorials around that you can take and would be a worthwhile venture even if you decide to stick with plain old css. :slight_smile:

The map files (as used in bootstrap) are a way to keep track of where the files originally came from before they were all compiled.

3 Likes
5

So if I am using Bootstrap CSS files and JS files I do not need the .map files ? Why would I use variables, loops and conditions if I am going to compile into pure CSS, surely I would lose all the loops, variables and conditions ?

6

Yes that is a normal (but minified) css file as you can see from the .css extension. That is what you would get after you have compiled your LESS/SASS etc.

You can’t just use Sass or Less you have to install a number of applications in order to use them. They won’t work unless the code is interpreted and compiled into normal css. It’s the normal css that is then output (or used) in your browser.

Imagine you had a 100 or more CSS rules for say something like every country flag in the world.

You could use a loop in your preprocessor to output the css in a single function.

e.g.

$images: 100;

@for $i from 1 through $images {
  .image-#{$i} {
    background: url(image-#{$i}.jpg);
  }
}

Then when you compile that you get this.

image-1 {
  background: url(image-1.jpg);
}

.image-2 {
  background: url(image-2.jpg);
}

.image-3 {
  background: url(image-3.jpg);
}

.image-4 {
  background: url(image-4.jpg);
}

.image-5 {
  background: url(image-5.jpg);
}

.image-6 {
  background: url(image-6.jpg);
}

.image-7 {
  background: url(image-7.jpg);
}

.image-8 {
  background: url(image-8.jpg);
}

.image-9 {
  background: url(image-9.jpg);
}

.image-10 {
  background: url(image-10.jpg);
}

.image-11 {
  background: url(image-11.jpg);
}

.image-12 {
  background: url(image-12.jpg);
}

.image-13 {
  background: url(image-13.jpg);
}

.image-14 {
  background: url(image-14.jpg);
}

.image-15 {
  background: url(image-15.jpg);
}

.image-16 {
  background: url(image-16.jpg);
}

.image-17 {
  background: url(image-17.jpg);
}

.image-18 {
  background: url(image-18.jpg);
}

.image-19 {
  background: url(image-19.jpg);
}

.image-20 {
  background: url(image-20.jpg);
}

.image-21 {
  background: url(image-21.jpg);
}

.image-22 {
  background: url(image-22.jpg);
}

.image-23 {
  background: url(image-23.jpg);
}

.image-24 {
  background: url(image-24.jpg);
}

.image-25 {
  background: url(image-25.jpg);
}

.image-26 {
  background: url(image-26.jpg);
}

.image-27 {
  background: url(image-27.jpg);
}

.image-28 {
  background: url(image-28.jpg);
}

.image-29 {
  background: url(image-29.jpg);
}

.image-30 {
  background: url(image-30.jpg);
}

.image-31 {
  background: url(image-31.jpg);
}

.image-32 {
  background: url(image-32.jpg);
}

.image-33 {
  background: url(image-33.jpg);
}

.image-34 {
  background: url(image-34.jpg);
}

.image-35 {
  background: url(image-35.jpg);
}

.image-36 {
  background: url(image-36.jpg);
}

.image-37 {
  background: url(image-37.jpg);
}

.image-38 {
  background: url(image-38.jpg);
}

.image-39 {
  background: url(image-39.jpg);
}

.image-40 {
  background: url(image-40.jpg);
}

.image-41 {
  background: url(image-41.jpg);
}

.image-42 {
  background: url(image-42.jpg);
}

.image-43 {
  background: url(image-43.jpg);
}

.image-44 {
  background: url(image-44.jpg);
}

.image-45 {
  background: url(image-45.jpg);
}

.image-46 {
  background: url(image-46.jpg);
}

.image-47 {
  background: url(image-47.jpg);
}

.image-48 {
  background: url(image-48.jpg);
}

.image-49 {
  background: url(image-49.jpg);
}

.image-50 {
  background: url(image-50.jpg);
}

.image-51 {
  background: url(image-51.jpg);
}

.image-52 {
  background: url(image-52.jpg);
}

.image-53 {
  background: url(image-53.jpg);
}

.image-54 {
  background: url(image-54.jpg);
}

.image-55 {
  background: url(image-55.jpg);
}

.image-56 {
  background: url(image-56.jpg);
}

.image-57 {
  background: url(image-57.jpg);
}

.image-58 {
  background: url(image-58.jpg);
}

.image-59 {
  background: url(image-59.jpg);
}

.image-60 {
  background: url(image-60.jpg);
}

.image-61 {
  background: url(image-61.jpg);
}

.image-62 {
  background: url(image-62.jpg);
}

.image-63 {
  background: url(image-63.jpg);
}

.image-64 {
  background: url(image-64.jpg);
}

.image-65 {
  background: url(image-65.jpg);
}

.image-66 {
  background: url(image-66.jpg);
}

.image-67 {
  background: url(image-67.jpg);
}

.image-68 {
  background: url(image-68.jpg);
}

.image-69 {
  background: url(image-69.jpg);
}

.image-70 {
  background: url(image-70.jpg);
}

.image-71 {
  background: url(image-71.jpg);
}

.image-72 {
  background: url(image-72.jpg);
}

.image-73 {
  background: url(image-73.jpg);
}

.image-74 {
  background: url(image-74.jpg);
}

.image-75 {
  background: url(image-75.jpg);
}

.image-76 {
  background: url(image-76.jpg);
}

.image-77 {
  background: url(image-77.jpg);
}

.image-78 {
  background: url(image-78.jpg);
}

.image-79 {
  background: url(image-79.jpg);
}

.image-80 {
  background: url(image-80.jpg);
}

.image-81 {
  background: url(image-81.jpg);
}

.image-82 {
  background: url(image-82.jpg);
}

.image-83 {
  background: url(image-83.jpg);
}

.image-84 {
  background: url(image-84.jpg);
}

.image-85 {
  background: url(image-85.jpg);
}

.image-86 {
  background: url(image-86.jpg);
}

.image-87 {
  background: url(image-87.jpg);
}

.image-88 {
  background: url(image-88.jpg);
}

.image-89 {
  background: url(image-89.jpg);
}

.image-90 {
  background: url(image-90.jpg);
}

.image-91 {
  background: url(image-91.jpg);
}

.image-92 {
  background: url(image-92.jpg);
}

.image-93 {
  background: url(image-93.jpg);
}

.image-94 {
  background: url(image-94.jpg);
}

.image-95 {
  background: url(image-95.jpg);
}

.image-96 {
  background: url(image-96.jpg);
}

.image-97 {
  background: url(image-97.jpg);
}

.image-98 {
  background: url(image-98.jpg);
}

.image-99 {
  background: url(image-99.jpg);
}

.image-100 {
  background: url(image-100.jpg);
}

If you use codepen you can play around with sass/less etc as it has a built in compiler. You set it up using the gear icon in the css panel. You can then view the compiled css using the down arrow in the css panel.

Here’s the example above (there is no html in this example).

(Edit on codepen to play around with it)

4 Likes
7

GOT IT! Thanks so much!

1 Like
8

Sorry but maybe I am stupid but the last reply tells me it was 6/7 but I cant find 7 my status tells me rkamp made a post but I can only see 6, I cant see theirs. I cant see any more… or next… pr page options - anyone help ? I am obviously missing something !

9

I think you must be confusing threads, @kerry14. There have been no posts deleted from this one, and rpkamp hasn’t posted in this topic.

10

Sorry it was just a like and I noticed that although the latest post is displayed the Post # / Total posts counter on the right only updates when the post is at the very top of the screen, apologies - thanks

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.