যারা বাংলাদেশের ৩৬ তম Zend Certified Engineer এবং এই সাইট (w3programmers) এর স্বত্বাধিকারী এবং লেখক Masud Alam স্যার এর কাছে কাছে সপ্তাহে ২ দিন ক্লাস, ৬ দিন প্রাকটিস করতে চান তাদের জন্য আগামী ১ February 2018 (বৃহস্পতি এবং শুক্রবার সন্ধ্যা ৬:০০ টা রাত ৯:০০ টা) থেকে শুরু হতে যাচ্ছে ৫ মাস ব্যাপী Professional Web Design & Development With HTML, CSS, JAVASCRIPT, JQUERY, PHP & MySQL for Beginners কোর্স (এই কোর্স টি যারা ফ্রিল্যান্সিং এবং আউটসোর্সিং কাজে আগ্রহী বিশেষ ভাবে তাদের জন্য design করা হয়েছে। ), আগামী ৪ February 2018 ( রবি এবং মঙ্গলবার সন্ধ্যা ৬:০০ টা থেকে রাত ৯:০০ টা ) থেকে শুরু হতে যাচ্ছে ৪ মাস ব্যাপী Zend Certified PHP 7.1 Engineering কোর্স। যেটা Advance PHP কোর্স নামে পরিচিত । এবং ৫ February 2018 (সোম এবং বুধবার সন্ধ্যা ৬:০০ টা থেকে রাত ৯:০০ টা) থেকে শুরু হতে যাচ্ছে ৪ মাস ব্যাপী Laravel 5.5 Professional Beginning to Advance Course কোর্স ।এই কোর্স গুলোতে তিনি ছাত্রদের কে সপ্তাহে ২ দিন ৩ ঘন্টা করে ৬ ঘন্টা ক্লাস নিবেন , এবং শনি থেকে বৃহস্পতি সপ্তাহে ৬ দিন ই স্যার এর অফিসে বসে প্রাকটিস করার সুযোগ দিবেন ! এতে প্রাকটিস করা কালীন ছাত্র-ছাত্রীরা কোনো সমস্যায় পড়লে তাৎক্ষণিক স্যার এর সহযোগিতা পাবে . (উল্লেখ্য: Training গুলো স্যার তার techbeeo software company'r পাশাপাশি পরিচালনা করে থাকেন।) কোর্স গুলো সম্পর্কে বিস্তারিত জানতে পারবেন এই লিংকে : Course Details .কোর্স গুলোর প্রত্যেকটির ফী নির্ধারণ করা হয়েছে ৩০,০০০ টাকা। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

An Introduction to SASS – for beginners

SASS: CSS with super powers

SASS stands for “Syntactically Awesome StyleSheets“. It is a very powerful CSS extension language, meaning it adds more features to CSS that it originally does not have. The syntax is very similar as well, In fact all valid CSS is valid SASS.

Wait, can Browsers Process and Render SASS?
Well, no. They can’t, but SASS has a pre-processor that converts your awesome SASS stylesheets to simple(but awesome) CSS stylesheets.

Many, modern front-end Frameworks (that you may have already used) are built with languages such as LESS, SASS or Stylus.

Common examples:

 

Features

Here are a list of features SASS supports, I’m going to go over them in more details in future posts.

  1. Variables – Excited already?
  2. Nesting – yes we mean nesting CSS rules inside another like your HTML.
  3. Maths in Property Values – Finally!
  4. Mixins – Yeah, I’ll describe it later, I promise…
  5. Functions
  6. Javascript style comments – feeeww! Praise the LORD!
  7. Inheritance – I know feels funny to imagine.
  8. Arrays
  9. Loops – Repetitive Code? No Problem!
  10. Conditions & Control Structures – WOW!
  11. Imports & Partials – Kinda like CSS’s imports but Awesome-er!

 

What You Need

  • Basic HTML coding knowledge.
  • Working Knowledge of CSS is a must, as SASS is just an extension of CSS.
  • A good code editor, eg. Sublime Text, Coda or Text Mate
  • Knowledge in any other programing or scripting language like PHP or Javascript definitely helps.
  • Basic Knowledge of working in the command line, fearing the command-line wont get you far.

 

Installing Ruby

Sass was built in another cool and popular language called Ruby. Therefore it is essential you have ruby installed on your machine. Apple Macs already have ruby installed by default, but if you are on a Windows PC like me, you have to manually install it.

Installing Ruby on Windows

Download Ruby Installer for Windows
I bet, we all know how to install a simple program, but you should take note of the setup configuration, when you come to the following stage of the setup…
(though not mandatory but recommended for ease of use)

Installing Ruby

Recommended Settings

 

Installing SASS

The install process is as simple as running this simple command in the Windows command-prompt or Mac Terminal. (click on the links if you don’t know how to open them)

> gem install sass

Soon, within under a minute you should see stuff happening on your screen.

Windows Comand Prompt

Windows Command-Prompt

Mac Terminal or Linus Bash

Mac Terminal or Linux Bash

Which ever platform you’re on, as soon as you see the line “1 gem installed” being printed out to your command window, you can pat yourself in the back and celebrate for successfully installing SASS.

 

Verifying your SASS Installation

run the following command in command-prompt or terminal

> sass -v

it should print out the version of sass you have installed, for example:

> sass -v
Sass 3.2.13 (Media Mark)

If it does output something similar to this, then congratulations you have confirmed successful installation of sass.

 

Your First SASS File

First make a folder(eg. I made a folder named “SASS” on my desktop), and inside that folder make a new file named “style.scss” and insert this piece of code into that file…

//Color Variables
$blue: #0072ff;
$light_blue: #60a7ff;

//links
a{
    text-decoration: none;
    color: $blue;

    //Links on Hover
    &:hover{
        text-decoration: underline;
        color: $light_blue;
    }
}

 

Example Folder Structure

Example Folder Structure

I’ll explain this code in the next post of this series. For now, know that this already shows how to define and use variables and how to nest selectors inside one another. This code simple defines and styles for links and the their hover state.

Note that we stored it in a file with the extension “.scss” not “.sass”. In practice both the extensions are valid sass extension but sass has two different syntax and so the extension is used to tell the SASS engine which syntax is being used.

  • SASS Syntax which is a little old and uses indentation for code blocks.
    It doesn’t use curly brackets to define blocks of Code and it doesn’t use semicolons to end lines, instead it uses line breaks.The following code is the same as above but in sass syntax

    $blue: #0072ff
    $light_blue: #60a7ff
    
    a
      text-decoration: none
      color: $blue
    
      &:hover
        text-decoration: underline
        color: $light_blue
    
  • SCSS Syntax is the one everyone prefers as it closely resembles CSS code, with curly brackets and semicolons. Valid CSS is also valid SCSS.
    Note: We will be using this syntax through out this series.

 

Generating your first CSS

  1. Once again, open your command-line
  2. cd to the directory you created your sass file in.
    eaxmple:

On a Mac (or Linux)

> cd ~/Desktop/SASS/

On a Windows

> cd C:\Users\Omran\Desktop\SASS

Change Directory

  • Run the sass command with 2 arguments in the follwoing order…
    • Your Sass File
    • Name of the CSS file you want to generate

    Like:

    > sass [your sass file] [Name of the CSS file you want to generate]

    Example:

    > sass style.scss style.css

    The Sass Command

 

If all goes well, you should see a file named “style.css” has been generated in the same directory where you created your sass file….

style.css has been generated

style.css has been generated

If you open the css file you should be greeted with code that looks like this:

a {
  text-decoration: none;
  color: #0072ff; }
  a:hover {
    text-decoration: underline;
    color: #60a7ff; }

There you go! SASS has done its magic, it has converted SASS code to Valid CSS. Notice all the comment have vanished. normally its not common for you go go through the generated css files so SASS just ingnores the comments when compiling SASS to CSS.
Wait, the code’s indentation looks a little odd right? That is because the code was output in nested style, which is the default style in sass.. to make it easier to read you can run the sass command with the style option set to expanded, which is the type of output a human would generate….

example:

> sass style.scss style.css --style expanded

This will generate this code:

a {
  text-decoration: none;
  color: #0072ff;
}
a:hover {
  text-decoration: underline;
  color: #60a7ff;
}

Much better right? For the course of this series, we will use the expanded style output. So to follow along, this is important.

 

Afraid of the command-line?

I strictly advise against using Graphical Applications, I mean you’re a Web Developer! What have you got to fear about the command line? But, if you really do hate the command-line as much as you hate broccoli, we can’t blame you. So here a small list of Graphical Applications for your SASS Projects.

Koala

Free, Cross Platform, pretty fast….

Koala-App

Koala-App

Compass.app

Paid, Cross Platform

Compass.app

Compass.app

Scout

Free but extremely Slow on Windows…

Scout

Scout

Conclusion

We have just scratched the surface of SASS, SASS has a few more commands, and a lot more features we can take a look at. We will be looking at those in the next posts of this series.
SASS for Beginners: Basics

Go ahead! Start reading!

Hi, I am Omran Jamal from Bangladesh, a Student of A-Level, and an Intern at Techbeeo. Though young, I am very enthusiastic about Computers. Taught myself how to code when I was 12 and been coding ever since.

4 comments on “An Introduction to SASS – for beginners
  1. Pingback: SASS for Beginners: Basics

Leave a Reply

Your email address will not be published. Required fields are marked *