Learning Sass Preprocessor
Last updated: Jul 4, 2019
Sass is an abbreviation for *S*yntactically *a*wesome *s*tyle*s*heets. It makes css futireproof by adding a layer of programing constructs to css stylesheets.
pacman -S ruby-sass
== Main Features
=== 1. variables Consistent use of Reusable information in style-sheets.
For example, using main and sub fonts, colour etc.
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
=== 2. Nesting Provides HTML like css for nesting elements.
Should not be overused. Be aware that overly nested rules will result in over-qualified CSS that could prove
hard to maintain and is generally considered bad practice.
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
=== 3. Partials
A partial is simply a Sass file named with a leading underscore.
You might name it something like
The underscore lets Sass know that the file is only a partial file and
that it should not be generated into a CSS file.
Sass partials are used with the
// _reset.sass partial html, body, ul, ol margin: 0 padding: 0
=== 4. imports The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.
// base.sass @import reset body font: 100% Helvetica, sans-serif background-color: #efefef
=== 5. Extend/Inheritance
mixin lets you make groups of CSS declarations that you want to reuse
throughout your site. You can even pass in values to make your mixin more
flexible. A good use of a mixin is for vendor prefixes
@extend lets you share a set of CSS properties from one selector to another.
It helps keep your Sass very DRY
=== 6. Operators Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.
.container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary"] float: right width: 300px / 960px * 100%
.Practical SaSS Examples
sass input.scss output.css # watching entire directory sass --watch app/sass:public/stylesheets
== Strategies for writing better code with Sass
Components are independent items that can be reused almost anywhere. There can be small, presentational components, such as a “Button”, “Input” or bigger “organisms,” such as “Article.” The key point is to make them independent: you should not create page or content-specific modules.
For a file structure, it’s recommended you create one file per component. It might look odd at first, but it helps you find what you’re looking for much faster. Treat it like a class in OOP programming
[bibliography] == References