Hit enter to search or ESC to close
software pg

CSS vs SCSS

wtechadmin

WHAT IS CSS? (Cascading Style Sheet)

  1. (visual and aural) layout, for a variety of devices
  2. Language for describing the presentation of Webpage (colors, layout, fonts, borders, sizes, text / element alignment, background styles) and others can be describe within HTML.
  3. Display in different types of devices [screen size: large screen, small screen] or   [viewing device: mobile, desktop, printer]
  4. Non visual styles: aural text readers, reading speed 

HOW CSS WORK?

 

  1. CSS Rule.
  2. CSS selector-tells web browser which HTML element we wish to style.
  3. property + value. pair together to form a declaration.
  4. We create complex style rules by stringing together multiple declarations, which are separated by semicolons (;).

 

 

 


WAYS TO USE CSS

  1. Inline style apply to tag when you want to add
  2. Within the HTML header apply to the whole page
  3. External CSS file save outside with CSS file name style.css


 

WHAT IS SCSS? ( Sassy Cascading Style Sheet)

  1. Developed on ruby on rails such as variables, inheritance, mixins and nest CSS rules to each other.
  2. Uses the .scss file extension and is fully compliant with CSS syntax
  3. *Purpose: DRY (Don’t Repeat Yourself) rule.
  4. Minimize the amount of CSS code by using @mixin, prevent to rewrite again & again (color/width)
  5. Easy to change code by using variable sign ($)
  6. Assembles CSS style sheets for a browser,
  7. 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

 

 

  1. Reduce complexity & repetition in the structural content
  2.  Save time
  3. Page load faster
  4. Multiple Device Compatibility
  5. Global web standards

 

 

 

 


 


Leave a Reply

Your email address will not be published.Required fields are marked *