This is the sixth day of my participation in Gwen Challenge
CSS extension language Sass
The most mature, stable, and powerful professional CSS extension language in the world!
Install Sass and Compass
Sass is based on The Ruby language, so you need to install Ruby before installing sass. (Note: There is no need to install Ruby on MAC!)
To install SASS on Windows, you need to install Ruby first. Download Ruby from the official website and install it. Check Add Ruby Executables to your PATH to Add system environment variables during installation. The diagram below:
Revision 67798 [x64-mingw32]Copy the codeThe previous installation is successful. But we need to replace the gem source because of the intermittent interruption of the domestic network.
Use a newer version of RubyGems if possible, 2.6.x or higher is recommended.
Gem update --system gem -v 3.0.3Copy the code// Delete and replace the original gem source gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ // Print whether gem sources -l is successfully replaced https://gems.ruby-china.com # make sure only gems.ruby-china.comCopy the codeIf you use Gemfile and Bundler (e.g., Rails projects) you can use Bundler’s Gem source code mirroring command.
bundle config mirror.https://rubygems.org https://gems.ruby-china.com
Copy the codeThis way you don’t have to change the source of your Gemfile.
The source 'https://rubygems.org/' gem 'rails',' 4.2.5 '...Copy the codeSSL certificate error
Normally, you won’t encounter SSL certificate errors unless you install Ruby incorrectly.
If you encounter SSL certificate problems that you cannot resolve, please modify ~/.gemrc to add ssl_verify_mode: 0 so that RubyGems can ignore SSL certificate errors.
---
:sources:
- https://gems.ruby-china.com
:ssl_verify_mode: 0
Copy the codeIf you are concerned about the security of Gem downloads, please install Ruby and OpenSSL correctly. It is recommended to use this RVM installation script to install Ruby when deploying Linux servers.
Other instructions
Bundler::GemspecError: Could not read gem at /home/xxx/. RVM /gems/ ruy-2.1.8 / Cache/Rugged rugged-0.23.3. Gem. This kind of error is caused by the network. The bad file was downloaded to the local, please delete the file directly.
Sass installation
Ruby comes with a system called RubyGems for installing Ruby-based software. We can use this system to easily install Sass and Compass. To install the latest versions of Sass and Compass, you need to type the following command:
/ Install sudo gem install sass gem install compassCopy the codeDuring each installation, you will see the following output:
Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installedCopy the codeOnce the installation is complete, you should verify that the application is properly installed on your computer by running the following command:
sass -v
Sass 3.x.x (Selective Steve)
compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
Copy the codeThe following commands are commonly used to update the sass, view the version, and run the sass help command:
Sass gem update sass // Check the sASS version sass -v // Check the SASS help sass -hCopy the codeCompile sass
There are many ways to compile sASS, Such as command line compilation mode, Sublime plug-in Sass-build, compilation software Koala, front-end automation software CodeKit, Grunt to create front-end automation workflow Grunt – SASS, Gulp to create front-end automation workflow gulp-Ruby-Sass, etc.
Command line compilation;
CSS // Sass --watch input. SCSS :output. CSS // If you have a lot of sass files in the directory, you can also tell sass to listen for the whole directory: sass --watch app/sass:public/stylesheetsCopy the codeCommand-line compilation configuration options;
You can run the sass -v command to view configuration options, such as layout of the CSS after compiling, generation of debug maps, and enabling debugging information. We usually use two –style –sourcemap.
Sass --watch input. SCSS :output. CSS --style compact SCSS :output. CSS --style expanded --sourcemap // Enable debugging information sass --watch input.scss:output.css --debug-infoCopy the code–style indicates the layout format of the parsed CSS. Sass has four built-in compilation formats: NestedexpandedCompact ‘ ‘compressed. Sourcemap Enables sourcemAP debugging. When sourcemap debugging is enabled, a file with the suffix.css.map is generated. Four kinds of compilation and typesetting demonstration;
/ uncompiled styles. box {width: 300px; height: 400px; &-title { height: 30px; line-height: 30px; }}Copy the codeNested compiler typesetting format
/* Command line content */ sass style.scss:style.css --style nested /* compiled style */.box {width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }Copy the codeExpanded Compiles typesetting format
/* Command line content */ sass style.scss:style.css --style expanded /* Compiled style */. Box {width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }Copy the codeCompact compiles typesetting format
Sass style.scss:style.css --style compact /* height: 400px; } .box-title { height: 30px; line-height: 30px; }Copy the codeCompressed compiles typesetting format
Sass style.scss:style.css --style compressed /* style compressed */. Box {width:300px; height:400px}.box-title{height:30px; line-height:30px}Copy the code