How To Organize And Structure Your SASS Code

How To Organize And Structure Your SASS Code

SASS (Syntactically awesome style sheets) is an extension of the CSS which adds syntactic power to the basic CSS language making it easier for developers to write CSS. It is just a CSS preprocessor so that you can write CSS in an easy and convenient way.

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable style sheets.”

“Sass is an extension of CSS3, adding nested rules, Variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”

It’s Sass, not SASS. Sass doesn’t stand for anything, except maybe making your CSS Sassier. Sass makes CSS sassier because it’s a preprocessor. Preprocessors make writing code easier.

If it helps you make CSS more like a real programming language. If that doesn’t help, just think of it as a way to write CSS that’s cleverer.

Contents

The History of SASS:

  • Sass was first given life by Hampton Catlin in 2006, later supported by Natalie Weizenbaum and Chris Epstein
  • Sass started life in the ruby community
  • Sass supports two syntaxes
    –Indentation syntax with file ext .sass
    –CSS compatible syntax with file ext .scss
  • Sass is free to use and requires no license.

Why Use SASS?

  • Modularize (@import)
  • Variables for maintainability
  • Mixins improve reusability
  • Reduces redundant rules (keep it DRY)
  • Scalable and Maintainable
  • Sass is completely compatible with all versions of CSS
  • Sass reduces the repetition of CSS and therefore saves time
  • It provides the document style in a good, structured format, better than vanilla CSS
  • It uses re-usable methods, logic statements, and some of the built-in functions such as color manipulation, mathematics, and parameter lists

SASS and SCSS

Two available syntaxes

SASS

  • HAML-style indentation
  • No brackets or semi-colons, based on indentation
  • Fewer 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

How to Install SASS on Computer

Install Live SASS Compiler Extension in VS Code

  • Select the Extensions tab from the sidebar. Click on the Extensions tab from the sidebar
  • Search for Live Server in the search box
  • Search for “Live Sass Compiler” from the search box
  • Click on the Install button
  • It  is now in the NodeJS package also
  • First, install NodeJS
  • then Enter NPM install –g sass

The SASS File structure pattern

 

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Main Sass file
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/slider';

@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Reasons We Love SASS

1. Variables

  • Sass allows declaring variables that can be used  throughout the style sheet
  • Variables begin with $ and are declared like  properties
  • They can have any value that’s allowed for a CSS property, such as colors, numbers, or text

Veriable

Variables: SASS vs. SCSS

Variables Sass Scss

2. Mixins

Mixins allow re-using whole chunks of CSS, properties, or selectors

Mixins are defined using the “@mixin” directive, which takes a block of styles that can then be included in another selector using the “@include” directive

Mixins

Mixins: SASS vs. SCSS

Mixins Sass Scss

3. Nesting

  • Often in CSS, there are several selectors that  begin in the same way
  • Sass avoids repetition by nesting selectors  within one another

Nesting

Properties can be nested too

Nesting1

  • Pseudo-classes can be nested too (e.g.:hover)
  • Sass special character & in a selector & is replaced with the parent selector

Nesting: SASS vs. SCSS

Nesting Sass Scss

4. Imports

Style sheets can be big: the @import directive allows to break styles up into multiple style sheets

Import

5. Operator and functions

  • Operations (+, -, *, /, and %) are supported for numbers

There are many useful functions for colors, e.g.  To change lightness, hue, saturation,

Operator and functions

6. Selector Inheritance

Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties

Selector Inheritance

Conclusion:

Organizing code is essential for developers and together with all other skills. It is the most effective way to improve the functioning of the site. And even though there are multiple ways of organization and different strategies, opting for simplicity helps you avoid dangerous pitfalls. And finally, there is no right or wrong choice since everything depends on the developer’s work strategies.

Summary
How To Organize And Structure Your SASS Code
Article Name
How To Organize And Structure Your SASS Code
Description
SASS is an extension of the CSS which adds syntactic power to the basic CSS language making it easier for developers to write CSS. It is just a CSS preprocessor, so that you can write CSS in an easy and convenient way.
Author

Your recently viewed posts:

    Contact Us

    We’d love to help & work with you




    When do you want to start ?


    Enter your email address to stay up to date with the latest news.
    Holler Box

    Exit pop up

    Sad to see you leaving early...

    From "Aha" to "Oh shit" we are sharing everything on our journey.
    Enter your email address to stay up to date with the latest news.
    Holler Box