MaraPython

Appearance

Alowree Xu2025-07-14
686
4.2m
Get...

Getting Started with SCSS ​

SCSS (Sassy CSS) is a powerful CSS preprocessor that adds features like variables, nesting, and mixins to standard CSS, making your stylesheets more maintainable, scalable, and organized.

Which Sass Implementation to Use? ​

There are three main implementations of Sass, but the choice is clear:

  • Dart Sass: This is the primary and official implementation. It's actively maintained, receives new features first, and is the standard for all modern projects.
  • LibSass: A C/C++ implementation that was once popular for its speed (used by node-sass). It is now deprecated and lags behind Dart Sass in features.
  • Ruby Sass: The original implementation. It is also deprecated and has been for many years.

Conclusion: For any new project, you should use Dart Sass.

The best practice for using Sass in a modern web project is to install it locally and use npm scripts to compile your code.

1. Local Installation ​

Installing Sass on a per-project basis prevents version conflicts and makes your project self-contained.

First, navigate to your project's root directory and ensure you have a package.json file. If not, create one:

sh
npm init -y

Next, install Dart Sass as a development dependency. It's a tool for your development process, not for the final production code that runs in the browser.

sh
npm install sass --save-dev

2. The Core Process ​

The development workflow with Sass involves three main steps:

  1. Write Code: You will write all your styles in .scss files. You no longer edit .css files directly.
  2. Compile: You run a command to compile your .scss source file into a standard .css file that browsers can read.
  3. Link CSS: In your HTML file, you link to the compiled .css file, just as you normally would.

3. Project Setup and Compilation ​

Let's walk through a typical project structure.

Step 1: Create Your SCSS File ​

Organize your source files in a dedicated directory, for example, scss/.

my-project/
└── scss/
    └── main.scss

Now, you can write SCSS code with features like variables and nesting.

scss/main.scss:

scss
// Define variables for reusable values
$primary-color: #007bff;
$padding: 15px;

body {
  font-family: sans-serif;
}

// Use nesting to write cleaner, more organized rules
nav {
  background-color: $primary-color;
  padding: $padding;

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

  li {
    display: inline-block;
    margin-right: 20px;
  }

  a {
    color: white;
    text-decoration: none;

    // The '&' refers to the parent selector, 'a'
    &:hover {
      text-decoration: underline;
    }
  }
}

Step 2: Configure npm Scripts for Compilation ​

To make compilation easy, add scripts to your package.json file.

package.json:

json
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "compile:css": "sass scss/main.scss css/style.css",
    "watch:css": "sass --watch scss/main.scss css/style.css"
  },
  "devDependencies": {
    "sass": "^1.77.2"
  }
}
  • "compile:css": A one-time command that compiles scss/main.scss to css/style.css.
  • "watch:css": The most useful command for development. It automatically watches for changes in your .scss file and recompiles it every time you save.

Step 3: Run the Compiler ​

Now, you can use the scripts from your terminal:

  • To compile the CSS once:
    sh
    npm run compile:css
  • To start the automatic watcher during development:
    sh
    npm run watch:css

Running either command will generate the compiled style.css file in a css/ directory.

Generated css/style.css:

css
body {
  font-family: sans-serif;
}

nav {
  background-color: #007bff;
  padding: 15px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
  margin-right: 20px;
}
nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}

Finally, link the output css/style.css file in your index.html. The browser only ever interacts with the compiled CSS.

index.html:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass Project</title>
  <!-- Link to the COMPILED CSS file -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>
最近更新