Front-end CSS framework Sass Use tutorial

First, what is sass

Sass is a kind of CSS development tool, which provides many convenient writing, greatly saves the designer's time, makes the CSS development, becomes simple and maintainable.

This paper summarizes the main usage of sass. My goal is that with this article, the general use of the day will not need to see the official documents.

Second, installation and use

2.1 Installation

Sass is written in the Ruby language, but the syntax of the two is not related. If you don't know Ruby, you'll still use it. Just have to install Ruby before installing sass.

Assuming you have Ruby installed, enter the following command at the command line:

Gem Install Sass

Then, you can use it.

2.2 Use

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

Sass's official website provides an on-line converter. You can go there and try running the various examples below.

Three, basic usage

3.1 Variables

Sass allows the use of variables, with all variables starting with $.

$blue: #1875e7;

div {
Color: $blue;
}

If a variable needs to be embedded in a string, it must be written in #{}.

$side: Left;

. rounded {
border-#{$side}-radius:5px;
}

3.2 Calculation function

SASS allows you to use a calculation in your code:

Body {
Margin: (14PX/2);
top:50px + 100px;
Right: $var * 10%;
}

3.3 Nesting

Sass allow selectors to be nested. For example, the following CSS code:

Div H1 {
color:red;
}

Can be written as:

div {
Hi {
color:red;
}
}

Attributes can also be nested, such as the Border-color property, which can be written as:

p {
border: {
color:red;
}
}

Note that a colon must be appended to the border.

Within a nested code block, you can use & to reference the parent element. For example, A:hover pseudo-class, can be written as:

A
&:hover {color: #ffb3ff;}
}

3.4 Notes

Sass A total of two annotation styles.

The standard CSS Comment/* Comment * * will persist to the compiled file.

Single-line comments//comment, reserved only in Sass source files, are omitted after compilation.

Add an exclamation point to/* to indicate that this is an "important note." This line of comments is retained even in compression mode compilation, and can often be used to declare copyright information.

/*!
Important Notes!
*/

Iv. Reuse of code

4.1 Inheritance

SASS allows a selector to inherit from another selector. For example, existing Class1:

. Class1 {
border:1px solid #ddd;
}

Class2 to inherit Class1, use the @extend command:

. class2 {
@extend. Class1;
font-size:120%;
}

4.2 Mixin

Mixin is a bit like the C-language macro, which is a code block that can be reused.

Use the @mixin command to define a block of code.

@mixin Left {
Float:left;
margin-left:10px;
}

Use the @include command to invoke this mixin.

div {
@include left;
}

The power of mixin is that you can specify parameters and default values.

@mixin Left ($value: 10px) {
Float:left;
Margin-right: $value;
}

When used, add parameters as needed:

div {
@include left (20px);
}

The following is an example of a mixin that is used to generate a browser prefix.

@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 called as follows:

#navbar li {@include rounded (top, left);}

#footer {@include rounded (top, left, 5px);}

4.3 Color functions

SASS provides a number of built-in color functions to generate series colors.

Lighten (#cc3, 10%)//#d6d65c
Darken (#cc3, 10%)//#a3a329
Grayscale (#cc3)//#808080
Complement (#cc3)//#33c

4.4 Inserting files

@import command to insert an external file.

@import "Path/filename.scss";

If you insert a. css file, it is equivalent to the import command for the CSS.

@import "Foo.css";

V. Advanced usage

5.1 article statements

@if can be used to determine:

p {
@if 1 + 1 = = 2 {border:1px solid;}
@if 5 < 3 {border:2px dotted;}
}

The @else command is also available:

@if lightness ($color) > 30% {
　　　　
} @else {
Background-color: #fff;
}

5.2 Loop Statements

The sass supports A 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, which acts like for:

@each $member in A, B, C, D {
. #{$member} {
Background-image:url ("/image/#{$member}.jpg");
}
}

5.3 Custom Functions

Sass allows users to write their own functions.

@function double ($n) {
@return $n * 2;
}

#sidebar {
Width:double (5px);
}

Original address: http://www.ruanyifeng.com/blog/2012/06/sass.html

Front-end CSS Framework Sass use tutorial (GO)