【Sass/SCSS】 "Xuanyuan Sword" in preloader

This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

【Sass/SCSS】 “Xuanyuan Sword” in preloader

The blog instructions

The information involved in the article comes from the Internet collation and personal summary, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

instructions

With the development of front-end technology more and more rapid, front-end style also needs to be more close to the aesthetic of The Times, then CSS needs to undertake more work, (emphasis! It’s not sensationalism! This is the background. 😄), preloaders appear in order to disarm CSS. Yes, CSS uses weapons. Sass/SCSS — the preloader in the “Xuanyuan Sword”, this is not I help it blow, is it said, as an example below.

Official website address: SASS Chinese

What is Sass and how does it relate to SCSS

I feel it is a little confusing here, what is going on here? It is clearly SASS, but many places are written SCSS. When I search SCSS online, all the tutorials of SASS appear.

(Syntactically Awesome StyleSheets) :

Buby is a CSS preprocessor written in Buby with a strict indentation style.
This is a major departure from the CSS writing specification, which does not use curly braces and semicolons, which many front PyMs find difficult to accept.

Sass is an auxiliary tool for enhancing CSS. It is an extension of CSS. It adds variables, nested rules, mixins, extend, inline imports and other advanced functions to CSS syntax, making CSS more powerful and elegant. Using Sass and Sass style libraries (such as Compass) helps to organize style files better and develop projects more efficiently, with the suffix.sass.

Advantages: Using indentation instead of curly braces to indicate that an attribute belongs to a selector, and a newline instead of a semicolon to separate attributes, many find this easier to read and faster to write than SCSS.

SCSS Sassy (CSS) :

A CSS preprocessing language, SCSS is Sass 3 introduced new syntax, its syntax is fully compatible with CSS3, and inherited the powerful functions of Sass. That is, any standard CSS3 style sheet is a valid SCSS file with the same semantics. SCSS requires semicolons and curly braces instead of line breaks and indentation. SCSS is insensitive to whitespace and, like cSS3 syntax, the suffix is.scss.

SCSS also supports most CSS hacks and vendor-specific syntax, as well as the early IE filter syntax.

Install the Sass

You can use NPM to install Sass.

npm install -g sass
Copy the code

Sass variable

Variables are a big change. Sass variables can store strings, numbers, color values, Booleans, lists, and NULL values

The Sass variable uses the $sign

grammar

$variablename: value;
Copy the code

The sample

$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;
}
Copy the code

Convert to CSS code

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

The idea is to put the use of a variable directly into the corresponding value.

Scope of a variable

Sass variables are actually scoped. Sass variables are scoped only at the current level

$myColor: red;

h1 {
  $myColor: green;   // only available in h1, local scope
  color: $myColor;  // green
}
p {
  color: $myColor;  // red
}
Copy the code

Promote global variables

Available in Sass! The global keyword sets variables to be global

$myColor: red;

h1 {
  $myColor: green ! global;// Global scope
  color: $myColor;  // green
}

p {
  color: $myColor; // green
}
Copy the code

For Sass global variables, you can store them in one file and then include them in another file, @include, to make the code structure clear and easy to modify.

Nested rules for Sass

This is a nice thing to write about, and the most obvious addition.

nested

Just look at the difference in code

SCSS code

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

CSS code

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

I find the following kind of writing is more troublesome, mainly because the hierarchy is not obvious.

Nested properties

Some attributes can also be nested in SASS.

Some CSS properties have the same prefix, for example: font-family, font-size and font-weight, text-align, text-transform and text-overflow. These common attributes can be pulled out.

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

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

Import the file @import

In the era of component-based development, Sass is certainly rolled up, and using @import allows us to reduce CSS duplication and save development time.

grammar

@import filename;
Copy the code

The difference with CSS@import

The CSS @import directive creates an additional HTTP request each time it is invoked.

The sass@import directive includes files in CSS without additional HTTP requests.

Underscore style naming

SCSS, _partition. SCSS, _colors. SCSS, etc. But this naming is not trivial. It takes advantage of sass@import files. Keep imported files from being compiled into CSS. This style is also called Sass Partials.

Note: Do not place underlined and ununderlined files of 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 underlined files will be ignored.

Mixed @ mixin

To group CSS declarations that need to be reused in a page, you can make your code more flexible by passing variable parameters to mixins, which is useful when adding browser compatibility prefixes.

The sample

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

It doesn’t feel fancy. Yes, it’s just a block of code that can be reused by other code, and you can think of it as a public method.

@include uses interfuse

.text {
  @include important-text;
}
Copy the code

Note: Sass’s conjunction – is the same as the underscore _, i.e. @mixin important_text {} is the same as @mixin important_text {}.

Interfuse include interfuse

@mixin special-text {
 @include important-text;
 @include important-color;
}
Copy the code

Mixed transmission parameter

Blending can receive parameters.

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

.my-text {
  @include bordered(blue, 1px);  // Call mixin and pass two arguments to calculate the border
}
Copy the code

Doesn’t that make it look more like a method

Mixing variable parameters

Sometimes it is not clear how many arguments to pass into a blend, 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);
}
Copy the code

Browser prefixes use interfuse

Browser prefixes are also handy to mix in

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

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

Browser prefixes like these are a must!

@ the extend and inherit

In HTML we have a tag like this class=”button-basic button-report”, some may have many, that is longer. You can reuse your code using @extend.

grammar

The @extend directive tells Sass that the styles of one selector are inherited from another.

Using the environment

If one style is nearly identical to another, with only minor differences, @extend is used.

The sample

.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;
}
Copy the code

Code parsing

Button-report, for example, requires basic properties of. Button-basic, which can be obtained directly using @extend. button-basic, so that the reusability of the code has been greatly improved, and the structure will be better and better. Next door good friend HTML also need not eat every day “roast string” ha 😂.

Write the last words

First of all, I hope my CSS is getting better and better, and second, I hope to see pyM do the same, CSS is getting better and better. After all, Sass is a “Xuanyuan Sword”.

Thank you

Universal network

As well as hard-working self, personal blog, GitHub test, GitHub

Public number – return child mo, small procedure – small return blog

【Sass/SCSS】 “Xuanyuan Sword” in preloader