Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Introduction

Posted in Sass Tutorial
Updated on May 27, 2024
By Mari Selvan
👁️ 20 - Views
⏳ 4 mins
💬 1 Comment
Sass Introduction

Photo Credit to CodeToFun

🙋 Introduction

Sass (Syntactically Awesome Style Sheets) is a powerful preprocessor scripting language that extends CSS (Cascading Style Sheets). By using Sass, you can write more maintainable, reusable, and flexible stylesheets.

Sass adds various features to CSS, such as variables, nested rules, mixins, functions, and inheritance, which streamline and enhance your CSS workflow.

🤔 What is Sass?

Sass is a CSS preprocessor, meaning it processes your Sass files and outputs standard CSS files that your web pages can use. This allows you to use a more expressive syntax and advanced features when writing your styles.

🔑 Key Features of Sass

  • Variables: Store reusable values (e.g., colors, fonts) in variables.
  • Nesting: Nest CSS selectors in a way that follows the same visual hierarchy of your HTML.
  • Partials and Import: Split your CSS into smaller, manageable files.
  • Mixins: Create reusable blocks of code that can be included in other selectors.
  • Inheritance: Share a set of CSS properties from one selector to another.
  • Operators: Perform calculations and manipulate values.

✅ Why Use Sass?

Sass offers numerous benefits that make it a preferred choice for many developers:

  • DRY Principle: Helps you adhere to the DRY (Don't Repeat Yourself) principle by allowing reuse of CSS snippets.
  • Maintainability: Makes your stylesheets easier to maintain and update.
  • Organization: Allows you to organize your CSS into smaller, reusable modules.
  • Advanced Features: Provides powerful features that are not available in regular CSS.
  • Community and Ecosystem: Extensive documentation, community support, and a rich ecosystem of plugins and frameworks.

🧱 Basic Structure of a Sass File

Sass files come in two syntaxes: the older, indented syntax (with the .sass extension) and the newer, SCSS (Sassy CSS) syntax (with the .scss extension). SCSS is more commonly used as it is fully compatible with CSS.

Example of SCSS Syntax:

scss
Copied
Copy To Clipboard
$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

📊 Variables in Sass

Variables in Sass start with a $ symbol and are used to store values that you want to reuse throughout your stylesheet.

Example:

scss
Copied
Copy To Clipboard
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

🔁 Nesting

Nesting allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Example:

scss
Copied
Copy To Clipboard
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

📥 Partials and Import

Partials are Sass files that are meant to be imported into other Sass files. They are typically named with a leading underscore (e.g., _variables.scss).

Example:

scss
Copied
Copy To Clipboard
// _variables.scss
$primary-color: #333;
$secondary-color: #666;

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

h1 {
  color: $secondary-color;
}

🌀 Mixins

Mixins allow you to create reusable chunks of CSS. You can pass in values to make them more flexible.

Example:

scss
Copied
Copy To Clipboard
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

🧬 Inheritance

Inheritance in Sass allows one selector to inherit the styles of another selector using the @extend directive.

Example:

scss
Copied
Copy To Clipboard
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; }
.error { @extend .message; }
.warning { @extend .message; }

➕ Operators

Sass supports operators for calculations, making it easy to create complex styles.

Example:

scss
Copied
Copy To Clipboard
.container {
  width: 100%;
}

.content {
  width: 600px / 960px * 100%;
}

🎉 Conclusion

Sass is a robust tool that enhances CSS by adding features that help you write cleaner, more efficient, and more manageable stylesheets. By incorporating Sass into your workflow, you can streamline your CSS development process and maintain a more organized codebase.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy