Sass File Basics

Sass file name is. scss

Variable can be set

Sass Style

$fontStack: Heletica,sans-serif;
$primaryColor: #333;

body{
Font-family: $fontStack;
Color: $primaryColor;
}

CSS style
//-----------------------------------
Body {
Font-family:helvetica, Sans-serif;
Color: #333;
}

nested- sass can be nested in a selector, representing a hierarchical relationship that looks elegant and neat

//sass style
//----------------------- ------------
nav {
ul {
margin:0;
padding:0;
List-style:none;
"
li {
Display:inline-block;

a {
Display:block;
padding:6px 12px;
Text-decoration:none;

}

CSS style
//-----------------------------------
Nav ul {
margin:0;
padding:0;
List-style:none;
}

Nav Li {
Display:inline-block;
}

Nav a {
Display:block;
PADDING:6PX 12px;
Text-decoration:none;
}

Import- sass such as import other sass files, and finally compiled into a CSS file, better than the pure CSS @import

Sass Style
//-----------------------------------
_reset.scss

Html
Body
Ul
OL {
margin:0;
padding:0;
}

Sass Style
//-----------------------------------
Base.scss

@import ' Reset ';

Body {
font-size:100% Helvetica, Sans-serif;
Background-color: #efefef;
}

HTML, body, UL, ol {
margin:0;
padding:0;
}

Body {
Background-color: #efefef;
font-size:100% Helvetica, Sans-serif;
}

Mixin-sass can be used to define some code snippets in Mixin, and to pass parameters to facilitate later calls based on requirements. This processing of CSS3 prefixes is easy and convenient.

Sass Style
//-----------------------------------
@mixin box-sizing ($sizing) {
-webkit-box-sizing: $sizing;
-moz-box-sizing: $sizing;
Box-sizing: $sizing;
}
. box-border{
border:1px solid #ccc;
@include box-sizing (Border-box);
}

CSS style
//-----------------------------------
. box-border {
border:1px solid #ccc;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
}

Extension/Inheritance-the sass can be @extend to implement code combination declarations, which makes the code superior and concise.

Sass Style
//-----------------------------------
. message {
border:1px solid #ccc;
padding:10px;
Color: #333;
}

. Success {
@extend. Message;
Border-color:green;
}

. Error {
@extend. Message;
border-color:red;
}

. Warning {
@extend. Message;
Border-color:yellow;
}

CSS style
//-----------------------------------
. Message,. Success,. Error,. Warning {
border:1px solid #cccccc;
padding:10px;
Color: #333;
}

. Success {
Border-color:green;
}

. Error {
border-color:red;
}

. Warning {
Border-color:yellow;
}

Operations-SASS can perform simple subtraction operations, etc.

Sass Style
//-----------------------------------
. container {width:100%;}

Article[role= "Main"] {
Float:left;
width:600px/960px * 100%;
}

Aside[role= "Complimentary"] {
Float:right;
width:300px/960px * 100%;
}

CSS style
//-----------------------------------
. container {
width:100%;
}

Article[role= "Main"] {
Float:left;
width:62.5%;
}

Aside[role= "Complimentary"] {
Float:right;
width:31.25%;
}

Color-SASS integrates a number of color functions, making it easier to transform colors.

Sass Style
//-----------------------------------
$linkColor: #08c;
A
Text-decoration:none;
Color: $linkColor;
&:hover{
Color:darken ($linkColor, 10%);
}
}

CSS style
//-----------------------------------
A
Text-decoration:none;
Color: #0088cc;
}
a:hover {
Color: #006699;
}

Sass File Basics