Sass CSS Tutorial for beginners

Sass stands for  Syntactically Awesome Stylesheet

File extension for a Sass file is “.scss”,  which stands for Sassy CSS. “.sass” is also a valid extension for Sass with bit concise syntax.  In this article, we will only look at the latest version which is SCSS.

Why Sass?

Sass is a preprocessor that gives you a little better way of writing styles where you can have features such as nesting that are missing from CSS. In nutshell, you can write a sort of object-oriented styles by using Sass. Sass compiler converts “.scss” files to “.css” files. Since you do not need to edit CSS files directly,  you can avoid some of the mess that CSS files may create.

Code Example

[Look at the SCSS example below. Click the SCSS tab to see the SCSS code, and then from the lower-right, click View Compiled. This way, you can toggle between SCSS and compiled CSS]

The following SCSS has an ID called main, and within that there are two nested elements a and h2.  When you click View Compiled, it produces CSS that creates a style for each element. This is a basic example of how SCSS works. You can modify the example and check the result in the Result tab.


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Comments

There is a need for writing Sass specific comments that describes some of the rationals which is called Sass comments. When Sass compiler compiles down to normal CSS, the comments mentioned in Sass do not carryover to CSS.

Sass  comment :   // This is Sass Comment [Note: This is not valid in CSS]

CSS comment :  /* This is CSS Comment with opening and closing */


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Variables

Variables are very useful features of Sass.  For example, you can define a variable for a color and use it for various styles. The advantage is that when you have to replace a color with a new color, you do not need to change the color throughout the style. You only make a change to the variable value. To define a variable, add a prefix $.  See the example below.

$hcolor = red;

h2{

color: $hcolor;

}


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

CSS align elements horizontally center

CSS align elements horizontally center

Let’s understand what we are trying to do here. We want to center an element horizontally within the parent element so that we would have an element placed at an equal distance from either sides.

CSS ALIGN HORIZONTALLY

There are two different ways we can align an element. The option depends on the display property of the element you are trying to place.

  • Center the element by using its own CSS – display:block;
  • Center the element by using parent element’s CSS – display:inline*
    *display:inline, display:inline-block; display-inline-flex;

1) Blocks

css block element
css block element

Elements with “display:block” property are blocks. When no width is specified, blocks occupy the entire width of the parent. In such case, there is no need to center these elements. When the width is specified, blocks would left align, by default.  You can center them by setting the left and right margins left to auto, respectively. In this case, you are adding style to the element and not the parent container. See the example below:

 


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

2) Inline-* elements

css inline element
css inline element

Elements with”display:inline”, “display:inline-block”, and “display:inline-flex”,  property are the inline elements. Since, you have multiple inline elements within the same row, the horizontal centering has to be done from the parent container and not by the element itself. This is done by adding style “text-align:center” to the parent container. See the example below:


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

[contact-form-7 id=”69″ title=”Contact form 1″]

Introduction to css

Introduction to css ( Cascading Stylesheet )

In webpage development, the inline style lines are responsible for formatting HTML elements.

For example in last tutorial we looked at the example Make me italic

[code language=”HTML”]<i>Make me italic</i>[/code]

Here the tag converts its content to Italic font.

Inline Styling

You can also stylize text this way using style attribute:

[code language=”HTML”]<p style=“text-formate:italic”>Make me Italic </i>[/code]

Output: Make me Italic

This works well however, it is usually not good practice to use formatting directly in the HTML file.

For example let’s say you also want the color of the text to be red

[code language=”HTML”]<p style=“text-formate:italic;color:red;”>Make me Italic </p>[/code]

Output: Make me Italic

More styles like making the text bold can be done this way:

[code language=”HTML”]<p style=“text-formate:italic;color:red;font-weight:bold”>Make me Italic </p>[/code]

Output: Make me Italic

It may not be conducive to have that many lines of style written into your HTML. It soon becomes illegible. This is alright if you can manage it, but there are other ways to make this less of an issue.

For example if you have three paragraphs and they all have the same style you can do the following:

[code language=”HTML”]
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 1 </p>
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 2</p>
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 3 </p>
[/code]

As you can see using style the attribute you have to repeat the same style three times. What’s worse is when you have 100 paragraphs where you want to apply the same style. Now, imagine you do all the work by adding the style to each paragraph as above and your boss ask you to change the font from italic to normal. This is where CSS comes to rescue!

Instead of writing inline style for each element move the style to a separate file with extension (.CSS)

intro to css3
html and css link reference

In HTML you can use tag-name or you will have to provide an attribute hook such as “id” or “class” and in the CSS you would refer to the hook to style that element. In the example below you can see the paragraph element has an attribute hook id with value “thisP” and in CSS using that hook you can color the font red. # (Pound sign) is called a css selector for id. In the next post we will discuss css selectors in detail.

HTML file ( Only showing what goes within body tag) :

[code language=”HTML”]
<p id=“thisP”> Using CSS<p>
[/code]

CSS file :

[code language=”CSS”]
#thisP{
color:red;
}
[/code]

Output:
Using CSS

 

 

[embedplusvideo height=”360″ width=”640″ editlink=”http://bit.ly/1qR8jZ6″ standard=”http://www.youtube.com/v/o1GdsNVYDHA?fs=1″ vars=”ytid=o1GdsNVYDHA&width=640&height=360&start=&stop=&rs=w&hd=0&autoplay=1&react=1&chapters=&notes=” id=”ep1903″ /]