SCSS quick start

Before using SCSS, we need to know Sass, SCSS what is the difference?

SCSS is a new syntax introduced by Sass 3, which is fully compatible with CSS3 and inherits the power of Sass. That is, any standard CSS3 style sheet is a valid SCSS file with the same semantics, officially interpreted.

Traditional CSS files are missing concepts such as variables, resulting in a lot of repetitive code to write. My habit of writing JS is to think about whether the repeated code can be drawn out into a reusable method, but there is no such concept as variable function in CSS, then I found a CSS precompiler – SCSS.

SCSS has the characteristics of simple and easy to use, so let’s start writing the first SCSS file.

The preparatory work

At the top: For those of you who may not be familiar with front-end deployment, I uploaded the code to Github for those who need to download it and compare the SCSS code with the compiled CSS code.

SCSS needs to be compiled into CSS to be recognized by the browser. I only make a small demo here, so I do not use vue-CLI, and directly use Webpack for compilation.

First install csS-Loader, style-Loader, Node-sass, and sass-Loader.

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev
Copy the code

Then add the loader to the webpack.config.js configuration file. The complete configuration is shown below.

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js',
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, './dist')
    },
	module: {
		rules: [
            {
                test: /\.scss/,
                use: ['style-loader'.'css-loader'.'sass-loader'] {},test: /\.vue$/,
				use: 'vue-loader'
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}

Copy the code

Create an app.scss file and import it in the entry file.

import './App.scss';
Copy the code

We will write the SCSS code in app.scss later.

The official start of the

1. Use variables

Variables in SCSS begin with $.

$border-color:#aaa; // Declare variables
.container {
$border-width:1px;
    border:$border-width solid $border-color; // Use variable}Copy the code

In this example, we define two variables: $border-color is a global variable outside of the braces and can be used anywhere, and $border-width is a local variable declared inside a. Container and can only be used inside a. Container.

Compiled CSS

.container {
    border:1px solid #aaa; // Use variables
}
Copy the code

We can think of SCSS as a template engine that replaces variables with their values during compilation.

< span style = “box-sizing: border-box; border-color :# CCC” style = “box-sizing: border-box; border-color :# CCC” style = “box-sizing: border-box; border-color :# CCC” style = “box-sizing: border-box;

$border-color:#aaa; // Declare variables
$border_color:#ccc;
.container {
    $border-width:1px;
    border:$border-width solid $border-color; CSS. Container {border:1px solid#ccc; // Use variables
}
Copy the code

In this case, we want to know

(1) If a variable name uses a hyphen or an underscore, it all points to the same variable.

(2) Variable declarations defined after (2) are ignored, but the assignment is performed, just like var declarations in ES5.

2. Nested rules

Let’s start with an example.

/*css*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
}

.container ul:after {
    display:block;
    content:"";
    clear:both;
}

.container ul li {
    float:left;
}

.container ul li>a {
    display:inline-block;
    padding:6px 12px;
}
Copy the code

This is an example of making the list elements horizontally. We have written a lot of code in this example,.container many times. I will abbreviate the above example using SCSS.

2.1 Nested selectors

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
}

.container ul:after {
    display:block;
    content:"";
    clear:both;
}
Copy the code

Here we can extract the common parent element.

2.2 Nested parent selector

SCSS provides a selector to select the parent element of the current element, represented by &. Let’s continue to simplify the code with the parent selector.

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
    
    &:after {
        display:block;
        content:""; clear:both; }}Copy the code

Note that the parent selector can only be used inside the nest, otherwise SCSS will report an error if it cannot find the parent element. In various pseudo-class selectors, the parent selector is very common.

2.3 Nested combination selectors

You can write any CSS code in a nested rule, including group selectors (,), child selectors (>), adjacent group selectors (+), total group selectors (~), and so on.

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
        
        >a {
            display:inline-block;
            padding:6px 12px;
        }
    }
    
    &:after {
        display:block;
        content:""; clear:both; }}Copy the code

The child selector can be written to the right of the outer selector (as in the following example) or to the left of the inner selector (as in the above example).

li >{ a { display:inline-block; padding:6px 12px; }}Copy the code

Be careful when writing to the right of the outer selector, it will apply to all nested selectors, try not to write this way, I think it is not very extensible, and error prone.

2.4 Nesting properties

Let’s take an example

/*css*/
li {
    border:1px solid #aaa;
    border-left:0;
    border-right:0;
}
Copy the code

In this example we only need two borders, which we’ll rewrite using SCSS.

/*scss*/
li {
    border:1px solid #aaa {left:0; right:0; }}Copy the code

SCSS recognizes an attribute as an attribute when it ends with a semicolon and as a nested attribute when it ends with a brace. The rule is to connect the external attribute and the internal attribute to form a new attribute by a hyphen.

3. Import the SCSS file

In large projects, there is usually more than one CSS file. The CSS provides the @import command to import another CSS file. The browser loads the corresponding CSS file only after the @import statement is executed, which deteriorates the page performance. The @import command in SCSS is different from the native command, which will be explained later.

3.1 Priority of imported variables – Default value of variables

/*App1.scss*/
$border-color:#aaa; // Declare variables@import App2.scss; // Import another SCSS file. Container {border:1px solid$border-color; // Use the variable} /* app2.scss */$border-color:#ccc; // Declare variablesContainer {border:1px solid; /* generate CSS file */. Container {border:1px solid#ccc; // Use variables
}
Copy the code

This may not be what we want. Sometimes we want to introduce a style that doesn’t change the original style, so we can use the default value of the variable.

/*App1.scss*/
$border-color:#aaa; // Declare variables@import App2.scss; // Import another SCSS file. Container {border:1px solid$border-color; // Use the variable} /* app2.scss */$border-color:#ccc ! default; // Declare variablesContainer {border:1px solid; /* generate CSS file */. Container {border:1px solid#aaa; // Use variables
}
Copy the code

SCSS: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color: $border-color

! Default can only be used in variables.

3.2 Nested Import

In the previous example we imported app2.scss globally, now we are adding something to app2.scss and importing it locally.

/*App1.scss*/
$border-color:#aaa; // Declare variables.container { @import App2.scss; // Import another SCSS file border:1px solid$border-color; // Use the variable} /* app2.scss */$border-color:#ccc ! default; // Declare variablesp { margin:0; Container {border:1px solid; /* Generate CSS file */. Container {border:1px solid#aaa; // Use variables
}
.container p {
    margin:0;
}
Copy the code

As you can see, everything in app2.scss is written directly to the. Container selector in app1.scss.

3.3 Using native @import

We said we don’t use native @import, but in some cases we have to use native @import, SCSS handles this for us, just import the CSS file.

@import 'App.css';
Copy the code

4. Comment

There are two kinds of comments in SCSS

(1) /* comments */: These comments are retained in the compiled CSS file.

(2) // Comments: This comment is not retained in the compiled CSS file.

5. Mixer (function)

5.1 Declaring a function

Declare a function with the @mixin directive, take a look at your CSS files, and consider using a mixer to extract and reuse duplicate code snippets.

@mixin border-radius{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color:red;
}
Copy the code

Properties within the scope of the mixer are all return values. In addition, you can pass parameters to functions.

@mixin get-border-radius($border-radius,$color){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
Copy the code

You can also set the default values for the mixer.

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
Copy the code

5.2 Using Functions

The keyword for using the function is @include

.container {
    border:1px solid #aaa;@include get-border-radius; // If no parameter is passed, the default value 5px @include get-border-radius(10px,blue); // If no parameter is passed, the default value 5px @include get-border-radius(10px,blue); Container {border:1px solid */. Container {border:1px solid */ container {border:1px solid */#aaa;@include get-border-radius; // If no parameter is passed, use the default value 5px @include get-border-radius($color:blue,$border-radius:10px); / / the ginseng}Copy the code

You might think that you can simply write the mixer as a class, but when you write a class, you need to use it in the HTML file, and when you use the mixer, you don’t need to use the class in the HTML file to achieve reuse effect.

Tips: You can write any SCSS code in the mixer.

6. Inheritance

Inheritance is a feature of object-oriented languages and can greatly reduce the amount of code.

6.1 Define inherited styles

%border-style {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code

Use % to define an inherited style, similar to an abstract class in a static language.

6.2 Inheritance Styles

Inheritance is accomplished by using the keyword @extend.

.container {
	@extend %border-style;
}
Copy the code

The above example does not show the difference between a mixer and inheritance, so the next example shows the difference between inheritance and a mixer.

.container { @extend %border-style; color:red; }.container1 {// extend another selector @extend.container; }Copy the code

7. Summary

Through the introduction of this article, I believe that you have a certain understanding of SCSS, but the light is not to learn, I suggest that you have a strong spirit, first forced to use the project is currently doing, familiar with a period of time, naturally can write high-quality SCSS code.

Other 8.

8.1 the operator

SCSS provides standard arithmetic operators such as +, -, *, /, and %.

/*SCSS*/ width: 600px / 960px * 100%; /* compiled CSS*/ width: 62.5%;Copy the code

In addition, SCSS has many functions, you can first use the current knowledge and then learn it is not late.

9. Ac

If this article helps you, feel good if you want to point a Star. github.com/lizijie123