SASS and Foundation

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

SASS and Foundation

SCSS and Foundation

SASS SCSS and Foundation

As the name suggests we are going to take a dive into the world of CSS – Cascading Style Sheets. The reusable piece of documents that are served on every page, so our pages look alike & beautiful. The way I look at CSS, they are like the “make up” artists for our performers i.e. “HTML document”.

At the end of the day, a HTML document is a simple XML(EXtensible Markup Language), that is made up of tags (head, body, div etc..) and attributes (style, id, class) and intended to  carry data, not to display data. It is the responsibility of our browser engine to take that data and make HTML into something more meaningful i.e. DOM. DOM is a complete tl;dr post altogether.

Contents

CSS Preprocessors

So, back to CSS. From the time we are into developing a web based application, we kind of wrote a css file (always) to add colors, paddings margins etc.

Updating a small site with new changes to styles is pretty straight forward. We find and replace. But imagine a website using > 10 css files and each file > a 1000 lines. This definitely beats the patience of the developer. Leave alone updating, imagine developing such code, in a shared environment, where a dozen of your team mates are working on it.

Now ask yourself this,

  • What if you could change the value of color/style in one place and the entire stylesheet reflected that change?
  • What if you wrote the styles only once and you can reuse them any where?

You know, I know CSS doesn’t allow this, but CSS pre-processor does.

In a nutshell, A CSS preprocessor is one that takes in a code that looks a lot like CSS compiles it and generates an actual CSS document that your browser can understand.

Available (famous) CSS preprocessors

  • SASS – Syntactically Awesome Style Sheets
  • LESS – Leaner CSS
  • Stylus – Expressive, dynamic, robust CSS

On a personal note, they all do the exact same thing. LESS,Stylus use a Javascript driven preprocess, whereas SASS uses a Ruby driven preprocessor. The only difference is syntax and a couple of features. 

Now all the introductory stuff is out of our way, we will focus on setting up SASS.

Foundation/SASS Setup

Foundation/SCSS Setup

