bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/CSS/Advanced Styling
CSS•Advanced Styling

Sass Tutorial

Learn Sass

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result.

Sass Example

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use the variables */
body {
 background-color: $bgcolor;
 color: $textcolor;
 font-size: $fontsize;
}

Previous

CSS Rounded Corners

Next

CSS Border Images

This chapter

Overview
53

Lessons

154m

Read time

1. CSS Rounded Corners2. Sass Tutorial3. CSS Border Images4. CSS Multiple Backgrounds5. CSS Background Size6. CSS Background Origin7. CSS Background Clip8. CSS Colors9. CSS Color Keywords10. CSS Gradients11. CSS Radial Gradients12. CSS Conic Gradients13. CSS Shadow Effects14. CSS Box Shadow15. CSS Text Effects16. CSS Custom Fonts17. CSS 2D Transforms18. CSS 2D Transform Scale19. CSS 2D Transform Skew / Matrix20. CSS 3D Transforms21. CSS Transitions22. CSS Transition Timing23. CSS Animations24. CSS Animation Timing25. CSS Animation Properties26. CSS Tooltip27. CSS Tooltip Arrows28. CSS Styling Images29. CSS Image Effects30. CSS Image Hover Overlays31. CSS Responsive Modal Images32. CSS Centering Images33. CSS Image Filter Effects34. CSS Image Shapes35. CSS object-fit Property36. CSS object-position Property37. CSS Masking38. CSS Gradient Mask Layers39. CSS SVG Mask Layers40. CSS Styling Buttons41. CSS Button Hover Effects42. CSS Button Groups43. CSS Pagination Styles44. CSS Multiple Columns45. CSS Column Rules46. CSS User Interface47. CSS Variables - var() Function48. CSS Overriding Variables49. CSS Variables and JavaScript50. CSS Variables in Media Queries51. CSS @property Rule52. CSS Box Sizing53. CSS Media Queries

On this page

Learn SassSass Example