Sass introduction, installation environment, Sass syntax format and compilation debugging, sass syntax

Sass introduction, installation environment, Sass syntax format and compilation debugging, sass syntax

What is a CSS Preprocessor?

Definition:The CSS Preprocessor defines a new language. Its basic idea is to use a special programming language to add some programming features for CSS and use CSS as the target to generate files, then developers only need to use this language for coding.

Using variables, simple logic programs, functions, and other basic features in CSS can make your CSS more concise, adaptable, and readable, easier code maintenance and many other benefits.

CSS Preprocessor language, for example:
Sass (SCSS)
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

So far, among the many excellent CSS preprocessorsSass,LESSAndStylusExcellent

 

 

What is Sass?
Sass is a meta language higher than CSS. It can be used to clearly and structurally describe file styles and has more powerful functions than common CSS.
Sass provides more concise and elegant syntaxes and multiple features to create a maintained and managed style sheet.

 

 

What is the difference between Sass and SCSS?
Sass and SCSS are actually the same thing, which we usually call Sass. The differences between the two are as follows:
1. Different file extensions. Sass uses the ". sass" suffix as the extension, while SCSS uses the ". scss" suffix as the extension.
2. Syntax writing methods are different. Sass is written based on strict indented syntax rules without braces ({}) and semicolons (;), SCSS syntax writing is similar to CSS syntax writing.
Sass syntax

1 $ font-stack: Helvetica, sans-serif // defines variable 2 $ primary-color: #333 // defines variable 3 body4 font: 100% $ font-stack5 color: $ primary-color

SCSS syntax

1 $font-stack: Helvetica, sans-serif;2 $primary-color: #333;3 body {4     font: 100% $font-stack;5     color: $primary-color;6 }

Compiled CSS

1 body {2     font: 100% Helvetica, sans-serif;3     color: #333;4 }

 

 

 

Is Sass/SCSS much inferior to pure CSS?
There are differences between Sass and CSS writing:
There are indeed some differences between Sass and CSS writing. Because Sass is written based on Ruby, it continues Ruby writing standards. Sass does not contain braces or semicolons, but is controlled by strict indentation. For example:
Sass Syntax:

body    color: #fff    background: #f36

In CSS, we write like this:

body{    color:#fff;    background:#f36;}

There is no difference between SCSS and CSS:
There is no difference between SCSS and CSS, which is also one of the reasons why Sass became more popular. To put it simply, you can change your current. CSS file to. scss.

 

 

 

Sass installation (for windows)

To install Ruby on a Windows platform, you must first have the Ruby installation package. The Ruby official website (http://rubyinstaller.org/downloads) downloads the desired Ruby version.

After downloading the Ruby installation file, you can install Ruby according to the installation steps of the application software. During the installation process, we recommend that you install it on the C drive and select the second option during the installation process (If this option is not selected, the Ruby environment cannot be found during compilation ), as shown in:

After Ruby is installed, find the newly installed Ruby in the Start menu and start the Ruby Command Control Panel, as shown in:

After installing Ruby on your computer, you can install Sass.

 Install Sass using commands

Open the command terminal on your computer and enter the following command:

gem install sass

Note: If you are using Mac, you may need to add "sudo" before the preceding command to install it properly:

sudo gem install sass

 

 

Sass and updates

How can I check whether Sass is successfully installed?

sass -v

Update Sass

gem update sass

Uninstall (delete) Sass

gem uninstall sass

 

 

 

Sass Compilation

Using Sass for development is also a reference to the ".css file in the project. Sass is just a preprocessing tool that helps you do things in advance. Only when you need it will it be effective.

There are multiple methods for Sass Compilation:

• Command Compilation
• GUI tool Compilation
• Automated Compilation

 

Command Compilation

Command compilation refers to using the command terminal on your computer to compile Sass by entering the Sass command. This compilation method is the most direct and simplest method. Because you only need to enter the following in your command terminal:

Single file Compilation:

Sass <path of the Sass file to be compiled>/style. scss: <path of the CSS file to be output>/style.css

Multi-file Compilation:

sass sass/:css/

Disadvantages and solutions:

In the actual compilation process, you will find that the above command can only be compiled at one time. Every time you save the ". scss" file, you have to execute this command again. This operation is too troublesome. In fact, another method is to enable"Watch"Function, so that you can automatically monitor the code changes as long as your code is modified with any warranty, and compile it directly for you:

Sass -- watch <path of the Sass file to be compiled>/style. scss: <path of the CSS file to be output>/style.css

Example:

Single file conversion command

sass style.scss style.css

Single file listening command

sass --watch style.scss:style.css

Folder listening command

sass --watch sassstyle:stylesheets

We generally use -- style, -- sourcemap, -- debug-info, and so on.

sass --watch style.scss:style.css --style compactsass --watch style.scss:style.css --sourcemapsass --watch style.scss:style.css --style expanded --sourcemapsass --watch style.scss:style.css --debug-info

-- Style indicates the parsed css format. There are four values: nested output mode, expanded output mode, compact output mode, and compressed output mode.

-- Sourcemap indicates that sourcemap debugging is enabled. After sourcemaploud is enabled, a file named .css. map will be generated.

-- Debug-info indicates that debug information is enabled. After upgrade to 3.3.0, this debug-info will be unavailable because sourcemap is more advanced.

 

Css after four styles are generated:

 1 // nested 2 #main { 3   color: #fff; 4   background-color: #000;  5 } 6   #main p { 7     width: 10em;  8 } 9 .huge {10   font-size: 10em;11   font-weight: bold;12   text-decoration: underline;13 }14 // expanded15 #main {16   color: #fff;17   background-color: #000;18 }19 #main p {20   width: 10em;21 }22 .huge {23   font-size: 10em;24   font-weight: bold;25   text-decoration: underline;26 }27 // compact28 #main { color: #fff; background-color: #000; }29 #main p { width: 10em; }30 .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }31 // compressed32 #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

 

 

I used koala to compile Sass through GUI.

In comparison, the following two are recommended:

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

The koala tool http://koala-app.com/index-zh.htmlsass file is ending with .scss. After the creation, you need to drag the css file to the software, so that you can convert sass to css. sass does not support Chinese characters. Koala => rubygems => sass => lib => sass => engine. rb Engine. rb open and add Encoding. default_external = Encoding. find ('utf-8 ')
Sass configuration. Generally, the output can be expanded.

 

 

Automated Compilation

 

1. Grunt configures Sample Code Compiled by Sass

 1 module.exports = function(grunt) { 2     grunt.initConfig({ 3         pkg: grunt.file.readJSON('package.json'), 4         sass: { 5             dist: { 6                 files: { 7                     'style/style.css' : 'sass/style.scss' 8                 } 9             }10         },11         watch: {12             css: {13                 files: '**/*.scss',14                 tasks: ['sass']15             }16         }17     });18     grunt.loadNpmTasks('grunt-contrib-sass');19     grunt.loadNpmTasks('grunt-contrib-watch');20     grunt.registerTask('default',['watch']);21 }

 

2. Configure sample code for Sass compilation in Gulp

 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass'); 3  4 gulp.task('sass', function () { 5     gulp.src('./scss/*.scss') 6         .pipe(sass()) 7         .pipe(gulp.dest('./css')); 8 }); 9 10 gulp.task('watch', function() {11     gulp.watch('scss/*.scss', ['sass']);12 });13 14 gulp.task('default', ['sass','watch']);

Never usedGrunt,GulpPut two cases here for further research