An Explanation of Sass and How it Works

An Explanation of Sass and How it WorksGina ValdezBlockedUnblockFollowFollowingFeb 1Let’s get one thing straight.

Although they are often confused because of their similarities, SCSS and Sass are not the same.

SCSS stands for Syntactically Awesome Stylesheets, otherwise known as Sassy CSS for short.

Although Sass and SCSS are similar in that they briefly give an overview of CSS Preprocessing, they have different technical syntaxes.

SCSS followed the development of Sass, and since it’s an extension of CSS, every valid stylesheet is a valid SCSS file with the same meaning.

It even understands most CSS vendor-specific syntaxes.

It is in support of the idea of DRY (don’t repeat yourself) code as opposed to WET code (write every time).

Here are the key differences between the two more in-depth:SASSSASS is a program written in Ruby — the technology or programming language that SASS is built on — that assembles CSS style sheets.

Uses indentation instead of brackets to indicate nesting of selectorsNew lines rather than semicolons to separate propertiesEmploys language extensions (i.

e.

variables, nested rules, and mixins)SCSSIncorporates some commonly used features:ImportVariablesNestingMixinsOperatorsSCSS Features: In-Depth Explanations on How to Use ThemOne of the major benefits of SCSS is that you can separate your code into more manageable, logical chunks.

SCSS allows you the ability to separate your CSS according to different elements or components — buttons, lists, forms, colors, typography, etc.

 — to make them easier to work with and keep your stylesheets nice and DRY.

There are different file and folder structures that you can follow, such as The Sass Way or following Brad Frost’s Atomic Design.

The Sass Way of organizing a project would be by modules, partials, and anything related to vendors (third party CSS).

Modules would be anything like mixins, functions, and variables.

Partials would be things like the navigation, footer, buttons, typography, input fields, etc.

Lastly, the vendor directory would be dedicated to any third-party CSS like any prepackaged components, such as color pickers or JQuery UI.

In terms of Brad Frost’s Atomic Design, although it’s a great way to organize your elements or components, it should be noted that it creates additional complexity when it comes to using that methodology for organizing and developing your code.

The reason behind that is because identifying and classifying atoms are straightforward, but determining which elements or components classify as molecules and organisms are where it could lead to one big, confusing, frustrating mess between you and your teammates.

As far as achieving business goals with this method especially within large teams, the idea of having constant discussions to agree upon which is considered which is also quite draining and time consuming.

@importAllows you to literally import styles from another stylesheet file into your current file, so you can separate your styles into logical filesExample// inside main.

scss@import 'typography.

css';@import 'header.

css';@import 'footer.

css'; $variablesDefined with a $ symbol, are assigned a value, and allow for global changes to all of your files.

For example, let’s say that a client or a project calls for a different color, it’s as simple as updating the variable value and it will be applied everywhere else that you’ve used it.

The hardest part is naming your variable, as you can be as general or generic as you’d like.

Example// Colors$c-yellow: #fff03b;$c-yellow-dark: #ffe21d;// Fonts$f-serif: 'Playfair Display', Georgia, Times, 'Times New Roman', serif; nestingAllows for better organization of your styles and limits repetition.

Although this is a great feature, the rule is to only nest 3 child selectors, as it will aid in preventing confusion from nesting too many elements@mixinsAllows you to define a reusable and configurable block of CSS.

Mixins are made up of:The @mixin directive, where you can also give them variablesCSS SelectorsExample@mixin background-opts ($pos: center, $size: cover, $rep: no-repeat, $color: $c-beige) { background-position: $pos; background-size: $size; background-repeat: $rep; background-color: $color;}OperatorsAllows you to do math.

Examplesnav { height: $mobile-nav-height; @media (min-width:768px) { height: $mobile-nav-height * 2; } }So, how do we Sass?Using Terminal in a new tab, ensure that you are in the right directory that contains your stylesheets.

Type this in Terminal on the command line and hit “enter”: sass –watch nameofyourfile.

scss:nameofyourfile.

cssNOTE: This command means that we are telling Terminal to “watch” for any changes that we make to our Sass file that we want reflected in CSS when it gets compiled.

By “compiled” we mean rendered in a language our browsers understand.

Using the @import feature, ensure that your Sass files are connected to one and only one stylesheet.

It should like something like this below:// Base // CSS Reset @import “reset”; // Navigation@import “navigation”;@import “footer”; // Variables@import “color”;@import “typography”; // Helpers@import “helpers”;@import “mixins”; // Structure@import “form”;@import “lists”;@import “grid”;Once you have completed importing all of your Sass files to one base file, use the @import feature again to attach that file to your main stylesheet that your site uses.

.

. More details

Leave a Reply