Location>code7788 >text

StarBlog blog Vue front-end development notes: (3) SASS and SCSS

Popularity：94 ℃/2024-12-13 22:11:34

preamble

This project requires the use of SCSS to write page styles.

Sass (Syntactically Awesome Stylesheets) is a css preprocessor, and SCSS is aSass It is fully compatible with CSS and extends the functionality of CSS, making style writing more efficient, flexible and modular.

For beginners, SCSS is fully CSS-compatible, which means a near-zero learning curve. the SCSS syntax is just that: it's just CSS with a few features added, which is important when you're working with inexperienced developers: they can start coding very quickly and don't need to learn Sass first.

In addition, SCSS is alsoeasy-to-read of the world, because it is semantically, not symbolically, represented. When you read the@mixinyou'll know it's a mixin declaration; when you see the@include You're quoting a mixin, he didn't use any abbreviations, and it's all very clear when you read it out loud.

Also, almost all Sass tools, plugins and demos are now developed based on SCSS syntax. As time passes, SCSS will become the preferred choice. For example, you'd be hard pressed to find a plugin that highlights Sass indentation syntax, and usually only SCSS ones are available.

This article introduces the use of SCSS as an example of writing a 404 page.

About SCSS

Advantages of SCSS over CSS

  • modularization: through variables, nesting and importing (@import maybe@use) Organize style files.
  • maintainability: Reduce duplicate code for easy maintenance and modification.
  • compatibility: SCSS files are fully compatible with CSS files, allowing for progressive transitions.
  • powerful: Support for logical judgment (@if), circular (@for), and functions (@function) and other features.

Related resources

  • SASS official website./

  • Chinese Documentation./docs/

Main Functions of SCSS

Variables

Variables can be used to store values such as color, font size, etc. for easy reuse and management.

// SCSS
$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

Translated CSS.

body {
  color: #3498db;
  font-size: 16px;
}

Nesting

SCSS supports nested syntax to make the style hierarchy clearer and closer to the HTML structure.

// SCSS
nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}

Translated CSS.

nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  color: #3498db;
}

Mix (Mixins)

Similar to a function, a piece of generic style can be defined and called in multiple places.

// SCSS
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

Translated CSS.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Inheritance

utilization@extend to reuse existing styles.

// SCSS
.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend .btn;
  background-color: $primary-color;
  color: white;
}

Translated CSS.

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}
.btn-primary {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
  color: white;
}

Operations

SCSS supports basic math operations such as addition, subtraction, multiplication and division.

// SCSS
$base-padding: 10px;

.box {
  padding: $base-padding * 2;
  margin: $base-padding / 2;
}

Translated CSS.

.box {
  padding: 20px;
  margin: 5px;
}

mounting

For many years, node-sass has been the dominant choice in the JavaScript community. It's really just a wrapper for libsass in the node environment, and libsass does the actual work of compiling sass files.

Many of the problems encountered in the process of using node-sass are actually caused by libsass, which is implemented in C/C++. A common problem is that the installation of node-sass often fails, or if you switch versions, you find that node-sass needs to be reinstalled before it can be used. If you install node-sass in docker, node-sass builds may fail due to missing dependencies, or if you can't download the binary files needed for node-sass due to network problems in China.

Officially, sass now uses dart-sass as the main implementation of sass:

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

So the installation command is as follows:

yarn add sass --dev
yarn add [email protected] --dev

Note that Vue2 uses webpack version 3.6.0, so here's thesass-loader Must use version 7.1.0

(I've beenTypeError: is not a function (This error took a long time to fix.)

configure

compilerbuild/ Papersmodule innerrules tag, add the following configuration

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
}

Usage

There is Webpack usage

This project is based on Vue SPA (single page application), after writing the code after the webpack packaged into HTML, CSS, JavaScript, the previous steps also configured SASS, you can write SCSS directly in the .vue file.

Just set lang to scss in the page code style tag.

<style scoped lang="scss">

</style>

Here's what I've changed.src/views/ web page

<template>
  <div class="site-wrapper site-page--not-found">
    <div class="site-content__wrapper">
      <div class="site-content">
        <h2 class="not-found-title">404</h2>
        <p class="not-found-desc">pardon me！The page you visited<em>lose touch with</em>particle placed after each item in a list of examples ...</p>
        <el-button @click="$(-1)">Back to previous page</el-button>
        <el-button type="primary" class="not-found-btn-gohome" @click="$('/')">Go to home page</el-button>
      </div>
    </div>
  </div>
</template>

The style code is as follows

.-page--not-found {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  .site-content__wrapper {
    padding: 0;
    margin: 0;
    background-color: #fff;
  }

  .site-content {
    position: fixed;
    top: 15%;
    left: 50%;
    z-index: 2;
    padding: 30px;
    text-align: center;
    transform: translate(-50%, 0);
  }

  .not-found-title {
    margin: 20px 0 15px;
    font-size: 8em;
    font-weight: 500;
    color: rgb(55, 71, 79);
  }

  .not-found-desc {
    margin: 0 0 30px;
    font-size: 26px;
    text-transform: uppercase;
    color: rgb(118, 131, 143);

    > em {
      font-style: normal;
      color: #ee8145;
    }
  }

  .not-found-btn-gohome {
    margin-left: 30px;
  }
}

The effect of the page after the change

Good, you can call it a day.

Usage without Webpack

If you want to use SCSS on its own, you can call the SASS compilation directly:

sass

Then in the HTML, introduce the

<link rel="stylesheet" href="">

bibliography

  • What is the relationship between Sass and SCSS? -What is the relationship between Sass and SCSS?/a/1190000005646206
  • VueCli3 project node-sass switched to dart-sass -/a/1190000039801096
  • VueCli2 project node-sass switched to dart-sass -/post/6844903842945957896
<Previous