1.SASS opening
1.什么是SASS(Syntactically Awesome Stylesheets Sass)?
SASS is a use of Ruby implementations, the earliest and most sophisticated CSS preprocessor, born in 2007.
It extends the CSS language, increasing the characteristic variable, Mixin (mixed), nested, function and operation, so that CSS easier to maintain and extend
2. How to learn SASS?
LESS is a CSS preprocessor using the JavaScript implementation, was born in 2009.
Since the birth of LESS later than SASS, and LESS affected Sass, so in LESS characteristics can be seen in the large number of SASS.
So just have to learn LESS equivalent to learn most of the SASS
3.LESS and SASS file extension difference
LESS end to .less
SASS end to .sass or .scss
Two different endings differences: .sass indented end instead of {} represents the hierarchy, instead of writing back the statement semicolon
{In} represents .scss hierarchy, statements need to write back the semicolon
Enterprise development is recommended at the end .scss. It is the latest wording.
Note: If the need to use the koala to compile sass file, the project directory structure (including the file name) Chinese and special characters can not appear. Otherwise it will not compile.
4.sass compilation
Because not by JS achieve, so there is no .js file compiled to help .css. Use only koala. Or package management tools
<div class="father">
<div class="son"></div>
</div>
FIG css the conventional wording:
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 300px;
background: salmon;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.son{
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
Use sass wrote:
@mixin center
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
.father
width: 300px
height: 300px
background: salmon
@include center
.son
width: 200px
height: 200px
background: brown
@include center
Use scss write
@mixin center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
width: 300px;
height: 300px;
background: salmon;
@include center;
}
.son{
width: 200px;
height: 200px;
background: brown;
@include center;
}
The 2.SASS comments
1.sass comments in
And less as
Single-line comments can not be compiled (does not appear in the compiled file)
Multi-line comments will be compiled (will appear in the compiled file)
3.SASS the variables
1.sass the variables
sass variables and less the same, just in different formats defined
less variable is defined: @ variable name: value;
sass define variables: ¥ variable name: value;
2.SASS variable characteristics
SASS and LESS variables in almost the same characteristics
2.1 definitions define coverage
2.2 Variables can be assigned to other variables
2.3 distinguish between global and local variables (access using proximity principle)
Precautions: LESS variable delay is loaded, you can use the definition of
SASS variables are not lazy loading, not after the first use of defined
4.SASS variable interpolation
1. What is a variable interpolation?
If the property value can be used as a variable
But if it is the attribute name or select a name and can not directly use variables, you must use variable interpolation format
The variable interpolation 2.SASS
The sass and less variable interpolation is also the same, but just not the same format.
Interpolation Scheme less variables: variable name} {@
Interpolation Scheme sass variables: variable name $ # {}
<div></div>
$size:200px;
$w:width;
$s:div;
# {$ S} {// variable interpolation
# {$ W}: $ size; // variable interpolation: Variable
height: $size;
background: salmon;
}
The operation 5.SASS
The 1.SASS operation?
SASS and LESS in operation, too, support the +, -, *, /
Precautions: LESS either in operation or in the SASS operations require add ()
The mixed 6.SASS
Mixed in 1.SASS
SASS and LESS in the mix, too, but a different definition format and call the format
LESS defined mixing: mixing name {name} or mixed () {}
LESS mixed call: mixing name; or a hybrid name ();.
Mixing SASS defined: @mixin mixing {Name}; or @mixin mixing name () {};
SASS mixed call: @include mixing name; or mixed @include name ();
In mixing parameters 7.SASS
Mixed in with parameters 1.SASS
LESS SASS and mixed with the same parameters in the
1.1 with no default parameter value
1.2 with default parameter values
1.3 to specify parameter assignment
<div class="box1"></div>
<div class="box2"></div>
The default parameter values without
@mixin whc($w, $h, $c){
width: $w;
height: $h;
background: $c;
}
With default parameter values
@mixin whc($w:100px, $h:100px, $c:#000){
width: $w;
height: $h;
background: $c;
}
.box1 {
/* width: 300px;
height: 300px;
background: seagreen;*/
@include whc(300px, 300px, seagreen);
}
.box2{
/* width: 200px;
height: 200px;
background: salmon;*/
//@include whc(200px, 200px, salmon);
// @ include whc (); // 1.2 with default parameter values
@include whc ($ c: blue); //1.3 to the specified parameter assignment
}
The variable parameters 8.SASS
Variable parameters 1.SASS "..."
LESS SASS variable parameters and the same also,
All because of SASS not use JS to achieve, so the arguments can not be used directly in the mix
Variable parameters must be defined by $ args ... the format and then be used by $ args
Precautions: LESS as variable parameters and must be written in the last parameter of the list
<div></div>
/*@mixin animate($name, $time, $mode, $delay){
transition: $name $time $mode $delay;
}*/
/*@mixin animate($args...){
transition: $args;
}*/
@mixin animate($name, $time, $args...){
transition: $name $time $args;
}
div{
width: 200px;
height: 200px;
background: salmon;
@include animate(all, 4s, linear, 0s)
}
div:hover{
width: 400px;
height: 400px;
background: darkcyan;
}
The SASS import other file 9.SASS
1.scss file import other file .scss
Like SASS and LESS file also supports importing other SASS file
2. Import File Other advantages:
Improve code reusability
In fact, native is also supported by CSS @import CSS import other files, but is not commonly used
The reason is not that common native @import CSS import other files,
Only performing your device will seek to download the file to the corresponding css @import, which results in the number of requests increases, particularly slow page loads up
The LESS and SASS in @import is directly imported files are copied to the current file generates a CSS, so only one request, faster
<div></div>
@import "06.scss";
div{
width: 200px;
height: 200px;
background: salmon;
@include center;
}
The built-in functions 10.SASS
The built-in functions 1.SASS
And as LESS, SASS also provides many built-in functions to facilitate our use
Details of built-in functions, see https://www.sass.hk/
In fact, it does not recommend the use of CSS to process data. CSS mainly to be used for the design style
1.1 String Functions
unquote ($ string): delete the string in quotation marks;
quote ($ string): Add quotes to a string;
To-upper-case ($ string): string lowercase to uppercase
To-lower-case ($ string): converts a string uppercase to lowercase
1.2 numerical function
percentage ($ value): The turnover number with no units to a percentage;
round ($ value): the values are rounded off, converted to a nearest integer;
ceil ($ value): rounding up;
floor ($ value): rounded down;
abs ($ value): taking the absolute value of the number;
min ($ numbers ...): find the minimum value among several values;
max ($ numbers ...): Find the maximum value among several;
random (): Gets a random number
1.3. Color function
rgb ($ red, $ green, $ blue): create a color according to the red, green, and blue values;
rgba ($ red, $ green, $ blue, $ alpha): According to create a color of red, green, blue, and transparency;
red ($ color): wherein obtaining the value from a red color;
green ($ color): wherein obtaining the value from a green color;
blue ($ color): wherein obtaining the value from a blue color;
mix ($ color-1, $ color-2, [$ weight]): mixes the two colors.
1.4. List of functions
length ($ list): returns the length of a list of values;
nth ($ list, $ n): Returns the value of a certain label specified in the list;
join ($ list1, $ list2, [$ separator]): the two columns to be connected together into a list;
append ($ list1, $ val, [$ separator]): a value on the final list;
zip ($ lists ...): will list several lists are combined into a multi-dimensional;
index ($ list, $ value): Returns the value of a position in the list of values.
2. Custom Functions:
/ * Custom function * /
@function square($num){
@return whether the $ num + $ + px;
}
div{
width: square(20);
height: 200px;
// mix: mix color
background: mix (red, blue); // built-in function
}
The hierarchy 11.SASS
The hierarchy 1.SASS
And LESS as support for nested, nested default structure will be converted into a descendant selectors
Like LESS and also support does not translate into a descendant selectors by ampersand
<div class="father">
<div class="son"></div>
</div>
.father{
width: 300px;
height: 300px;
background: salmon;
&:hover{
width: 100px;
height: 100px;
}
.son{
width: 200px;
height: 200px;
background: seagreen;
}
}
The 12.SASS inheritance
The 1.SASS inheritance
Like SASS and LESS of inheritance in inheritance, and are set by selectors to achieve, but just not the same format
Mixing and inherited differences
Mixing is a direct copy, how many how many copies will be used in place
Inheritance is through union selector, will not only keep a copy
<div class="father">
<div class="son"></div>
</div>
/ * Center can be achieved by mixing. Copied directly mixed code, on the location of the @include. After compiling there are redundant code
@mixin center () {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
.father{
@extend .center;
width: 300px;
height: 300px;
background: salmon;
// @ include center (); // centered hybrid implementation
.son{
@extend .center;
width: 200px;
height: 200px;
background: seagreen;
//@include center();
}
}
Compiled inheritance .css file:
@charset "UTF-8";
.center, .father, .father .son {// Set Selector Implementation and
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: salmon;
}
.father .son {
width: 200px;
height: 200px;
background: seagreen;
}
Judgment condition 13.SASS
Judgment condition 1.SASS
Like SASS and LESS also supports conditional, but the SASS conditional support even more thorough
SASS support
@if (conditional statement) {}
@else if (condition statement) {}
... ...
@ else (conditional statement) {}
{} In the code is executed when the SASS when the condition is not false or null
LESS and SASS as conditional statements support via>> = <<= == judgment
Note SASS does not match mode
The 14.SASS cycle
The 1.SASS cycle
SASS LESS than Niubi place lies in direct support SASS loop, and the need to mix + LESS conditions to achieve their own judgment
SASS supports two cycles, respectively, for and while loops
2.for cycle
@for $ i from the start through the end of the integers {integer}
@for $ i from the start to the end of the integers {integer}
Difference between the two through the end of the packet header, to the end of the packet header does not
3.while cycle
@while (conditional statement) {}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
the {
at the{
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: seagreen;
background: salmon;
/* &:nth-child(5){
background: sandybrown;
}
&:nth-child(6){
background: sandybrown;
}
&:nth-child(7){
background: sandybrown;
}
&:nth-child(8){
background: sandybrown;
}*/
/*
@for $i from 5 through 8{//设置5,6,7,8
@for $i from 5 to 8{//设置5,6,7
*/
$i:5;
@while($i <= 8){
&:nth-child(#{$i}){
background: sandybrown;
}
$i:$i+1;
}
}
}