First put a logo town building, EMMM…

CSS preprocessing technology, and the type of introduction

  • What is CSS preprocessing technology
    • The CSS preprocessor defines a new language. The basic idea is to add programming features to CSS in a specialized programming language, generate files with CSS as the target, and then simply code in that language.
    • In plain English, “A CSS preprocessor uses a specialized programming language to style a Web page and then compiles it into a normal CSS file for your project. For example, you can use variables, simple logic programs, functions (such as variable $main-color), and other basic programming language features in CSS. Make your CSS cleaner, more adaptable, more readable, easier to maintain, and more.
  • Types of CSS preprocessing technologies
    • Sass (SCSS)
    • LESS
    • Stylus
    • Turbine
    • Swithch CSS
    • CSS Cacheer
    • DT CSS

With so many CSS preprocessors, “Which CSS preprocessor should I choose?” As a result, it’s been a hot topic on the Internet recently, and it’s been debated in tech forums such as the Nuggets.

By far one of the best CSS preprocessor languagesSass,LESS 和 StylusMost excellent, discussed also much, today xiaobian will introduce CSS preprocessor Sass. I’m sure the siege lions will eat their porridge

Cut the crap and get to the code

Variables related to

Local variables are similar in meaning to local variables in javascript (what is a local variable?…..)

Nested related

Use & to increase the selector weight

Property nesting is the splitting of properties into objects. The object contains key and value

Placeholder placeholder

Use % to declare placeholders and @extend to apply them

Placeholders are so powerful that if only placeholders are declared without references, no code will be generated when editing is complete

Expansion and Inheritance

After saying that placeholder, hurriedly take small book to extend and inheritance also write down

You can see that @extend is used in both the placeholder and inheritance

The difference is that placeholders do not generate valid code, whereas when inheriting a parent class, the parent class is valid code

Mix instruction mixins

Blended instructions are called a variety of things, such as mixed instructions, macros. Xiaobian in accordance with the name of Vue, called it mixed

Blending instructions can be used flexibly by setting parameters

If you don’t want to pass parameters sometimes, set a default parameter at declaration time

SassScript grammar

The process directive @if

Control instruction is an advanced function that is not often used in daily writing and is mainly used in conjunction with mixins

Circular directive @for

Loop directive @while

Loop directive @each

Use of functions

String function

Digital function

The list of functions

The color function

The @ rule in sass

@import

  • Sass extends the @import rule of CSS to allow it to import SCSS and Sass files. All imported SCSS and Sass files are merged and output a single CSS file. In addition, variables or mixins defined in the imported file can be used in the main file.
  • @import imports according to the file name. By default, it looks for Sass files and imports them directly, but, in a few cases, it is compiled to the @import rule of CSS
    • The file has a.css extension.
    • The file name starts with http://.
    • The file name is URL ().
    • @import contains any media queries.
  • If none of the above happens and the extension is.scss or.sass, a sass or SCSS file of that name is introduced. If there is no extension, Sass will try to find a file of the same name with the.scss or.sass extension and introduce it.

@media

The @media directive in Sass is as simple as the CSS rules, but it has another feature that can be nested within CSS rules. A bit like the JS bubble feature, if you use the @media directive in the style, it will bubble out

@at-root

@at-root literally means jumping out of the root element. When you have multiple layers of selectors nested and you want a selector to pop out, you can use @at-root.

@debug

@debug is used for debugging in Sass. When you use @debug in the Sass source code, the Sass code will have a Bug in the command terminal

@warn

@WARN is similar to @debug to help us debug Sass better.

@error

@error has the same functionality as @WARN and @debug.

conclusion

In everyday projects, part of the grammar is used less and is slowly ignored. Today’s summary of this article hope to help you, if you think it is useful, you can add a chicken leg to the small series (point a like, m m m m m)