What is Dart Sass?

Dart Sass is the primary implementation of Sass, a popular CSS preprocessor. Sass adds features like variables, nested rules, mixins, and more, making your CSS more maintainable and easier to write.

Setting Up Dart Sass

1. Install Dart Sass: You can install Dart Sass via npm. If you don’t have Node.js and npm installed, download them from Node.js.

npm install -g sass

1. Create a Project Directory: Create a new directory for your project and navigate into it.

mkdir my-sass-project cd my-sass-project

1. Create a Sass File: Create a .scss file (e.g., styles.scss).

// styles.scss $primary-color: #3498db; $padding: 10px; body { font-family: Arial, sans-serif; background-color: $primary-color; padding: $padding; h1 { color: white; text-align: center; } p { color: darken($primary-color, 10%); padding: $padding; } }

1. Compile Sass to CSS: To compile your Sass file to CSS, run the following command:

sass styles.scss styles.css 

1. This command will generate a styles.css file with the compiled CSS.

Basic Sass Features

1. Variables: Variables allow you to store values that you can reuse throughout your stylesheet.

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font-family: $font-stack; color: $primary-color; }

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

nav { ul { list-style: none; padding: 0; li { display: inline; margin-right: 15px; a { text-decoration: none; color: $primary-color; } } } }

1. Mixins: Mixins let you create reusable styles that can accept arguments.

@mixin rounded-corners($radius) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } .box { @include rounded-corners(10px); background-color: $primary-color; padding: $padding; }

1. Functions: Sass has built-in functions, and you can also create your own.

@function calculate-rem($pixels) { @return $pixels / 16 * 1rem; } body { font-size: calculate-rem(16px); }

Watching for Changes

To automatically compile Sass whenever you make changes, use the --watch flag:

sass --watch styles.scss:styles.css