Day 53: In The Mix!


One of the most powerful features of SCSS is mixins. I mentioned in my last post that CSS preprocessors give writing CSS more of a programming feel and mixins in SCSS are a prime example of that. A prevalent concept in modern programming languages is Don’t repeat yourself (DRY) and mixins are a great way to properly handle code that has to be used in many parts of a project. Mixins are blocks of reusable CSS declarations that can be used though out a project.

Creating and using mixins is a simple process. Mixins are declared by using the @mixin directive, followed by the name of the mixin, and the reusable code is input within curly braces. To use a mixin, one must simply add the @include directive followed by the mixin name to the desired selector and the code defined in the mixin will be included when the SCSS is compiled to CSS. The next level use and creation of mixins is a bit more complex.

Mixins can be used with with more complex programming concepts. For example, arguments can be passed though mixins and default values can be defined for parameters. Conditional statements can also be used with mixins. A mixin can become as complex as the engineer(s) need them to be.

Until next time!


Day 52: Sassy!


In the world of Front-End Development , use of a CSS preprocessor is of massive import. Today, there are many CSS preprocessors available for teams and engineers alike to use, such as LESS, Sass, SCSS, and Stylus. It is very common for Front-End Development frameworks, such as Bootstrap and Foundation, to be built using a CSS preprocessor. Preprocessors empower designers and programmers to optimize their CSS utilization by systemizing the process. The benefits of using a CSS preprocessor are many and they are definitely here to stay.

Preprocessors are very beneficial. While many will argue that creating CSS is not technically programming, using a CSS preprocessor gives creating stylesheets a programming feel. In almost all preprocessors selectors can be nested, extending the rules from parent selectors to their children. Reusable variables are also common in preprocessors, which allow for code to be more modular and readable. Like many programming languages, developers can utilize many built-in functions and, if they need a custom solution, create functions of their own. Once the code is processed into CSS, the resulting stylesheet is standardized and easy to read. Above all, CSS preprocessors are more programmer friendly than standard stylesheets.

In my own studies, I have decided to make SCSS my preprocessor of choice. In my opinion, SCSS has syntax more similar to vanilla Javascript, which I really like. Using SCSS has helped me be more efficient writing CSS. I really enjoy using partials, which make my code so much more organized, especially when stylesheets become really long. I also like that pure CSS is valid SCSS, so if I’m in a crunch I can find a way to solve an issue in CSS and it won’t break the rest of my code. I look forward to continue mastering SCSS!

Until next time!


Day 39: Cascade!


CSS, or Cascading Style Sheets, were invented to improve the presentation of the World Wide Web by Håkon Wium Lie. With CSS, Web Developers can add animations, manipulate text, use an image as a background, and much more. The possibilities with CSS are almost boundless. The end product really just depends on the preferences of the Designer/Developer.

There are many ways to invoke CSS. Within html documents, CSS rule-sets can be invoked inline, by using the style element. External style sheets can be invoked by using the @import rule, within the style element. The most common application of CSS is through external style sheets using the link element. CSS can be used with multiple style sheets and a mix of all the aforementioned methods, hence “Cascading” in the name. It uses a weight system to determine which rules to use.


Rule-sets, in CSS, are composed of selectors, properties, and their respective values. Selectors reference the html element to be modified. Properties declare the characteristic of the selector is to be changed. The values define how the property is modified.

I have used CSS for a long time, but it wasn’t until recently that I decided to fill in the gaps of my knowledge. In my pursuit of one day being a 10x Engineer, I have really enjoyed using shorthand CSS properties. There is so much to learn with CSS and I’m excited to continue learning about it. I’ll be getting into SASS and advanced CSS in future post!

Until next time!