AtoZ CSS

Sass mixins enables block of code to be reused with slight variations. They take the form @mixin uppercase-letter-spacing { letter-spacing: 2px; text-transform: uppercase; } And then are used by calling @include within the body of a style rule. Mixins can have parameters (arguments) passed to them which is what makes them very flexible. It’s also possible to call a mixin and pass a whole block of CSS via the @content directive. Check out the video for a recap on how mixins work and then a round up of some particularly useful examples.

In this video we'll be diving into two more command line tools that can help you compile Sass. They both do a lot more than just compile Sass so they're definitely worth looking in to. But for the purposes of keeping this video short and to the point, we'll just focus on the Sass side of things. Grunt and Gulp are both JavaScript powered build tools. They can be used to compile Sass, start local servers, run linters, automatically add vendor prefixes, inline CSS and much, much more! While both tools do similar things, they work in very different ways behind the scenes. Grunt uses a declarative approach to configuring tasks (for things like compiling CSS). A Gruntfile.js contains a large configuration object that specifies the options for each task - things like where to find the imput Sass files, where to output the compiled CSS and what output style should be used. Gulp uses “streams” and it’s configuration style may look familiar if you work with jQuery code a lot. I’ve used both but now favour Gulp for compiling my Sass predominantly because it uses Node Sass behind the scenes which runs incredibly fast, cutting down development time significantly.

Functions are a core concept in many programming languages but creating our own custom functions isn't something we can use in normal CSS. However, Sass brings the power of programming to the table and does allow us to create custom functions for performing common tasks. In this episode you'll learn what functions can do and why they're useful, how to create and use your own custom functions in Sass and examples of functions in the real world

Mixins are a way of creating flexible, reusable chunks of code. Another Sass feature which seems to work in a similar way is the @extend directive. In this episode we'll learn all about extends and how they're different to mixins, how to create and extend placeholder selectors and about some of the pros and cons of using extend in real projects.

Sass brings a lot more power to CSS and starts to make it feel like a programming language rather than just a series of property and value declarations. One key feature that enables this programatic feel is Sass variables, which can hold a number of different types of data. In this episode we'll cover the seven core data types in Sass and how we can manipulate and operate on these various values.

Colour is hugely important for adding life and visual interest to a project and is an invaluable tool for highlighting parts of the interface that a user can interact with. In this practical episode we're going to talk all about manipulating colours programmatically with Sass. Colour functions take the form function-name( $color, $amount ). The are really useful for manipulating a base pallette of colours for visual details like borders, gradients and drop shadows. Some of the most popular Sass colour functions include: lighten( ) darken( ) saturate( ) desaturate( ) rgba( ) The Sass rgba() function takes any valid colour format and a decimal amount for quick and easy transparent colours without typing out the full red, green and blue values.

BEM is a system of naming classes that encourages the good practice of writing modular code. It can really help bring structure and meaning to the way we name things and it's something I use consistently in my day to day client work. It can be used with or without Sass but Sass and BEM are a great combination. In this video you'll learn what BEM is, what it stands for, how to leverage the Sass ampersand with BEM and some BEM best practices.

In this first video of a brand new AtoZ screencast series, we start our journey into the world of Sass. The Sass ampersand character is very powerful and acts as a placeholder for the parent selector within nesting.

Some interface designs may call for elements to be layered or stacked on top of each other.   There are many ways that elements will naturally stack on top of each other. But we can control this stacking order using a combination of the `position` and `z-index` properties.   In this final episode of AtoZ CSS season one we'll learn about:   The default stacking order of the document What a stacking context is and how they interact with each other How z-index controls layer order within stacking contexts And a method I use for standardising z-index across a project

In the previous episode we learned about the transform property and the value translateX(). In this episode we'll be digging deeper into transforms and manipulating elements in 3D. In this episode we'll learn all about:   3D space in CSS How to rotate elements around their vertical and horizontal axis And how perspective works