Sass - Dont Repeat Your CSS

Install the Sass CLI on macOS via Ruby with gem install sass or via Node with npm global install, then use sass --watch to auto-rebuild CSS from SCSS.

Install and configure Visual Studio Code and the live server extension to enable automatic CSS updates from sass, watch sass changes, and auto-refresh the browser during development.

Code along with me to learn Sass fundamentals, explore module folders, use the staff and finished examples, run the Sass preprocessor, and preview live changes with a live server.

Explore sass fundamentals by applying nesting rules to define a hierarchy, using import directives, comments, variables, mixins, and inheritance to organize and reuse styles.

Master nesting selectors in Sass to structure styles, using the ampersand for parent references, and apply hover and active states in nested nav, nav item, and nav link.

Discover how sass variables prevent repetition by defining global and scoped values, using defaults, and handling colors, numbers, strings, booleans, lists, and maps.

Explore css variables, aka custom properties, and how global and scoped declarations enable values via var(), with guidance on when to prefer sass variables for cross-browser compatibility.

Learn how SAS uses two types of comments—multi-line and single-line—and how to preserve multilayered notes with an exclamation point, while noting effects on generated CSF and compression.

Organize your styles with Sass imports and partials to keep files readable. Manage imports with a manifest and mindful ordering to avoid conflicts.

Create reusable Sass mixins to encapsulate common button and alert styles, then include them in components with @include and optional arguments for border size and color.

Learn to use Sass mixins to avoid repeating code, apply media queries for responsive font sizes, and leverage the content directive to insert shared styles with precision.

Explore how to avoid repeating styles in Sass by using extend and inheritance to share properties across selectors, and compare mixins versus extend, including placeholders.

Explore equality, inequality, boolean, numeric, and string operations in Sass, including arithmetic with addition, subtraction, multiplication, division, and modulo, plus color and string interpolation.

master sass techniques to avoid repeating css by using nesting with ampersand, variables, and mixins; manage comments, imports, content and extend directives, and basic operations.

Explore the basics of Sass, mastering control flow with if, else, for, while, and each loops, and organize data with maps and lists to avoid repeating CSS.

Master sass conditional directives like @if, @else if, and @else to adjust styles based on background color lightness, using variables and mixins to set text color automatically.

Learn how to control flow with the Sass for directive, iterating from 1 to 6, accessing list items with i, and adjusting each item’s opacity by 0.1 using string interpolation.

Learn how sass @while loop controls flow by counting from a starting value to a condition with increment or decrement, mirroring for loop and applying to lists to adjust opacity.

Learn lists in sass by creating a list of colors or images, using length and nth to access items (1-based indexing), then loop to apply each background image.

Learn to build and access color palettes with Sass maps, using numeric keys to define shade levels, and apply the get function, nested maps, and each iteration to style elements.

Master how to use the Sass @each directive to iterate over maps, access keys and values, interpolate selectors, and apply dynamic backgrounds to articles.

Master sass conditional directives like if, else, and else if within mixes to control properties, then use loops for and while, plus lists and maps, and create custom sass functions.

discover SAS built-in and custom functions, test function calls, explore selector and introspection functions, and examine a real example that retrieves by key.

Explore Sass built-in functions across color, list, map, and selector utilities, with hands-on examples of color mixing, lightness, transparency, variable checks, indexing, and type checks.

Define your own Sass functions to return a single value, learn the difference from mixins, pass arguments (with defaults), and call functions to retrieve colors from a map.

Discover how to use built-in sass functions, create and call custom functions with the function directive, define arguments, and check for global variables to build reusable, non-redundant styles.

Explore Sass fundamentals, from variables, selectors, and control flow to loops, maps, and functions. Learn to organize code with partials, manifests, imports, mixins, and inheritance, plus color functions.