Sass.scss Simple Introduction

Recently studied sass and SCSS, clear structure, in some places is indeed strong, so wrote an introductory tutorial, about 15 minutes to understand the rationale

What is sass (CSS preprocessor)

SASS Official online is described sass, sass is a meta-language above the CSS, he can be used to clear, structured description file style, with more powerful than the normal CSS features, sass can provide more concise, more elegant syntax, A variety of features are also available to wear a maintainable and managed stylesheet.

What's the difference between SASS and SCSS?

File extension differs, Sass is extension with ". Sass" suffix, and SCSS is extension with ". SCSS" suffix

Grammar is written in a different way, Sass is written in strict indentation grammar rules, without curly braces ({}) and semicolons (;), and SCSS's syntax is very similar to the way we write CSS syntax.

Command compilation:

Sass < Sass file path to compile >/style.scss:< to output CSS file path >/style.css

Single-File monitoring commands

Sass--watch Style.scss:style.css

GUI Tools Compilation

Automated compilation Gulp

The output method of different style style

Sass--watch Style.scss:style.css--style Compact

Nested output mode nested

Expand Output Mode Expanded

Compact output mode

Compression Output Mode Compressed

$ variable

Common variables

Default variables

$color: #ccc;
$color: #000!default;

Special Variables (in general, the variables we define are property values and can be used directly, but they must be used in the form of #{$variables} If the variable is a property or in some special cases. )

1. Apply to class and attributes

2. Apply to complex attribute values

Nesting

Selector nesting

Property nesting

Pseudo-Class nesting

Example: hover

a{
color: #ff0000;
&:hover{
color: green;
}
}

Need to add & before: hover, otherwise choose a inside element hover

Mixed macro @mixin Reference @include

1. Declaring mixed macros

@mixin border ($color 1, $color 2) {
border:1px solid $color 1;
border-radius:5px;
box-shadow:4px 5px 3px 5px $color 2;
}

2. Calling mixed macros

. aa{
width:px;
height:px;
@include border ();
}

3, the parameters of the mixed macro to pass a parameter without value, such as $color1, $color 2

4, the parameter of the mixed macro parameters (the default value) can be $color1, $color 2 after the default value, such as ($color 1: #ccc, $color 2: #ddd)

Eg:

@mixin CSS3 ($attr,$val) {
-webkit-#{$attr}:$val;
-moz-#{$attr}:$val;
-ms-#{$attr}:$val;
-o-#{$attr}:$val;
#{$attr}:$val;
}
. bb{
@include CSS3 (border-radius,10px);
}

Inherit @extend

. ee{
width:px;
height:px;
@extend. BB;
}

Placeholder%placeholder @extend

%ff{
width:px;
height:px;
}
. g{
@extend%ff;
}

The style of the placeholder will take effect only after the introduction

@import Introduce another SCSS file, General introduction of public styles

Custom Function @function

@function Add ($a,$b) {
@return $a+$b;
}
. k{
width: Add (px, px);
}

Sass has the characteristic of arithmetic, can subtraction arithmetic to numeric value (for example: number, color, variable, etc.).

DataType data type

Sass-i type-of ()

1. Figures: for example, 1, 2, 13, 10px;

2. String: A quoted string or an unquoted string, such as "foo", "Bar", Baz;

3. Color: For example, Blue, #04a3f9, Rgba (255,0,0,0.5);

4. Boolean type: true, false;

5. Null value: for example, NULL;

6. Value list: separated by a space or comma, for example, 1.5em 1em 0 2em.

Function

1. Number functions: ABS (), round (), ceil (), Floor ()

2. String functions: To-upper-case (), To-lower-case (), Str-length (), Str-index ()

3. Color: RGB (), lighten (), darken ()

4. Value list: Length (), nth (), index (), append (), join ()

Comments

Annotations are extremely important for a programmer, and good annotations can help you or others read the source code. There are two ways of commenting in Sass:

1. CSS-like notation, using "/* */"

2. JavaScript-like notation, using "//"

The two differences, the former will be in the compiled CSS display, the latter in the compiled CSS will not be displayed,

Control commands for SASS

1. @if

The Trinocular judgment syntax is: if ($condition, $if _true, $if _false)

2. @for Cycle

@for $i from <start> through <end>

@for $i from <start> to <end>

3. @while Cycle

4. @each Cycle

@each $var in <list>

Sass.scss Simple Introduction