Less sass SCSS stylus of CSS preprocessor

Time:2021-12-9

Let’s ask ourselves a question: why do we need a preprocessor?
The answer is self-evident, that is, CSS itself has some disadvantages:

  • The syntax is not strong enough to be written nested, resulting in unclear style logic in the project.
  • There is no variable and logical reuse mechanism. When it is necessary to reuse code, you can only write styles repeatedly, which makes it difficult to maintain.

In order to solve the above problems, CSS preprocessor was born. The more popular ones are sass, less and stylus. Their common characteristics are:

  • Variable: improve code reusability.
    Sass: use “$” to declare variables. Variable names and values are separated by colons
    Less: use “@” to declare variables
    Stylus: directly connects the variable name and the variable value with an equal sign.
  • Scope
    Sass: its method is the worst of the three. There is no concept of global variables
    Stylus and less: it is similar to JS in that it looks up variables step by step
  • Nesting: for CSS, it is undoubtedly more perfect to express logic in a nested way.
    The processing of the three is the same here, and “&” is used to represent the parent element

Start.

The project is done in a simple react environment. The directory structure is as follows:

┣ ✈  Webpack.config.js: configuration file of webapck
┣ ✈  Package.json: ID card of dependent package
┣ ✈  Main.js: main entry file
┣ ✈  Index.html: home page
┣ ✈  App.js: app component
┗ ✈  Style: placing style sheets
    ┣✈ scss.scss
    ┣✈ stylus.styl
    ┗✈ less.less

Import style sheet from app.js file:

import React, { Component } from "react";
import "./style/less.less";
// import "./style/scss.scss";
// import "./style/stylus.styl";
export default class App extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

1、 Less

Use in webpack:

Install plug-ins:

npm install --save less less-loader

Configure the webpack.config.js file:

module.exports = {
    module: {
        rules: [{
            test: /\.[le|c]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'less-loader',
            ]
        }],
    }
};

Create less.less in the style file and enter the following:

@bgc: green;

div {
    width:100px;
    height:100px;
    background-color: @bgc;
}

npm run devRun the program, openhttp://127.0.0.1:8080/

Less sass SCSS stylus of CSS preprocessor

Use alone:
Just install less globally, and then:

lessc less.less -o css.css

You can convert the less.less file into a CSS style sheet.

2、 Sass

Use in webpack:

SCSS is a new syntax introduced by sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of sass. That is, any standard CSS3 style sheet is a valid SCSS file with the same semantics. In addition, SCSS can recognize most CSS hacks (some CSS tricks) and browser specific syntax. Therefore, SCSS is equivalent to CSS3 of sass. The running environment of SASS is ruby, but our development environment is generally based on node, so we need to install itnode-sassProvide environment, installationsass-loaderTranslate sass and SCSS to CSS.

Installation environment:

npm install sass-loader node-sass --save

Configure webpack.conifg.js

module.exports = {
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ]
        }],
    }
};

Create a new scss.scss in the style file and enter the following:

$body-color: red;

div {
    width:100px;
    height:100px;
    background-color: $body-color;
}

npm run devRun the program, openhttp://127.0.0.1:8080/

Less sass SCSS stylus of CSS preprocessor
3、 Stylus

Use in webpack:

Installation:

npm install --save stylus stylus-loader

Configure webpack.config.js

module: {
    rules: [{
        test: /\.styl$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "stylus-loader" // Compiles Sass to CSS
        }]
    }]
}

Create a new style.style in the style file and enter the following:

bgc = blue

div
    width 100px
    height 100px
    background-color bgc

stylus You don’t need to write semicolons!! No colons required!! Even curly braces can be omitted!!! Completely streaking code。 But be carefulindent, because the style identifies the selector level and the corresponding CSS style rules based on indentation. The method of defining variables is also very simple, directly using the form of variable name = variable value.

npm run devRun the program, openhttp://127.0.0.1:8080/

Less sass SCSS stylus of CSS preprocessor

Use alone:
install

npm install --save stylus

Then enter the command:

npx stylus stylus.styl -o stylus.css

You can convert the style.style file into a style sheet in the format of style.css.

Author: Xuexian Society
Link:https://www.jianshu.com/p/3c39619f1d1a
Source: developeppaper
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.