[Sass/SCSS] "Xuanyuan Sword" in the preloader

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

With the rapid development of front-end technology, the front-end style needs to be closer to the aesthetics of the times, so CSS needs to take on more work, (emphasis! This is not sensational! This is the background of preaching. 😄), in order to give CSS Going up, the preloader appeared, yes, CSS used a weapon. Sass/SCSS-the "Xuanyuan Sword" in the preloader. I didn't help it to blow this, but it said by itself. Take the picture below as an example.

Official website address: SASS Chinese website

What is Sass and what is its relationship with SCSS

It feels a bit convoluted here. What's going on here, obviously it is SASS, but SCSS is written in many places, and all the tutorials on SCSS on the Internet are SaSS tutorials.

Sass (Syntactically Awesome StyleSheets)：

It is a CSS preprocessing language written by Buby language, has strict indentation style .
There is a big discrepancy with the css writing specification, without curly braces and semicolons is , which makes it difficult for many front-end Pyms to accept.
Sass is an auxiliary tool to strengthen CSS. It is an extension of CSS. It adds variables, nested rules, mixins, extend, Import (inline imports) and other advanced features, these extensions make CSS more powerful and elegant. Using Sass and Sass style libraries (such as Compass) helps to better organize and manage style files and develop projects more efficiently. The suffix is .sass.

Advantages: Use "indent" instead of "curly braces" to indicate that the attribute belongs to a certain selector, and "line break" instead of "semicolon" to separate attributes. Many people think that this is easier to read and write faster than SCSS.

SCSS (Sassy CSS)：

A CSS preprocessing language, SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. In other words, any standard CSS3 style sheet is a valid SCSS file with the same semantics. SCSS requires semicolons and curly braces instead of line and indentation 1619d1712916d8. SCSS is not sensitive to blank symbols. in fact the same syntax as css3, and its suffixes are respectively .scss.

In addition, SCSS also supports most CSS hacks and browser-specific syntax (vendor-specific syntax), as well as early IE filter writing.

Install Sass

You can use npm to install Sass.

npm install -g sass

Sass variables

Variables are a relatively big change. Sass variables can store strings, numbers, color values, Boolean values, lists, and null values.

Sass variables use the $ symbol

grammar

$variablename: value;

Example

$base-font: Helvetica, sans-serif;
$my-color: red;
$my-font-size: 18px;

body {
  font-family: $base-font;
  font-size: $my-color;
  color: $y-font-size;
}

Convert to CSS code

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

In fact, the use of variables is directly put into the corresponding value.

Variable scope

Sass variables actually have scope, and the scope of Sass variables can only be effective at the current level

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;  // green
}
p {
  color: $myColor;  // red
}

Promote global variables

In Sass, you can use the !global keyword to set the variable to be global

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;  // green
}

p {
  color: $myColor; //  green
}

For Sass global variables, you can use a file to store it, and then other files @include to contain the file, so that the code structure is clear and the modification is more convenient.

Sass's nesting rules

This is a good thing for us to write, and it is also the most obvious addition.

Nested

Look at the difference in the code to understand

scss code

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css code

nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  color: #FFFFFF;
}

I found that the following writing method is more troublesome, mainly because the level performance is not obvious.

Nested attributes

Some attributes can also be nested in sass.

Some CSS properties have the same prefix, such as font-family, font-size and font-weight, text-align, text-transform and text-overflow. These public attributes can be extracted.

// scss
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

// css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

Import file @import

In the era of component development, Sass must of course be rolled up. Using @import allows us to reduce CSS repetitive code and save development time.

grammar

@import filename;

Difference with CSS@import

The CSS @import directive will create an additional HTTP request every time it is called.

The Sass @import directive includes the file in the CSS without requiring an additional HTTP request.

Underscore style naming

Sass's underscore division naming, I believe you will find a lot of _partial.scss after reading other people’s open source code, similar to 0619d171291bc3, _colors.scss , but this kind of naming is by no means idle, it just takes advantage of Sass @import to import files. Let the imported files not be compiled into CSS. This style is also called Sass Partials .

Note: Please do not place the underlined and non-underlined files with the same name in the same directory. For example, _colors.scss and colors.scss cannot exist in the same directory at the same time, otherwise the underlined files will be ignored.

Mix @mixin

Used to group CSS declarations that need to be reused in the page. You can pass variable parameters to Mixin to make the code more flexible. This feature is very useful when adding browser compatibility prefixes.

Example

@mixin important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

It doesn't feel tall, yes, it is actually a code block that can be reused by other codes. You can treat it as a public method.

@include use mixin

.text {
  @include important-text;
}

Note: Sass's connection symbol-is the same as the underscore symbol _, that is, @mixin important-text {} and @mixin important_text {} are the same mixin.

Mixin

@mixin special-text {
 @include important-text;
 @include important-color;
}

Mixing in and passing parameters

Mixin can receive parameters.

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.my-text {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数，计算边框
}

Does this look more like a method?

Mix in variable parameters

Sometimes it is not sure how many parameters to pass in a mixin, you can use ... .

@mixin box-shadow($shadows...) {
   -moz-box-shadow: $shadows;
   -webkit-box-shadow: $shadows;
   box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

Browser prefix use mixin

Browser prefixes are also very convenient to use mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

A browser prefix like similar is simply a necessity!

@extend and inheritance

In HTML, is class="button-basic button-report" written like this for a tag of ours? There may be many, so it will be longer. You can use @extend to reuse the code.

grammar

The @extend directive tells Sass that the style of one selector is inherited from another selector.

Use environment

If one style is almost the same as another style with only a few differences, use @extend.

Example

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Code analysis

Like .button-report, you need to use the basic properties of .button-basic, you can directly use @extend .button-basic to get it, so that the reusability of the code will be greatly improved, and the structure will become more and more. The better, HTML, my good friend next door, doesn’t have to eat "skewers" every day 😂.

Written at the end

First of all, I hope that my CSS is getting better and better, and secondly, I hope to see the same pym as me, and that CSS is getting better and better. After all, Sass is "Xuanyuan Sword" (Does Less double out?)

thanks

Universal network
And the hardworking self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[Sass/SCSS] "Xuanyuan Sword" in the preloader