Sass - variables, partials, mixins and extends


Probably if you are into Front End you have come accross this acronym before, but what does it stand for? It is probably one of the funniest acronyms I've ever found withing web development: "Sintactically Awesome Style Sheet". 

Enough with jokes, let's talk about what it really is: an extension of Css which simplifies style sheets syntax to allow you to write cleaner, more understandable, easy to modify or adjust Css. 

First of all, there's two ways of writing Sass:

  • SCSS (Sassy CSS):  .scss extension files written with css syntax.
  • Indented: .sass extension files which replace brackets with indentation. It is not fully compliant with CSS but it's quicker. 
Basically, once you set up your project to use Sass, a .css file will be created together with a .scss. Whatever you write in your Sass file will be translated into the .css file. What is the main advantage of this? .scss files are easier to read thanks to the use of some features, therefore they are faster to modify, and also their syntax allows a cleaner way to modify specific aspects of your CSS without risking changing a whole bunch of elements you did not intend to. Let's have a look at some of these features:

Variables

Basically, Sass allows you identifying css atrributes with variables, so that, in case you want to change that attribute, you can do it in only one place and don't need to overwrite it in 100 elements. 
For example, let's say all of your button elements have a certain kind of font. Imagine, suddenly, you decide to change the font of all of the buttons. Of course you can always use css priority rules and create a new rule to override each button specific font attribute, but if you were using Sass, you would only need to give that font name a variable name as follows:



$buttons-font: Helvetica, sans-serif;

and assign it to the relevant element as follows:



.submit-button
{
font: $buttons-font; 
}

Look at this sass code:

.names-list {
  ul {
    margin: 0;
    padding: 0;
  }

  li { color:  #333; }

  a {
    color: #0288d1;
    text-decoration: underline;
  }
}

Nesting your elements this way will save you writing long element names such as:



.names-list ul{  
    margin: 0;
    padding: 0;
}

.names-list  li {
 color:  #333; 
}

.names-list  a {
    color: #0288d1;
    text-decoration: underline;
}

Partials

Partials are scss code snippets that can be imported into other sass files. How is this useful? Well, imagine your are following a certain style for your h3 headers accross all of your pages. You can define those attributes in a .scss partial beginning the name of the file with underscore. For example: _headers.scss and then import it into every file you need it as follows:

@import 'headers';

Mixins

These function is used to define re-usable styles. Imagine you have a set of headers which have common and different styles. You could import common styles as follows using a mixin:

 

@mixin general-header {
  font: Helvetica, sans-serif;
  float: left;
  font-weigth: bolder;
}

@mixin lesson-header {
  @include general-header;

    color: #ed2939; 
    text-decoration: underline;
}
@mixin section-header {
  @include general-header;

    color: #e0115f; 
    font-style: italic;
}

It is also possible to use parameters together with mixins, which is useful, for example, in case you are using vendor prefixes:


@mixin flex-value($flex) {
      -webkit-flex: $flex;
      -ms-flex: $flex;
       flex: $flex;
}

.column { @include flex-value(0 1 auto); }

Extends

This feature allows you inheriting styles from another class. Take this example:



.error {
  color: #ff2400;
}

  &--serious {
    @extend .error;
  border-width: 3px;
  font-weight: bolder;
  }

First of all, note the "&--" which would be translated into ".error--serious" in css. This "&--" or "&__" is used to add suffixes to the outer selector ".error". In the second place, as you might have guessed, the @extend feature allows us inheriting .error styles. But this makes one wonder then:

What is the difference between mixin and extend? Mixins copy styles into the current style rule, while @extend update style rules. This involves several advantages:


    • When translating our scss to css, impossible selectors such as #main #footer won't be generated
    • It interleaves selectors efficiently so that they work notwithstanding the order of HTML code
    • It gets rid of redundant selectors
And last but not least, bear in mind cascade priority is determined based on where the extended selector rules appear, not where "@extend" appears. 

Sure-fire trick! You can use "selector.unify(selector1, selector2)" to find only elements matched by both selectors. It returns null when there is no coincidence between both. This might look easy to do mentally, but if you think of how long selectors sometimes are, it comes in handy to find the coincidences. 

There's plenty more to learn and practice with Sass, but it's time to call it a day. At the end of the day, it's all about writing clean, professional code that works perfectly today, and will be smoothly modified in the future. 

Happy coding everyone!

Comments

Post a Comment

Popular posts from this blog

SOLID: The Single-Responsibility Principle (SRP)

 This Object Oriented Programming principle states that each module or class should be responsible for only one part of the functionality.  By saying this, we are stating that each subsystem, module, class or function should have just one reason to change.  How do we accomplish this? By developing small service classes with enclosed objectives.  What is it that we want to accomplish through this strategy?   More cohesion and less resistance to change. Allow the composition of classes (or class injection) which deserves a extended post in this blog. Avoid duplicity and copy-pasting portions of code. Now, that seems fairly simple but, as with any theoretical principle, the problem is usually visualizing with an example what the theory is suggesting and, even more than that, in which cases should we apply this theory. Of course, it's not the same developing a small online shop for a cousin who produces and sells hand made costume jewelry, than developing  an a...
Read more

Symfony HTTP client

 I am currently developing a very simple app which offers you the possibility to create question-answer flipping cards, creating thus some kind of funny Trivia to practice on any topic you want to apply it to. As a user, you create first the question-aswear entities which also include  category field, and then you can practice them in the playground area, which shows you the question on a hoverable flipping card. It also offers you a textearea which disables 60 seconds after you start typing on it, so that you can write down your answer before actually flipping the card and getting to see the correct one.  In this app, though simple, I wanted to keep a client-web service architecture from the very beginning. The web client contains the views and communicates with the API, which contains the data through Ajax calls. This was working consistently so far. An example of the creation and saving of new question-answer items is: When I press on "Create new question" button, I am...
Read more

Inheritance: Abstract classes and interfaces

What is inheritance? It's a programming principle used in the PHP object model which allows a class (child) to inherit another class' (parent) protected or public methods, properties and constants, retaining the parent's original functionality, unless these are overriden by the child class. What is an abstract class? A class that contains at least one abstract method, which means only the signature of the method is defined. For example: abstract Class Parent { abstract protected function defineMyFunction (). } Class Child extends Parent {      protected function defineMyFunction () {           return "I am an abstract function in my Parent class" ;      } } As childish as this example might seem , it quite easily represents the aforementioned definition. When a  class (or child class) extends from an abstract class (or parent class), it must define all methods declared as abstract. In fact, if you are using an IDE...
Read more