Learn the Basics of SASS in 20 Minutes or Less

www.weeare.co.uk weeare.co.uk2 years ago in#Dev Love299

Syntactically awesome style sheets or SASS for short is a CSS pre-processor that allows developers to write code in one language before compiling it into another. SASS is an extension of CSS, which allows you to create your stylesheets faster and cleaner. Here at Weeare we use SASS to cut down on our development time and keep our CSS more organised, so in this article we will be giving a tutorial on how to understand the basics of SASS in 20 minutes or less. Depending on the feedback of this tutorial we may publish more tutorials on this website. SASS intro We use the syntax form of SCSS here when developing SASS files, SCSS known as Sassy CSS needs to be compiled before your code will work, you have a few options when it comes to compilers. You can either: • Compile files manually through the terminal• Use Grunt• Use a third party desktop app such as CodeKit (paid) or Koala (free) Check all of the above out and decide which one you would like to use, If you are a beginner and want an easy way of setting up and just messing around with SASS then I recommend one of the desktop apps. CodeKit and Koala are both easy to use and great tools. I wont take you through installing any of the above because the documentation on both websites is easy enough to follow. Once you are set up you are ready to begin learning the SASS language. Variables in SASS One of the greatest features of SASS in my opinion is the use of variables. If you are coming from another programming language you will welcome variables with open arms. SASS variables store a value which you will often repeat inside of your code. For example you wanted to set colors for your website, rather that using the conventional method of writing #000 every time you wanted black to appear in the site you would first set a variable such as: $main-color: #000; From there on out if you wanted a black background, title, or font color you could use: .main-div{ background-color:$main-color; } h1{ color:$main-color; } p{ color:$main-color; } Now you may be thinking what is the point of this? Well the thinking behind this is that it allows us to use the same values more quickly, you don’t have to remember crazy hex codes or font families you simply remember the variable name. Would you rather write $secondary-color or #98B52E throughout the site 100 times. SASS variables save you time when writing out but also when you want to change values, imagine your client has decided that they now want to change the primary color to a darker shade and rather than having to change the #98B52E color 100 times, you can simply change the value of $secondary-color once and the 100 values are changed instantly. SASS Variable data types You can use SASS variables to store a wide variety of data, this is shown below. $main-font-text: ‘Open Sans’, sans-serif; $primary-color: #000; $header-font-size: 20px;SASS Mixins Mixins are a block of code that you create once and then can reuse through out your project. If you are from a JavaScript background then you can think of mixins as a function. Like a function a mixin can take multiple parameters and can output some data, the data in this instance would be CSS. One of the main purposes of SASS is to allow you to create well organised CSS and mixins are great for this as they allow you to write clean and DRY code, if your not…

Like to keep reading?

This article first appeared on weeare.co.uk. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply