http://www.ruanyifeng.com/blog/2012/06/sass.html
First, what is SASS
SASS is a CSS development tool, provides a number of convenient writing, saving time designers, making CSS development, easier and maintainable.
This paper summarizes the main uses of SASS. My goal is, with this article, the daily general use do not need to see the official documentation of.
Second, the installation and use
2.1 Installation
SASS is written in Ruby, but the syntax of the two does not matter. Do not know Ruby, still use. Just have to install Ruby , then install the SASS.
Assuming you have installed Ruby, then enter the following command line:
gem install sass
You can then use.
2.2
SASS file is a plain text file, which can be used directly CSS syntax. File extension is .scss, meaning Sassy CSS.
The following command can display conversion file .scss css code on the screen. (Assuming that a file named test.)
sass test.scss
If you want to save the results to a file, back talk to a .css file name display
sass test.scss test.css
SASS provides four compiler style options:
* Nested: nest css code indentation, which is the default.
* Expanded: not indented, extended css code.
* Compact: css code simple format.
* Compressed: css code compression.
Production environment, generally use the last option.
sass --style compressed test.sass test.css
You can also let SASS monitor a file or directory, once the source file has changed, it automatically generates compiled version.
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS's official website, provides an online converter . You can be there and try to run the following various examples.
Third, the basic usage
3.1 Variable
SASS allows the use of variable, all variables that begin with $.
$blue : #1875e7;
div {
color : $blue;
}
If you need to set in among the string variable, you must need to write into the # {}.
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 Calculation Functions
SASS code allows the use of formula:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 Nesting
SASS selector allows nesting. For example, the following CSS code:
div h1 {
color : red;
}
It can be written as:
div {
hi {
color:red;
}
}
Properties can also be nested, such border-color attributes, can be written as:
p {
border: {
color: red;
}
}
Note that the border must be added behind the colon.
In a nested block, $ referenced parent element may be used. For example a: hover pseudo-class, can be written as:
a {
&:hover { color: #ffb3ff; }
}
3.4 Notes
SASS There are two kinds of comments styles.
Standard CSS comment / * comment * /, will be retained to file compiled.
Single-line comment // comment, leaving only the SASS source files, compiled after being omitted.
Fourth, code reuse
4.1 Inheritance
SASS allows a selector, the selector inherits from another. For example, the existing class1:
.class1 {
border: 1px solid #ddd;
}
class2 to inherit class1, then use @extend command:
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin somewhat like C language macro (macro), code blocks can be reused.
Use @mixin command, defined in a block.
@mixin left {
float: left;
margin-left: 10px;
}
Use @include command, calling the mixin.
div {
@include left;
}
The power of a mixin is that you can specify parameters and default values.
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
When in use, according to need to add parameters:
div {
@include left(20px);
}
Below is a mixin example, the prefix used to generate the browser.
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
When used, it can be invoked as follows:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 Color function
SASS provides a number of built-in color function to generate a series of colors.
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 Insert File
@import command is used to insert an external file.
@import "path/filename.scss";
If you insert .css file, equivalent to css import command.
@import "foo.css";
V. Advanced Usage
5.1 conditional statements
@if can be used to determine:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
There @else supporting command:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2 Loops
SASS Support for loop:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
Also supports the while loop:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each command, and for similar action:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 custom function
SASS allows users to write their own functions.
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
(Finish)
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/01/08/2850454.html