SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally.
2. SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to
reduce repetition with CSS and saves time. It is more stable and powerful CSS
extension language that describes style of document cleanly and structurally.
3. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for
“Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3
stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “.sass”). Inspired
by Haml’s terseness, it’s intended for people who prefer conciseness over similarity
to CSS. Instead of brackets and semicolons, it uses the indentation of lines to
specify blocks. Files in the indented syntax use the extension .sass
4. SASS
HAML-style indentation
No brackets or semicolons,
based on indentation
Less characters to type
Enforced
conventions/neatness
SCSS
Semi-colon and bracket syntax
Superset of normal CSS
Normal CSS is also valid
SCSS
Newer and recommended
5. Sass allows you to write reusable methods and use logic statements, e., loops, and
conditionals.
Sass user can access Compass library and use some awesome features like dynamic sprite
map generation, legacy browser hacks and cross-browser support for CSS3 features.
Compass also allows you to add an external framework like Blueprint, Foundation or
Bootstrap on top.
In LESS, you can write a basic logic statement using a ‘guarded mixin’, which is equivalent
to Sass if statements.
In LESS, you can loop through numeric values using recursive functions while Sass allows
you to iterate any kind of data In Sass, you can write your own handy functions.
6. Scss need a compiler to make scss to normal css.
There are a couple of ways to start using Sass.
1. APPLICATIONS
2. COMMAND LINE
We are using command line to watch live changes of the development of frontend.
Command line approach can be done various ways.
1. npm
2. Chocolatey
3. Homebrew (OsX)
We are using npm (Node Package Manager) to compile the scss to css.
7. Gulp is a toolkit for automating development workflow.
8. Gulp is a nodejs package and install with npm and npm is a package manager
ships with nodejs. So before installing gulp you need to install following things.
Install nodejs to your system.
Install gulp, follow the gulp document.
9. Create a project directory.
Initialize npm to the directory by npm init command.
Then write npm install gulp
After that you have to create gulpfile.js to the root of project directory.
Rest of the things will explain in the demo.
13. • Both syntaxes have the same functionality
• Both of the previous examples compile to:
#main{
font-size: 12px;
color: #333333;
}
#main a{
color: #999999;
}
• Already demonstrated basic variable usage and nesting
• Note: Some examples compile using different formatting, I changed them for the slides for readability