. How to Scss and how to convert to. css

Scss Visualization Tool: http://koala-app.com/index-zh.html

Scss explanation Address: http://www.cnblogs.com/adine/archive/2012/12/18/2823669.html

Official website: http://sass-lang.com/

Installation link

1. Install Rubyinstaller-2.0.0-p481-x64.exe always Next

2. After the installation is complete, find this brother in Ruby in the Start menu and open the command prompt.

3. Install sass with gem install sass, gem install compass (SASS, after sass, and then research)

Compile link

Sass files are ordinary text files, which can be directly used in CSS syntax. The file suffix name is. scss, meaning sassy CSS.

The following command allows you to display the CSS code for the. scss file conversion on the screen. (Assume that the file name is test.) ）

Sass Test.scss

If you want to save the displayed results as a file, followed by a. css file name.

Sass Test.scss Test.css

Sass offers four compile-style options:

* Nested: Nested indentation of the CSS code, which is the default value.

* Expanded: No indented, extended CSS code.

* Compact: A concise form of CSS code.

* Compressed: Compressed CSS code.

In a production environment, the last option is generally used.

Sass--style Compressed Test.sass test.css

You can also let sass listen to a file or directory, and once the source file changes, the compiled version is automatically generated.

Watch a file

Sass--watch Input.scss:output.css

Watch a Directory

Sass--watch App/sass:public/stylesheets

$color _333: #333333;
$line _height24:24px;

. text{
Line-height: $line _height24;
margin: $line _HEIGHT24/2;
Color: $color _333;
}

. bg{
Background: $color _333;
}

. container{
Color: #ccc;
h1{font-size:18px;}
ul{
position:relative;
margin-top:15px;
li{
Background: #ddd;
}
}
}

@mixin float{
. clear{
Clear:both;
}
. left{
Clear:left;
}
. right{
Clear:right;
}
}

div{
@include float
}
/* Inherit */
. relative{
Display:block;
position:relative;
}
. title{
@extend. relative;
font-size:18px;
Color: #fff;
}

$selector _name: ' Clear ';
/* Mixed Operation */
@mixin clearfix{
#{$selector _name}{
color:red;
}
}

body{
@include Clearfix;
}
/* plus minus multiplication operation */
$the-border:1px;
$base-color: #111;
$red: #842210;

#header {
color: $base-color*3;
Border-left: $the-border;
Border-right: $the-border*2;
}
#footer {
Color: $base-color+ #003300;
Border-color:desaturate ($red, 10%);
}
/* Scope */
$color _11: #00c;/* Blue */
#header_11 {
$color _11: #c00;/* Red */
border:1px solid $color _11; /* Red Border */
}
#footer_11 {
border:1px solid $color _11;/* Blue border */
}