Application of SASS

Sass Simple Introduction: Sass is a door to the CSS to compile the extended language, making CSS compiler more logical and malleable

Installation and configuration of SASS

First step: Install Ruby.

Ruby's official: Http://rubyinstaller.org/downloads.

Note: 1. You should download the version that matches the system, and it is best not to download the latest version. For 64-bit operating systems, General download version 2.3.1.

2. Add the environment variable by ticking the Add Ruby executables to your paih when installing Ruby.

Step Two:

Method One: Install sass by executing the gem install sass on the cmd command line. Use Sass-v to query the version number of SASS if the version number shown proves that the sass installation was successful.

Otherwise, it needs to be installed in the following way.

Method Two: Also execute the gem sources--remove http://rubygems.org/enter in the cmd command

Gem Sources-a http://gems.ruby-china.org Enter

Gem Install sass Enter

Also need to use SASS-V to check the Sass version number

Update sass by executing the GEM update sass on the cmd command line

Step three: How to use SASS in the Webstorm compilation tool

1. Open Webstorm and configure the Sass in the following manner.

Via File-->settings-->tools-->file Watchers-----and SCSS--Arguments-

Fill in configuration information:--no-cache--update--style expended $FileName $:filenamewithoutextension$.css

Click OK.

Of course some webstorm do not need to configure, when the project to use the Sass file, you will be prompted in the upper right corner to add Sass configuration information, click Add

When compiling the Sass file, the corresponding CSS file is also monitored.

Note: The sass file and the corresponding CSS file have the same directory level, that is, in the sibling directory.

The grammatical structure of sass

Reference website: http://sass.bootcss.com/docs/sass-reference/

Here are some basic uses of SASS syntax.

1. Definition of variables:

$ variable Name: value eg: $color: #efefef;

2. Nesting syntax

&: Used to refer to the parent class eg: & &-title{}

[Email protected] syntax

Syntax structure:

@mixin name ($ parameter:, $ parameter) {

.........

}

Use the @include name ($ parameter,...) {

........

}

[Email protected] inheritance syntax

. mm {

background-color:red;

A

Text-align:center;

}

}

. mm2 {

@extend. mm;

Background-origin:border-box;

}

5. Placeholder%placeolder

%icon {

Transition:background-color ease. 2s;

margin:0.5em;

}

. error-icon{

@extend%icon;

/* error icon Specify style ... */

}

. Info-icon {

@extend%icon;

/* Information icon specifies the style ... */

}

6.if.. Else

$theme: "DDD";

. testif {

@if ($theme = = Light) {

Background-color:lightblue;

} @else if ($theme = = red) {

background-color:red;

} @else {

Background-color:black;

}

}

7 for

@for $i from 1 through 5 {

. col-#{$i} {

width:10% * $i;

}

}

8.function

$fontsize: 75

@function Pxtorem ($px) {

@return $px/$fontsize + rem;

}

. box{

Width:pxtorem (100);

}

Application of SASS