Sass environment / grammar / mobile priority project practice

Time:2021-4-19

Share the learning achievements of SASS in the past two days.

Click the figure below to watch the video tutorial

Sass environment / grammar / mobile priority project practice

This paper is divided into three parts, which are the following

environment

Install sass tool, very simple, refer to the official document

The link is herehttps://www.sasscss.com/install

This paper mainly introduces the development environment. Take vscode as an example,

I have installed the following plug-ins:

  • Sass, providing sass syntax highlighting
  • Sass live compile automatically generates CSS plug-ins, which can automatically trigger the generation when local files are modified
  • Live server enables a simple HTTP service to provide quick preview of HTML pages

If you need to modify the plug-in configuration, press the shortcut keycommand + ,, open vscode configuration.

lookupsass liveFind the corresponding configuration and add personal configuration:

"liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "./dist"
        }
    ],

grammar

This paper mainly introduces the most commonly used basic syntax in the actual project.

Grammatical format

Sass mainly supports two syntax formats, one is the.scss.sassAs a suffix.

The. SCSS syntax is similar to the CSS syntax
The. Sass syntax is simpler, but it’s a bit cumbersome to switch

Therefore, the. SCSS syntax is recommended

variable

If the style design is regarded as a black box, the variable is the open interface of the black box.

The way to define variables is very simple.

$background-color: red;

Nesting syntax

div h1 {
  color : red;
}

The format of nested syntax is

div {
    h1 {
      color : red;
    }
} 

Sub file and sub file import

In order to make sass preprocess and distinguish the main CSS file from the sub CSS file, the name of the file is added_Prefix.

Not carried out_Prefixed CSS files are not treated as child files.

@When importing sub files, it is not necessary to explicitly set_Prefix and.scssor.sasssuffix. These will be automatically supplemented in @ import.

Public module @ mixins and public module introduction @ include

@Mixins is similar to the macro definition in C language. The use of repeated code in CSS can be simplified by defining @ mixins.

There are two common ways to use it

  • Clear content
@mixin border {
   border: 1px solid blue;
}

div {
    @include border;
}

The generated code is:

div {
    border: 1px solid blue;
}
  • Ambiguous content
@mixin mobile {
  @media screen and (max-width: 768px) {
    @content;
  }
}

body {
    background-color: blue;
}

@include mobile {
    body {
        background-color: red;
    }
}

The generated code is as follows:

body {
    background-color: blue;
}

@media screen and (max-width: 768px) {
    body {
        background-color: red;
    }
}

This writing method is often used in responsive style design.

As for the parameter passing of @ mixin module is very simple, please refer to relevant documents.

Function operation

Function operation, mainly divided into:

  • Nested Function

    • string manipulation
    • Digital processing
    • List processing
    • Map processing
    • Selector function
    • Color processing function
    • Functional auxiliary function
  • Custom function
@function double($n) {
  @return $n * 2;
}

#top {
  width: double(5px);
}

However, even if sass provides rich function operations, we must remember that:

Sass is a preprocessing language, its execution phase is in the programming and compilation phase.

Some functions that want to realize the dynamic change of runtime style are not what sass can do.

About the runtime style technology, you can refer tostyled-componentsThis project.

Practice project

In the end, a real mobile phone priority sass project is how to achieve, let’s practice the whole process.

Specific project address:gitdigg/sass-demo

read the whole passage

To read the full text, please visitSass environment / grammar / mobile priority project practice

Video tutorial, please click the animation.

Recommended Today

Flex layout and scale calculation

1、 Introduction to flex layout Flex isFlexible BoxIt means“Flexible layout“, used to provide maximum flexibility for box models. Any containerCan be specified as flex layout, that is,Inline elements can also be set to flex layout。 //Set the block level element div to flex layout div { display: flex; } //Set the in line element span […]