What are CSS and Sass?

What Are CSS And Sass?

CSS which stands for Cascading Style Sheets, is used to define styles used on a webpage. This includes the Design, Layout, Fonts, Colors, Margins, Height, Width, Background Images and Variations in Display for different screen sizes and devices. CSS saves Web Developers lots of time! CSS code is saved on either an external .’css’ file or in the HTML code. This means all that is needed to add styles to the site, is to add one line of code in the head of your HTML file which links the CSS file to your code.

Sass is a CSS extension language that compiles back into plain CSS.

CSS with Superpowers! – Hampton Caitlin

As Stylesheets are getting larger and more complex, a pre-processor such as Sass will help. Sass allows you to use lots of features that don’t exist in CSS such as Variables, Mixins, Nesting and Inheritance. Once you have finished writing in Sass, it will take your pre-processed Sass file and save it as a normal CSS file so that it can be used and read by your website. This is because most major browsers can understand CSS, but cannot understand Sass (Sass is for the Developers, CSS is for the browsers).

 

Cascade

CSS, i.e Cascading Style Sheets, are Style Sheets in a Cascade. This means CSS follows this to apply styles to the code:

1. Importance – The !important rule is the way to override all the previous styles in the cascade. This should only be used in rare cases though.

2. Specificity – In CSS, you can use an ID, Class or Element Selectors to style an element. Out of the three selectors, ID Selectors would ‘win’ and apply the style to the element.

3. Source Order – This means the order of the CSS Styles matter, as the CSS will be read from top to bottom. If you had:

h1{ color: red; }
h1{ color: blue; }

The H1, would display blue, as this was written after it was asked to be red, therefore further down the cascade.

 

Brief History

CSS was first introduced in 1994 and was developed by Håkon Wium Lie. As HTML grew, developers were requiring more control over the styles of their webpages, which is where CSS stepped in. CSS allows the developer to add Classes and ID’s to HTML Elements. These classes and ID’s can then be referenced in the within the CSS Styles, and any element with that Class or ID, will have them styles applied.

Sass was first introduced in 2006 and was designed by Hampton Caitlin. As HTML and Webpages were expanding and developing even more, Hampton Caitlin decided to create a CSS Extension Language called Sass to ‘keep up’. Sass allows a developer to use Mixins and Nesting (explained further down).

 

Is it best to use an External CSS File?

By using an external CSS Style Sheet instead of typing the styles within the HTML markup, you can change the entire look of the site by only editing the external CSS file. It makes the HTML have less markup and makes it look a lot tidier and easier to read, and allows the CSS File to referenced and used by as many pages as you we want, even though there is only one file.

 

What are Mixins and Nesting in Sass?

Both Mixins and Nesting save you Time, Space and Markup in your code. Here is what they are:

Mixins are bits of code that can be placed at the top of the Sass document. It can be used if you are repeating the same code multiple times. Mixing look like this: @mixin roundy { background: blue; color: white; } . When this code is placed at the top of the document, whenever you want to use these particular style settings, all you have to put into the code is @include roundy; . E.g. .button { include roundy; }  . This will then turn the Background of the Button Blue, and the Text Colour White.
Nesting has the same theory as Mixins but is different. It can be used when code is being repeated multiple times. Nesting looks like this: p { color: red; a { color: blue; }} . This piece of Sass code targets all the ‘a’ tags that are inside (direct child of) ‘p’ tags. So any ‘a’ tags in the ‘p’ tag will be blue.

 

Closing Thoughts

CSS and Sass are crucial components to webpages in today day and age. Without them sites would look plain and boring. With all the resources online such as Treehouse, Codecademy and W3 Schools, you can be up and running with CSS and Sass in no-time! I reccomend learning CSS first though, as Sass is an extension of CSS!