Free Code Camp 学习笔记

Sass

Syntactically Awesome Stylesheet: 多了一些css没有的功能，属于css的一个升级版，可以创建变量，有两种sass文件，一种是和css一样的格式，用分号这些来表示层级关系，以*.scss作为格式；而另一种是indented，用indentation来表示层级关系，不用分号表示，这种文件用*.sass作为格式。

1. 可以使用变量：不必重复写这些东西，还有一个好处就是dockerized，易于修改。

$main-fonts: Arial, sans-serif;
$heading-color: green;
h1 {
   color: $heading-color;
}
h2 {
   font-family: $main-fonts;
}

2. nest elements:

以前的css会出现这种写法：
.some-div-name {
    color: red;
}
.some-div-name .child-div-name {
    display: block;
}
.some-div-name .child-div-name .grand-child-name {
    background-color: black;
}
现在使用scss可以这么写：
。some-div-name {
    color: red;
    .child-div-name {
        display: block;
        .grand-child-name {
            background-color: black;
        }
    }
}

3. mixin: 这就类似于一个function， 可以带入变量，这个mixin在收到变量的情况下，会修改内部一系列的元素的value，就是一个function，入参得到后，出参给你返回一个全新的css。

@mixin mixin-name($input1, $input2, $input3, $input4) {
    -webkit-box-shadow: $input1 $input2 $input3 $input4;
    -moz-box-shadow: $input1 $input2 $input3 $input4;
    -ms-box-shadow: $input1 $input2 $input3 $input4;
    box-shadow: $input1 $input2 $input3 $input4;
}
以后在使用这个mixin的时候只需要传入四个argument就行了。方法是：
div {
    @include mixing-name(0px, 0px, 4px, #fff);
}
我们看到在code中有webkit/moz/ms/o这一类的标识符，意思是针对不同的网络浏览器，有不同的应对方法，太lowerlevel的不用了解，就是这几行代码都写上之后，你的这个css在主流的browser上都能使用。
webkit：chrome/safari
moz：firefox
o: opera
ms: microsoft internet explorer

4. @if else statements, scss可以使用if，比如说我们用mixin取一个入参，根据这个入参我们可能采用不同的css：比如说参数在1-3 之间用蓝色，其他用红色：

@mixin if-example($input) {
    @if ($input >=1 && $input <=3) {
        color: blue;
    } @else {
        color: red;
    }
}
***********
border : 1px solid black;
***********
这是一个写border的方式

5. for statements

@for $i from 1 through 10 {
   .col-#{$i} { width:200px }
}
这就会把： .col-1 到 .col-10 的width都变成200px，当然也可以根据不同的$i值来修改width。
@for $i from 1 to 11 {
   .col-#{$i} { width: 100%/12*$I }
}
@each $num in 1,2,3,4,5,6,7 {
   .col-#{$num} { width: 100%/12*$num }
}
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
    .#{$color}-text {
        background-color: $color;
    }
}
@while $i < 13 {
   .col-#{$i} {
       width: 100%/12 * $i ;
   }
   $x: $x + 1
}

6. @import ‘someothercss’ 这是一种模块化的css写法，把一部分相似相近的css写在一个.scss中，命名时在前面加下划线，系统自动就知道这是一个module，然后就不会将它转化成css了，就知道这是一个module，用于引用的。

file 1， name: _mixins.scss
 
@mixin all_tables($val) {
    .table_#{$val} {
        color: red;
    }
}
file 2, name: main.scss
@import 'mixins'
div {
    @include all_tables(3);
    background-color: black;
}

7. extend, 为一类元素/div写的css可以传承给其他的类

.panel {
    background-color: red;
    height: 70px;
    border: 2px solid green;
}
.some-panel {
    @extend .panel;
    width: 150px;
    font-size: 2em;
}
这就是一个继承关系，所有在some-panel中的东西都继承了.panel中的css，但是其实还是可以做修改，因为css是看最后一个declare的位置。