Advertise here with BSA
New SASS tutorial tells about many aspects of using SASS: installation, known facts, variables, mixins, nested rules, inline imports, and more. It certainly will be useful for beginners programmers and advanced guru.
SASS
Sass is a CSS pre-processor: a good implement that any web builder needs in a finesse style design of a work.
BEFORE USING SASS
To use sass on your computer you must firstly install a ruby.
There are several ways to install Ruby based on the operating system you are using on your computer.
INSTALLING RUBY
Hint: Click on the any type of operating systems (OS) listed below to install ruby depending on the type of OS your computer is using.
LINUX
WINDOWS
MAC
WHAT YOU MUST KNOW ABOUT SASS
Sass does not alter your protocols in the way you work before rather it makes your life easier in web designing. So I write to convince you not to confuse you that sass can help you in your projects more optimized than css.
WHAT YOU DON’T HAVE TO CHANGE JUST BECAUSE YOU ARE USING SASS
Basically to learn and use SASS you don’t need to be a command-line expert
(The commands for running Sass are few and uncomplicated.)
You have to change the way you writes css
(Your way of writing CSS will be an applied to use in SASS.)
You don’t have change the way you design
All you need is to learn sass, start sassing, and add to the knowledge you already have making your projects more professional when you combine your new learned sass with way you design and write css before.
NEEDS TO LEARNING AND USE SASS
Ever needed to change, say, a color in your stylesheet, and found that you had to find and replace the value multiple times? Don’t you wish CSS allowed you to do this?
Input (SASS)
Output Result (CSS)
Input (SASS)
Output Result (CSS)
What if you could change that value in one place and the entire stylesheet reflected that change? You can with Sass!
Or how about repeated blocks of styles that are used in various locations throughout the stylesheet?
Wouldn’t it be fantastic to roll those shared rules into a reusable block? Again, defined only once but included wherever you needed them.
Input (SASS)
Output Result (CSS)
That’s also Sass! And those two extremely simple examples barely scratch the surface as to how Sass implement writing stylesheets faster, easier, and more flexible observing a professional protocol “Don’t repeat yourself” (DRY) principle of programming Coined and defined by Andy Hunt and Dave Thomas in their book, The Pragmatic Programmer. It’s a welcome helper in the world of web design, because anyone that’s created a website knows.
DRY declares:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
WHAT IS SASS
Sass (short for Syntactically Awesome Stylesheets) is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of sass compilers.
INSTALLING SASS ON WINDOWS
Unlike Mac OS X, Windows doesn’t come with Ruby pre-installed. The official Sass website recommends RubyInstaller for Windows to get things running on your PC.
Once Ruby is installed, you’ll be able to follow the rest of the commands discussed in this tutorial.
INSTALLING SASS ON A MAC
Mac OS X comes preinstalled with Ruby, and Sass is packaged as a Ruby “gem”, which is a clever programmer term for a Ruby application.
Simply fire up Terminal.app (don’t panic!), and at the prompt type the following and hit enter:
That wasn’t so bad, right? After you hit enter, you’ll see the following results stream by in Terminal:
Congratulations! You’ve just installed Sass.
TO GET THE LATEST AND GREATEST, TYPE THIS IN THE TERMINAL PROMPT AND HIT ENTER:
You’ll see the results stream by once again, this time confirming the 3.3.0 alpha has been installed.
TO SETUP SASS WORKFLOW
TELLING SASS WHICH FILES TO WATCH
Okay. We’ve installed Sass, so now what? We need to tell Sass which files to “watch”. Meaning, while we’re editing a stylesheet, we want Sass to monitor that file and convert the .sass file with all our nifty Sass syntax to the browser-ready .css file every time we make changes.
There are a few ways to do this:
• A simple command via the command line.
• A desktop app (there are several) that will help you manage your Sass files and their output.
USING COMMAND-LINE TO SASS WHICH FILE TO WATCH
Essentially the command tells Sass to watch a specified .sass file, and convert it to a target .css file.
For example:
$ sass --watch screen.scss:screen.css
After you run the above command, Sass will start monitoring any changes made to screen.scss.
You’ll see this message in the terminal after hitting return:
>>> Sass is watching for changes. Press Ctrl-C to stop.
If the file is updated, Sass will convert and overwrite screen.css automatically. In other words, every time you save changes in your Sass document, the CSS file will update instantaneously.
The file names don’t have to match. For instance, this would work just as well (though it might be confusing):
$ sass --watch crookcodes.scss:brooklyn.css
Furthermore, the files don’t have to be in the same directory.
In fact, I find it useful to separate my .sass files from my .css files. This isn’t a requirement, but it helps keep things organized.
Sass File Organization Shows a typical setup, with a main stylesheets directory, which contains the Sass-generated .css files and a sass directory that contains all the .sass that I’m working with.
You can also tell Sass to watch an entire directory, rather than just a single stylesheet. So using the above file structure, I could use the following watch command to monitor changes on any of the .sass files in my project (provided I’m currently in the -/ directory that holds my stylesheets and images in the terminal):
$ sass --watch stylesheets/sass:stylesheets
USING APPS INSTEAD OF THE COMMAND LINE
The commands we’ve gone over so far are extremely simple, and I have faith that you, astute front-end crafter that you are, wouldn’t find it difficult to add those bits of typing to your workflow. That said, there are desktop applications that make it even easier to manage the monitoring and output of Sass files.
They’re worth a look regardless of your comfort level with the command line.
Scout
Scout is a free desktop app for both Mac and Windows that provides “a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks.” In other words, Scout gives you a nice, visual interface to set up your watched directories and files rather than using the command line.
Fig 2.3: Scout’s dead simple setup-configuration screen.
Fig 2.4: as Scout watches your Sass files, the “log” keeps you updated with its compiling status.
Once you’ve chosen input and output folders, simply click the play button for your project and Scout will start monitoring files.
CodeKit
Like Scout, CodeKit (for Mac OS only) compiles your Sass files with a simple GUI. But it also compiles LESS, Stylus, Haml, CoffeeScript, JavaScript, and others.
Additionally, CodeKit has other bells and whistles that optimize files and images and automatically reload your browser as you develop (Fig 2.5).
LiveReload
LiveReload monitors any file changes, including Sass compiling, as you work and automatically reloads the browser. It’s available for both Mac and Windows (Fig 2.6).
Koala
Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.
CHOOSING AN SASS OUTPUT STYLE
SassScript provides the following mechanisms of compiling script in css. The output styles are as follow.
1. Nested
Nested (the default). The default style that Sass outputs is nested, which indents each rule to reflect the structure of the HTML it’s styling. Here’s an example of the nested style:
Nested Input (sass script)
Output result
Below Command line outputs sass in nested style
[sass --watch scss:css --style nested]
2. Expanded
The expanded style is a more typical format similar to stylesheets that are crafted by hand.
Expanded Input (sass script)
Output result (CSS)
Below Command line outputs sass in nested style
[sass --watch scss:css --style expanded]
$sass –watch –style expanded screen.scss:screen.css
3. Compact
The compact style puts each declaration on one line, emphasizing the selectors. The idea is you can easily scan the left side to find visually grouped rules, with line breaks between.
Input (sass script)
Output result (CSS)
Below Command line outputs sass in nested style
[sass --watch scss:css --style compact]
$sass –watch –style compact screen.scss:screen.css
4. Compress
Compress Minifies our CSS output by stripping out comments and unnecessary spaces. It compresses CSS to one line. The most optimized output style – use before uploading your CSS to the server.
The fourth and final style is compressed, which removes all spaces and line breaks to reduce the stylesheet’s file size.
Input (sass script)
Output result (CSS)
Below Command line outputs sass in nested style
[sass --watch scss:css --style compressed]
$ sass –watch –style compressed screen.scss:screen.css
WHAT YOU MUST NOT DO WHILE USING SASS
Do not alter the output css script the reason being, any changes you make to the .css file will eventually get overridden as soon as you update the .sass file the sass compiler compiles the output. So stick to the .sass and blissfully ignore its output.
When you’re using Sass, you’ll no longer be editing any .css files.
WORKING WITH SASS
FEATURES OF SASS WITH EXAMPLES
NESTING
Nesting in Sass means less typing, using indentation to reflect the selector (and property) formation. With Sass, you can nest CSS rules inside each other instead of repeating selectors in separate declarations. The nesting also reflects the markup structure.
SASS SCRIPT (INPUT)
CSS SCRIPT OUTPUT (result)
Nesting namespaced properties
In addition to nesting rules, you can nest properties such as text properties, font properties and background properties that share a namespace in Sass.
SASS SCRIPT (INPUT)
CSS SCRIPT COMPILED (result)
Referencing Parent Selectors With &
Sass adds the ability to reference the current parent selector using the ampersand as a special placeholder.
SASS SCRIPT (INPUT)
CSS SCRIPT COMPILED (result)
HOW TO COMMENT IN SASS
To comment in css using sass we have two kinds of comments in stylesheet multi-line comments and single-line comments.
MULTI-LINE COMMENTS
for multi-line comments in .sass that will appear in .css
SASS COMMENT SCRIPT (INPUT)
CSS COMMENT (OUTPUT) RESULT
You can ensure important comments (copyright info, attribution, notes on hacks, etc.) appear in the compressed style output by inserting an ! as the first character of the comment:
/*! This is a multi-line comment that will appear in the final .css file. Even in compressed style.*/
SINGLE-LINE COMMENTS
for single-line comments in .sass that will not appear in .css use //
this comments aren’t included in the final output .css file, so you can safely implement them for private comments in .sass file:
VARIABLES
Variables in Sass are defined regularly using the $.
SASS SCRIPT
COMPILED .css SCRIPT
MIXINS
Mixin is another feature of sass which make craft styling in web design sweet and professional it is usually defined @mixin directive at the top of the .sass file and summon up in the same .sass file using @include .
SIMPLE MIXINS SASS SCRIPT
COMPILED .css SCRIPT
MIXIN ARGUMENTS
SINGLE ARGUMENT SASS SCRIPT
COMPILED .css SCRIPT
MULTIPLE ARGUMENT SASS SCRIPT
COMPILED .css SCRIPT
SASS USER DEFINED MIXINS DEFAULT ARGUMENTS
SASS SCRIPT
COMPILED .css SCRIPT
MIXIN LIBRARY
@import
Import is defined in sass using @
SASS SCRIPT IN RESET.SASS
SASS SCRIPT IN MIXINS.SASS
SASS SCRIPT IN VARIABLES.SASS
To import the variable and mixins in reset, mixins and variables sass file into main.sass we define import using @.
SASS SCRIPT IN MAIN.SASS
SASS SCRIPT
COMPILED .css SCRIPT
@EXTEND
Using @extend function in sass Instead of littering the markup with extra classes to handle those small exceptions, to “chain together” styles that are shared amongst multiple selectors.
SASS SCRIPT
COMPILED .css SCRIPT
Multiple @extends
SASS SCRIPT
COMPILED .css SCRIPT
Using placeholder selectors with @extend
Placeholder is define using %
SASS SCRIPT
COMPILED .css SCRIPT
Thanks for reading see you in the next tutorials
Live Demo
download in package