CSS Pseudo-elements and SASS

CSS Pseudo-elements

I already took the JavaScript and CSS course in the second semester. Even though I learnt about the basic level of CSS from INT222, I didn't know well about the pseudo-elements of CSS. From the last task, my code was improved using pseudo-elements instead of using huge number for margin or padding.

To display the white line between the title and two circle, my code was

but it is changed to this.

fixed huge number on margin-left and top. Also it changed to use before pseudo-element.


:before
-> it can be used to insert some content before the content of an element.

:after
-> it can be used to insert some content after the content of an element.

:first-line / first-letter
-> it is used to add some specific style to the first line / letter of text.

:selection
-> it is to add style which are selected part by user.

More info of pseudo-elements : CSS Pseudo-elements


* !important rule in CSS
-> This rule is used on a CSS declaration, and it can override any declaration in CSS.
It is not recommended rule to use generally, but if specific style / CSS which is overrided by external libraries(Bootstrap) can allow to use !important rule. It can add the same line as CSS. ( padding: 0 !important; ).

References:
!important rule
When using !important is the right choice

Sass (Syntactically Awesome StyleSheets)

* Sass is a scripting language which is interpreted into CSS. This is very useful script to improve CSS by using many function in Sass. There are two types of syntaxes in Sass. The first one is Scss which is extension of CSS. So, CSS can be worked the same meaning in SCSS stylesheet. Also SCSS understands the most CSS hacks and vendor-specific syntax. Another one is Sass which provides a more concise way of CSS writing. It uses indentation rather than brackets for nesting of selectors or classes. The indented syntax has all the same features.


References :  

SASS Style Guide
SASS Reference