This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

** Participate in the comments can receive nuggets surrounding awards, pass by don’t miss!! Courtesy of nuggets officials, write down what you want to say 😅

Sass is introduced

Syntactically Awesome StyleSheets Sass(Syntactically Awesome StyleSheets) is a kind of CSS preprocessor designed to enhance CSS. You can write styles efficiently, and realize variables, nesting, composition, inheritance and other programming language functions.

CSS is a non-procedural language without concepts such as variables, functions, and scopes.

  • CSS requires a large amount of seemingly illogical code and high redundancy

  • Not easy to maintain and expand, difficult to reuse

  • CSS does not have great computing power

  • Non-front-end engineers often have difficulty writing well-organized and maintainable CSS code because of their lack of CSS writing experience

CSS preprocessor defines a new language, the basic idea is to use a special programming language, add some programming features to CSS, CSS as a target file, and then developers only need to use this language for CSS coding work.

“You style your Web pages in a special programming language, and the compiler converts them into normal CSS files for your project.”

About SCSS and SASS

Sass is one of the earliest CSS preprocessing languages, with more power than LESS. Written in Ruby.

The original version was strictly indented (no braces ({}) and semicolons (;)). This syntax also caused sass to be unpopular with developers at first.

Since V3, sASS has abandoned the indentation style and is fully compatible with normal CSS code, so from the third generation, SASS is also known as SCSS.

Sass 3 is Scss, short for Sassy CSS, which is a superset of CSS3 syntax, meaning that all valid CSS/CSS3 styles also apply to Sass.

To modern programming, sass is SCSS, and as such, sass is now extended to.scss (or.sass if it is an older version).

About Sass implementation

Sass/Scss actually acts as a custom rule that can be implemented in multiple languages, that is, there are multiple implementations of Sass to facilitate the writing and compilation of Sass on different servers or toolchains.

The earliest implementations of Sass were in Ruby (and the main implementation was 19 years ago), but as of March 26, 2019, there is no official support for Sass. The following is a brief introduction to Ruby Sass installation.

Dart Sass

Dart Sass is the primary implementation of Sass, which contains the latest and most complete features and can be compiled into pure JavaScript code for integration into Web development (Node toolchain, pure front-end development, etc.).

Dart Sass’s JS API is also recommended to replace Node Sass in modern Web development workflows.

LibSass and the wrapper implementation of each language

LibSass is a Sass engine implemented in C/C++. The core is its simplicity, speed, and ease of integration.

In plain English, LibSass is used to wrap in other languages for use in different development languages.

LibSass is just a library of tools. You can’t compile Sass code. You need to wrap it.

At present, almost all languages have corresponding encapsulation implementation.

  • SassC: Encapsulation of C language development
  • Go -libsass, Gosass: encapsulation implementation of go language.
  • LibSass Host:.NET.
  • Sass.js: For use in JavaScript.
  • Libsass-python: Encapsulation implementation in Python.
  • Jsass: Java encapsulation.
  • SassPHP: PHP language.
  • Lua-sass: Encapsulation of the Lua language.
  • Sass-ruby: Ruby based LibSass encapsulation.

There are also various other implementations, as described on the official website.

The installation of Sass

Method 1: Install it independently

Select the appropriate version for your system from DarT-Sass Releases, download and install it independently.

For example, darT-Sass-1.43.3-Windows-x64.zip is the latest version of Windows. After decompressing the file, add the sass.bat directory to the Path environment variable.

Dart. Exe from SRC and pass in sass.snapshot and the parameters.

This happens, and if you use Git’s bash command-line tool, you may not be able to recognize the bat file and execute it.

Can only be executed under Powershell or CMD.

To view the version of SASS:

> sass -- version 1.43.3Copy the code

Method 2: Install using NPM

Another way to install is through NPM global installation

npm install -g sass
Copy the code

Sass file compilation overview

There are many ways to compile Sass into CSS files. The most common is command line compilation. You can also use vsCode’s Live Sass Compiler, Sublime’s sass-build, koala, and LibSass packages in various languages.

Command line compilation

To compile an SCSS file directly into a CSS file:

// Single file conversion command sass input.scss:output.css // or sass input.scss output.cssCopy the code

Use: when compiling the output, do not have Spaces before or after it. That is, : follows the input SCSS file and: follows the output CSS file.

: colon command, often used to compile the input and output of a folder (all sass files in it).

Questions about the use of Spaces and colons during generation

Spaces and colons correspond to the two modes of CSS generation. In one-to-one mode (one SCSS generates one CSS), use Spaces. In many-to-many mode, for example, one folder is generated to another folder, and multiple SCSS files are generated to CSS files at the same time.

​# compile light. SCSS and dark. SCSS to light. CSS and dark. CSS.
> sass light.scss:light.css dark.scss:dark.css

​# build all SCSS in themes/ folder to CSS in public/ CSS /
$ sass themes:public/css
Copy the code

Command-line compilation configuration options

You can run sass -h or sass –help to view detailed configuration items.

Configuration options specify the layout of the compiled CSS, whether to generate a debug map, enable debug, and so on. The most common options are –style and –sourcemap.

--watchListening for file changes

Sass uses the –watch option to listen for changes to SCSS files. This way, when the content of the SCSS file changes, it is automatically compiled to CSS.

  • Listen for a single SCSS file
> sass --watch .\firstsass.scss .\firstsass1.css
Sass is watching for changes. Press Ctrl-C to stop.

Copy the code
  • Listen for the SCSS folder
> sass --watch .\scssdir\ .\cssdir\
Sass is watching forChanges.press ctrl-c to stop.compiled scssdir\my.scss to scssdir\my.css. ^C y > sass --watch scssdir:cssdir Compiled scssdir\my.css to cssdir\my.css. Sass is watchingfor changes. Press Ctrl-C to stop.