Mac/*nix systems

By default Mac/*nix systems come with Ruby preinstalled. You can check this by navigation to your terminal (under utilities) and running ruby -v . This should prompt back with the version of Ruby installed. You can upgrade your Ruby to the latest version using the RVM (Ruby Version Manager). Steps here or here.

Windows

Navigate here. Download the latest stable version. Run the exe. When you are running the set up, make sure you  check “Add Ruby Executables to your PATH“. This will make Ruby available globally from any command window.

All users can run  ruby -v to validate the install. Lets set up SASS. SASS is a ruby gem.

Wikipedia

RubyGems is a package manager for the Ruby programming language that provides a standard format for distributing Ruby programs and libraries (in a self-contained format called a “gem”), a tool designed to easily manage the installation of gems, and a server for distributing them. It is analogous to EasyInstall for the Python programming language. RubyGems is now part of the standard library from Ruby version 1.9.

We can check the version of gem by  gem -v.

From V5, Foundation uses Grunt & Bower to manage the project. So lets install them.  Open your terminal/prompt and run the below command (assuming you have node installed. How to setup Node)

windows

npm install -g bower grunt-cli

Mac

sudo npm install -g bower grunt-cli

Next, lets install foundation gem

gem install foundation

Now, lets create a new folder on your machine and name it  foundationDemo. And navigate to that folder using the CD command from terminal/prompt.

Now, lets set up a new foundation project. Execute the below command

foundation new mySite --libsass

where mySite is name of the project & libsass is a SASS compiler (more here).

This is a sweet scaffolding command, that will set up your foundation project, from scratch. After the process is completed, you will see a bunch of files inside your mySite folder.

  • bower_components : All the dev dependencies, including foundation scss source files
  • css : Output of our compiled scss files will be dumped here
  • js : Our app related js files
  • node_modules : Our project related dependencies, including grunt & grunt-sass
  • scss : Our source scss files will be placed here.
  • bower.json : Config to load Foundation
  • Gruntfile.js : Our task runner config. This would automate the process of building CSS from SCSS files
  • index.html : our main page
  • package.json : All our project dependencies are stored here.
  • Ignoring readme.md, humans.txt & robots.txt (they are self explanatory)

Basics of SASS/SCSS

Note: SCSS & SASS are used interchangeably. [SASS was born, then LESS was born with some enhancements on top of SASS & finally SCSS was remodeled from LESS. SASS + LESS = SCSS.]  I will be referring to SASS/SCSS as SCSS from now on. SCSS – Sassy CSS. SASS vs SCSS. Also check out Popularity of css preprocessors & Comparisons between them.

SCSS has a few but powerful concepts. We will start of by discussing the

Variables

As in Javascript, SCSS also has a provision to store values. Technically there is data type for these variables. All variables in SCSS precede with a $  symbol.

So, lets do a quick setup to evaluate a few SCSS concepts.

Step 1: Open Gruntfile.js
Step 2: Locate a line 'css/app.css': 'scss/app.scss' and replace it with 'css/tutorial.css': 'scss/tutorial.scss'.

Then navigate to scss folder and create a file called tutorial.scss. Thats it! we are ready to make changes and test our code. Next launch terminal/prompt at the root of our project (inside mySite folder) and run grunt watch. Grunt will watch for our changes and will compile the files again.

Then open scss/tutorial.scss  in a text editor and copy paste the variables.scss  code from below

Then, our grunt will run the sass task and the output will be in  css/tutorial.css and should look something like this!

Note, the grunt config file (Gruntfile.js) consists of outputStyle: 'compressed'  to minify the css (Output style. Can be nestedcompactcompressed or expanded.). For the tutorial purposes, we will replace that with  outputStyle: 'expanded'. Back to tutorial.scss, we will trigger a save for grunt to re-run and build new un-minified version.

Variables are very powerful, when you are designing a web application which can be themed, you would want to declare a $theme_color  and derive other colors from it.

Nesting

There are times when we have written CSS for a lot of elements that are nested inside a parent. But our CSS syntax never represents this

They look like a bunch of un-related CSS classes! SCSS to our rescue. Now back to scss/tutorial.scss & assuming grunt watch is running, lets append the below

Save scss/tutorial.scss and you can see your css/tutorial.css is updated & your output should be something like this

This looks more appealing to the eye(at least for me) & makes sense semantically.

Mixins

Real life problem to any web developer who is supporting multiple browsers is to write vendor pre-fixers every time you use a background image or border radius. Did you Google “Cross browser background-image css” at least once? And then again and again to copy paste the same code & add your changes?

Well gone are those days! For this example lets head out to CSS3 please & search for background-image. Around 1/5 down the page you should see something like this

How many times do you intend to copy paste the above code and make changes to the variables? Mixins to the rescue.

Mixins are a group of CSS declarations that are represented by a name & which take in variables as arguments. So the above background-image can be wrapped into a Mixin like this

Lets append the above code to scss/tutorial.scss. And this is how we use it

Save the file & open css/tutorial.css you should see two new classes added with the above colors as input. Sweet right!

Inheritance

What would you say, if I said, in SCSS, we can use one CSS class inside another CSS class? Like we have a notification class & then we want add success or error notification styles to it. Like this

If you append the above snippet to scss/tutorial.scss & save the file, your css/tutorial.css should reflect something like this

Which is pretty awesome!

Selectors

SCSS supports all the selectors that CSS supports (So.. obvious). & (ampersand) is a pretty handy operator in SCSS. It refers to its parent element

Will result in

And also, we can use & with other selectors like this

Output would like

Operations – Run time calculations

Now we have a variable & you want to derive other CSS declaration values from your variable. The perfect example would be for a CSS3 media query, based on view ports. So this how we can do it

The output will be

You can use  +, -, *, %, / for the operations. Do note that, SCSS automatically converts 320px to 320 whilst calculations. Not only numerics, SCSS can process colors too, which we will see in just a while.

Partials & Imports

Partials are collections of CSS classes that are split up into different files for maintainability. A partial file is always named with a _  (lowdash/underscore) preceding the name like _partial.scss . The _  (lowdash/underscore) indicates the SCSS compiler that this is a partial file and it need not be generated into a CSS file. A Partial can consists of any SCSS code we have written earlier.

A partial can be imported into another SCSS file or a partial SCSS file using the imports declaration like  @import '_partial';. Notice that we don’t need to add the extension .scss.

This kind of wraps up most of the basics for SASS/SCSS.

Understanding Foundation SCSS

If you have not worked with Foundation earlier, I would highly recommend you to go through this & this. If you not worked with Responsive Web Design earlier, I would recommend you to go through this.

This post does not target on explaining how Foundation grid system works or what are the different components available, but we will understand how these components are derived from a SCSS platform to CSS. Lets get started.

Now, assuming that you still have the grunt watch  running, we will update our file to work with the Foundation SCSS files. Open Gruntfile.js  & replace  'css/tutorial.css': 'scss/tutorial.scss' with  'css/app.css': 'scss/app.scss', and save the file.

Foundation as you must have already guessed by now, uses all the above features to build a Responsive Framework, that can be easily theme-able and customize-able.

So, the first question is where are all the variables declared?

Sherlock to the rescue, lets open up scss folder, you can see a file called  _settings.scss. You guessed it right. Its a partial file. This partial file is the mother load of all the variables that are used by Foundation. Neat right? Open that up in your favorite editor. You will witness one of the few 1200 lines document that you want dig up and tear apart (pun intended). The commented out values are the ones, which are used by Foundation right now.

In the same folder (scss), open up  app.scss. This is our hook to the outside world. This document, will reference all the other foundation related documents/SCSS files. SCSS compiler will compile this one document and spit a single large app.css document, that is included in our index.html (line no ~7), consisting of all the Foundation related CSS rules.

Our grunt config has a sass task that will take app.scss  and spit out  app.css. This is what our grunt watch  was doing till now. Yes, for real.

Now lets open up index.html  in the root of mySite  folder.

Note: If you are working with RWD (Responsive Web Design), this is a very handy chrome extension, mainly the resize tab.

How to update Foundation via SCSS

Now, lets put our SCSS skills to use. Lets say we need to change CSS of some element(s) or component(s) in Foundation. How do we go about it

Step 1: Know the component you are trying to theme/update

Step 2: Navigate to Foundation Docs and use the search bar on the left

Step 3: Once you find the component you are looking for, you can read the documentation or scroll down to the end. You will see a section called as Available SCSS Variables or Customize With SassNow, You know what variables to update for see a specific change in your component.

Step 4: Navigate to scss/_settings.scss  file and search the variable you want to update & make the change. DO NOT forget to remove the comments in front of the statements

Step 5: Build app.scss & Boom! Bam! Badoom! your customized CSS files are ready!

Lets put the above steps into implementation. Back to index.html in our browser. Lets change the heading tag’s color.

Update Headers

Step 1: Lets update the typography of Foundation

Step 2: I navigated to Foundation Docs and searched for typography and this is what I got.

Step 3: Almost 2/3rd down the page, you will find Available SCSS Variables section. I am looking for the header color and looks like  $header-font-color is a match.

Step 4: Open up scss/_settings.scss  and search for  $header-font-color. Around line no ~119, you can find a match. Lets update this from #222  to  #802A2A (brown). And remove the  // in front of declaration.

Step 5: Since my grunt watch is already running, it will compile the app.scss for me and build my app.css file.

Back to the index.html in the browser & refresh. Bam! all our h1 to h6 tags are changed to brown. But you will notice that some of the header tags are not in brown. This is because, their base color is overridden by some other CSS class’s color property. This depends on a concept called CSS specificity.

So, now you know how to update any component. Lets try one more.

Update Panels

Step 1: We will update the panel’s background color

Step 2: Searching for panels will result in this page.

Step 3: The variable I am looking for is  $panel-bg. You can ignore the syntax for now.

Step 4: _setting.scss , ~765  line no, update #fff  to  #ccc

Step 5: Recompile & refresh index.html

Now you know how to change the styles of different elements via SCSS variables. Now, lets take a look at some fascinating mixins that come out of box with Foundation

Foundation Mixins

rem-calc

If you navigate to this page and once again take a look at the Typography related variables, you will find a few mixins.

$h1-font-size: rem-calc(44);

rem-calc is a mixin that for developers who are used to writing measurements in px and not em. When we are working with RWD, we would like use em than px. This is why. So this function will take a px value and convert it into em. Cool right? (rem vs em).

Lets take a look at a bit more advanced example. Lets navigate to  mySite/bower_components/foundation/scss/foundation/components/_panels.scss

Around line no: 34, you will see a mixin called as panel. This is for creating a new panel (more on that later). The magic lies in line  nos: 51 to 62.

So, whats happening here?

Line 1: We are using another mixin to calculate the factor of lightness of the color.

Line 7: If the bg-color is lighter, all the font colors would be darker & if the bg-color is darker, all the fonts colors will be lighter. Neat right?

This page consists of a list of all global mixins for foundation.

Inheriting Foundation components

Lets do one quick example on how we can extend Foundation’s core components and build custom components. Like a button.

Its advisable to create a new file called _custom.scss inside the scss folder to create all your custom components. And the import it into app.scss. But for this example, we will add code directly to app.scss.

Open up app.scss. Lets create a new custom button. We are going to use the button mixin found here. Add

to the end of app.scss. When compiled, this will result in

In an advanced usage, you can,

And the generated code would be

Now, you can go back to index.html, look for a button and add the newly generated class called myButton. Refresh your page and you can see the styles change.

This was a very introductory tutorial on what SCSS & Foundation can do. Hope this helped you in getting started.


Thanks for reading! Do comment.
@arvindr21

 

 

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Guest

    Thank you Arvind! Very useful article!

    Regards

    • / Arvind Ravulavaru

      Thanks.

  • Rob M

    Great article :) – some bugs: when you talk about mixins, your code has an error on line 1, character 1:
    you have
    mixin background-image($bgColorFrom, $bgColorTo) {
    should be
    @mixin background-image($bgColorFrom, $bgColorTo) {

    also: running the final bit of code: “In an advanced usage, you can,”, i get a grunt error:
    _custom:8: error: unbound variable $padding
    … i’m running it via the _custom file. however, placing it in app.scss, i get the same error:
    app.scss:51: error: unbound variable $padding

    • / Arvind Ravulavaru

      Hello Rob. Thanks!

      Thanks for pointing out the bugs. I have fixed the first one. And for the second one, I have written the mixin before the variables hence the error fixed it too.