What does sass mean when vue creates a project?

The sass used by vue when creating the project is to strengthen the css auxiliary tool and is an extension of css; sass is a css preprocessing language written in the buby language and has the same strict indentation style as html , compared with CSS writing specifications, curly braces and semicolons are not used.

The operating environment of this tutorial: Windows 10 system, Vue3 version, Dell G3 computer.

What does sass mean when vue creates a project?

Sass (Syntactically Awesome StyleSheets) is a CSS preprocessing language written in buby language. It has the same strict indentation style as HTML. It is very different from the CSS writing specifications. It does not use curly braces and semicolons, so it is not widely accepted.

Sass is an auxiliary tool to enhance CSS. It is an extension of CSS. It adds variables, nested rules, mixins, inheritance ( extend), import (inline imports) and other advanced functions, these extensions make CSS more powerful and elegant. Using Sass and Sass style libraries (such as Compass) helps to better organize and manage style files and develop projects more efficiently. The suffix is ​​.sass.

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

Expand knowledge:

vue-cli3 provides two ways to integrate sass/scss

• Choose when creating a project Preprocessor sass

• Manually install sass-loader

##Method 1: Select preprocessor sass## when creating a vue project #Use vue-cli3 to create a vue project

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

Move the up and down keys to select Manually select features, which means manually selecting the configuration of the created project.

Press the enter key to enter the next step, the display is as follows:

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Move the up and down keys and click the space bar at CSS Pre-processors to select it, indicating that a css pre-processing tool is required.

After that, perform the css preprocessing tool operation, the display is as follows:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

Select Sass/SCSS (with node-sass) as our CSS preprocessor.

After completion, the project will automatically install sass-loader and node-sass dependencies for us.

Method 2: Manual installation

If the CSS preprocessor is not selected when creating the project, we can also manually install sass-loader and node-sass to integrate scss

npm install -D sass-loader node-sass

Using sass

At this point we only need to specify lang as scss in style:

<style>
$color = red;
</style>

vue service clie will automatically use the sass-loader we installed as scss content Loader.

[Related recommendations: "

vue.js Tutorial

"]

The above is the detailed content of What does sass mean when vue creates a project?. For more information, please follow other related articles on the PHP Chinese website!