Vue-cli 3.0 Scaffolding, From Getting Started to Giving up (III)

Study for you worry so much ah. (To be continued.)

teasing

Now that we’ve created the project, don’t we just want to write code anymore? So where do we start? Generally speaking, the front-end project is determined by the HTML + CSS style we can see, and then add JS to form a complete page. I’m not going to talk about HTML, the basic stuff. The beauty of the page style is controlled by CSS.

Take a look at the basic CSS.

Doesn’t it look good? If we have hundreds of tags on a page, and it’s contained, and the UI needs to be complex, raw CSS won’t be enough. Because too cumbersome is not conducive to maintenance. There are two CSS extension languages popping up, crack crack, one is sass and the other is less. Let’s just look at Sass for now.

Sass reference

The installation

First, to install in our project, use two commands

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

If the installation fails, you can configure Taobao image

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
Copy the code

The tool used is vscode, which has to be configured in Settings

 "files.associations": {
        "*.vue": "vue"
    },
Copy the code

This way the tool will not report errors to Sass. Let’s take a look at the sass code

Div contains a P tag and a DIV tag, and then the secondary div has text and a P tag. You can see the hierarchy of our tags according to CSS.

Usage and common grammar

In vUE scaffolding, use sASS syntax style with rel=”stylesheet/ SCSS “lang=” SCSS”.

1. Use variables

One of the most important features of SASS that people benefit from is that it introduces variables to CSS. You can define recurring CSS property values as variables and refer to them by their names without having to write the property values repeatedly. Or, for attributes that have only been used once, you can give them an easy-to-understand variable name that lets people know at a glance what the value is for. Sass uses the $symbol to identify variables, such as $COLOR1: red in the code above; $height1: 100px;

2. Variable declarations

$color-black:#000000;

Color -black is the name of the variable, which you can name if you can easily identify it, and #000000 is the value assigned to the variable. The advantage of this is that you can use color-black in any CSS block on the page.

3. Variable references

Variables can be used wherever a standard CSS property value (such as 1px or bold) exists. When CSS is generated, variables are replaced by their values.

Separate variable names with hyphens or underscores

Variable names in SASS can be the same as property and selector names in CSS, including hyphens and underscores. It’s all down to personal preference, sass doesn’t want to force anyone to use either underlined or underlined, so the two are compatible. Variables declared with a hyphen can be referenced with an underscore and vice versa.

$link-color: blue;
a {
  color: $link_color; } // a {color: blue; }Copy the code

In this example, $link_color and $link_color refer to the same variable. In fact, for most of SASS, underlined and underlined content is interchangeable, including the naming of mixers and SASS functions in addition to variables. But in SASS, pure CSS parts, such as class names, IDS, or attribute names, do not communicate. So all names are either – or _ when used

4. Nest CSS rules

Repeating write selectors in CSS is annoying. If you want to write a bunch of styles that point to the same block on the page, you often need to write the same ID over and over again:

#content div h1 { color: #333 }
#content div p {margin-bottom: 1.4em}
#content p { background-color: #EEE }
Copy the code

This example, like the one written at the beginning of this article, supports multiple levels of nesting.

Sass provides a special structure &

5. The parent selector identifier &

Normally, sass unlocks a nested rule by concatenating the parent selector (#content) to the front of the child selector with a space. One of the most common cases is when you write a pseudo-class called hover for an element like a link, and you don’t want to connect as a descendant selector. For example, sASS does not work in this case:

div a {
  color: blue;
  :hover { color: red }
}
Copy the code

This means that the color: red rule will be applied to the selector div A :hover, and all children linked within the div element will turn red when hover is used. This is not true! You want to apply this rule to hyperlinks themselves, and descendant selectors don’t do it for you.

Workaround: Use a special SASS selector, the parent selector. When using nested rules, the parent selector provides better control over how nested rules are unwrapped. It’s just a simple ampersand and can be placed anywhere the selector is available, such as where h1 is placed.

Take a CSS from someone’s code. So CSS was written like this. One layer and its lower layer seem unrelated but related.

In :link, :visited, :hover, :active, etc., can be nested with &

6. Group selector nesting

What is a group selector ↓↓↓↓

.div h1,  .div h2,  .div h3 {
  color: red;
}
Copy the code

If you don’t have a lot of CSS like this, it’s convenient, but if you have more nesting and more complexity, it’s a problem. Sass also provides us with a simpler solution.

.div{ h1,h2,h3{ color:red; }}Copy the code

So sass will compile the top code into the top code.

ul,nav{ a{ color:blue; }}Copy the code

That’s another way to write it. Especially when the nesting level is two or even three levels higher, writing a group selector once is much less work than normal CSS writing.

There are pros and cons, and you need to pay special attention to the nested CSS generated by group selectors. While sass makes your stylesheets look small, the actual CSS generated can be very large, which slows down your site.