CSS Framework-sass

people who have studied CSS know that it is not a programming language. You can use it to develop a Web page style, but you can't program it. In other words, CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables and no conditional statements ...    

People who have studied CSS know that it is not a programming language.

You can use it to develop a Web page style, but you can't program it. In other words, CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables, there are no conditional statements, just a line of simple description, it is rather cumbersome to write.

Naturally, someone started adding programming elements to the CSS, which is called the "CSS Preprocessor" (CSS preprocessor). Its basic idea is to use a special programming language, Web page style design, and then compiled into a normal CSS file.

Various "CSS preprocessor", my own favorite sass, think it has many advantages, intend to use it to write CSS later. Here is my summary of the usage, for the development of their own reference, I believe that other people also useful.

============================================

Sass Usage Guide

Nanyi

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

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;
}
}

Properties can also be nested:

p {
border-color:red;
}

Can be written as:

p {
border: {
color:red;
}
}

Note that a colon must be appended to the border.

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.

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);
}

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 {
　　　　
}

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);
}

Finish

CSS Framework-sass