CSS vs SCSS
WHAT IS CSS? (Cascading Style Sheet)
- (visual and aural) layout, for a variety of devices
- Language for describing the presentation of Webpage (colors, layout, fonts, borders, sizes, text / element alignment, background styles) and others can be describe within HTML.
- Display in different types of devices [screen size: large screen, small screen] or [viewing device: mobile, desktop, printer]
- Non visual styles: aural text readers, reading speed
HOW CSS WORK?
- CSS Rule.
- CSS selector-tells web browser which HTML element we wish to style.
- property + value. pair together to form a declaration.
- We create complex style rules by stringing together multiple declarations, which are separated by semicolons (;).
WAYS TO USE CSS
- Inline style apply to tag when you want to add
- Within the HTML header apply to the whole page
- External CSS file save outside with CSS file name style.css
WHAT IS SCSS? ( Sassy Cascading Style Sheet)
- Developed on ruby on rails such as variables, inheritance, mixins and nest CSS rules to each other.
- Uses the .scss file extension and is fully compliant with CSS syntax
- *Purpose: DRY (Don’t Repeat Yourself) rule.
- Minimize the amount of CSS code by using @mixin, prevent to rewrite again & again (color/width)
- Easy to change code by using variable sign ($)
- Assembles CSS style sheets for a browser,
- Make writing CSS easier to maintain large style sheet, faster & better to read
- Variables ($) sign
- Nesting (nav)
- Import (@import)
- Partials and imports:Helps you to split your CSS into smaller, more maintainable portions.
- Mixin (@mixin)
Allows you make groups of CSS declarations that you want to reuse throughout your site.
ADVANTAGES OF SCSS: Easier to maintain sites
- Reduce complexity & repetition in the structural content
- Save time
- Page load faster
- Multiple Device Compatibility
- Global web standards