Compiled scssdir\another.scss to cssdir\another.css.
Copy the code

As you can see, using: you can specify the output path (folder), otherwise the CSS will default to be generated in the source SCSS file directory.

  • In combination with--styleListening to the
sass --watch app/sass:public/stylesheets --style=compressed
Copy the code

--styleSpecify the style of CSS

The CSS of style is expanded (default) and compressed.

There are four styles in older Ruby implementations, along with nested and Compact.

// Specify the compile format sass input.scss:output.css --style=expandedCopy the code

For example, an SCSS file looks like this:

.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px; }}Copy the code

Below, you can view the CSS format of expanded and compressed.

  1. expanded: Default value, uncompressed expanded CSS format

Separate line for each selector and declaration.

Run the following command to compile:

sass styletest.scss styletest.css --style=expanded

Sass styletest.scss styletest.css
Copy the code

Expanded A compiled style that is a standard, all-character expanded CSS format without any compression:

.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
Copy the code
  1. compressedRemove all whitespace characters and compress all CSS content into one line

Recommended CSS format in the production environment.

Run the following command to compile and output the CSS result in the command line interface:

> sass --style=compressed styletest.scss .box{width:300px; height:400px}.box-title{height:30px; line-height:30px}Copy the code

--no-source-mapAbout sourcemAP debugging

Source Map is turned on by default and generates a file with the suffix.css.map.

Sass input.scss output. CSS --no-source-map# default sass input.scss output.css --source-map
Copy the code

Sourcemap: Builds a bridge between pre-processed and post-processed code, generating.map files through which source information can be located. For JS, you can also use this to achieve breakpoint debugging!

--source-map-urlsLink to the Sass

Source-map-urls Control how source maps link Sass generated CSS back to Sass files!

Two types of links are currently supported: relative (the default) and absolute (file:// absolute path links of the protocol).

This corresponds to the value of the sources key in the generated.css.map file.

​# generate ".. /sass/styletest.scss".
> sass --source-map-urls=relative styletest.scss styletest.css

# "file:///D:/sass/styletest.scss".
> sass --source-map-urls=absolute styletest.scss styletest.css
Copy the code

Live Sass CompilerVSCode extension plug-in

SASS/SCSS files can be reloaded in real time in the browser to compile/convert to CSS files.

  1. Install the Live Sass Compiler extension.

  2. Real-time compilation and packaging

    Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

    Press F1 or ctrl+shift+P and type Live Sass: Compile Sass – Without Watch Mode to compile Sass or Scss for one time.

    Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation.

It seems that the overall effect is not great, but it is better to combine with tools such as WebPack to compile SCSS in real time when updating page content in real time, rather than using the tool alone.

Compilation in various languages

I won’t go into details in conjunction with the language’s use of the wrapper implementation of LibSass.

About the Less

When introducing Scss, it is inevitable to talk about Less. As for the advantages and disadvantages of Scss and Scss, I think there is no difference in essence. It mainly depends on personal preference.

Because they support all the functions of the “preprocessor”, they are almost the same, and the Less environment and relatively easy to use (no Ruby environment required) are not absolute advantages (for programming, this should not be a problem 😐), and Scss is fully compatible with CSS, which makes it very convenient to use. The more powerful Sass is, the more complex it is to use, and the difference in compilation speed is almost negligible.

What is the difference between Sass and less? Let’s see what the difference is.

Attached: About the use--watchBug GBK UTF-8

After normal listening, the following message is displayed, or no message is displayed:

sass --watch firstsass.scss outputfirstsass.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
Copy the code

But if the filename or path contains Chinese, may be an error (Encoding: : CompatibilityError: incompatible character encodings: GBK and utf-8).

There are many solutions, such as: do not use Chinese file name, remove the Chinese in the path; Or, add code at the top of the listening SCSS file: @charset “UTF-8”;

Sass files to monitor: (Encoding: utf-8 problems: CompatibilityError: incompatible character encodings: GBK and utf-8).

Solutions:

  1. Check whether the folder path appears in Chinese. If so, change the folder to English.
  2. Add code at the top of the listening SCSS file:@ charset "utf-8";Can.
  3. Go to the Ruby installation path and modify the engine.rb file to add the following code (after all require) :

Encoding.default_external = Encoding.find('utf-8');

Reference: blog.csdn.net/weixin_4419…

Attached: Ruby Sass installation for use

To install Ruby sass, you need to install Ruby in advance, and then use the gem to install Sass and Compass.

If you are interested in the following introduction, you can understand it, because the update and maintenance have stopped, there is no need to investigate in detail!

Install Ruby

Ruby Ruby Ruby Ruby

Click Add Ruby Executables to your PATH to Add environment variables to the system.

Check whether the installation is successful:

> < p style = "margin-bottom: 14px; margin-bottom: 14px; margin-bottom: 14pxCopy the code

Replace the gem source

Gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ check the current gem source > gem sources -l *** CURRENT SOURCES *** https://gems.ruby-china.com/Copy the code

RubyGems is a Package manager for Ruby, and gem is its admin tool command.

Gem is a standard package for managing Ruby libraries and programs that find, install, upgrade, and uninstall packages through RubyGems (such as rubygems.org/) sources.

To upgrade the RubyGems version, execute gem Update –system.

Install Sass and Compass

Ruby based Sass and Compass can be easily installed via gems.

Install the latest version of Sass and Compass:

gem install sass
gem install compass
Copy the code

After installation, confirm:

> Sass-v Compass 1.0.3 (Polaris) Copyright (C) 2008-2020 Chris Eppstein Released under the Copyright (C  MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compassCopy the code

Update the sass

gem update sass
Copy the code

reference

  • Sass website
  • Sass Chinese official website

And other information.