sass与scss的异同

1. 异同：简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号

2. //sass 太费眼了
   .father
       width:100px;
       .son
           width:50px;
   //scss 适合我这种眼瘸手残患者
   .father{
       width:100px;
       .son{
           width:50px;
       }
   }       

   ---

   ---

    scss功能很强大的样子，能做运算、写函数啥的，但是我只是作为语法糖用而已，只看了些基础功能 
   我个人常用的功能有：

   嵌套
   变量 $color : #111111;
   混入 @mixin
   继承 @extend
   3.一个关于@mixin、@extend、%placeholder的适用场景总结

   mixin 可以传变量
   extend 不可以传变量，相同样式直接继承，不会造成代码冗余；基类未被继承时，也会被编译成css代码
   placeholder 基类未被继承时不会被编译成css代码 

   ---

   ---

   

---

scss语法入门：

scss 是 sass3的新版本，也是目前推荐的语法，以.scss结尾的文件,所以 scss == sass3最新版本，目前就使用scss 

scss引入其他文件

1.引入其他 .scss 文件   @import 'index.scss'

这样的话，文件在编译后，会自动把引入的文件和当前文件合并为一个.scss文件

2.引入其他 .css 文件    @import 'index.css'

和引入.scss文件不同，这样引入的.css文件在编译后不会和当前文件合并为一个.scss文件，而是继续保持为外链引入方式

scss注释方法
scss的注释有两种

1.块注释
/*
*/
2.行注释
//

scss变量
scss变量分为3种，以$符号开头,后面紧跟变量名。变量名和变量值之间用冒号：分开

1.常规变量

$key: value;
2.默认变量

$key: value!default;

默认变量是可以被覆盖的,具体覆盖方法如下
$font: 12px;
$font: 14px!default;

3.特殊变量

$fontSize:14px;
font:#{$fontSize}

4.多值变量

多值变量分为list和map两种类型，list类似于js的数组，map类似于对象

嵌套
嵌套分为两种：1.选择器嵌套（目前经常使用的）、2.属性嵌套：不经常使用

选择器嵌套:

// scss 文件
ul{
    li{
        a{

        }
    }
}

//解析为 css 文件

ul{

}  
ul li {

}  
ul li a{

}

//scss 在属性选择器中，&表示父元素选择器

a{
    &:hover{

    }
}

//解析为 css 文件
a{

}
a:hover{

}

属性嵌套：

// scss 文件
div{
    border{
        top:{
            width:1px;
        }
        left:{
            width:2px;
        }
    }
}

//解析为 css 文件

div{
    border-top:1px;
    border-left:2px;
}

混合：  @mixin 调用@mixin方法需要使用 @include

// scss 普通混合

@mixin font{
    line-height:10px;
    color: #fff;
}

.footer{
    @include font;
}

// 解析为 css 文件

.footer{
    line-height: 10px;
    color: #fff;
}

// scss 文件

@mixin font($size:12px){  //默认参数 默认12px
    font-size: $size;
}

.footer{
    @include font(16px);
}

继承：  使用继承会让该选择器继承指定选择器的所有样式,要使用关键词@extend，后面跟上指定的选择器

// scss文件
.font{
    font-size:14px;
    height: 16px;
}
.footer{
    @extend .font;
    border-width: 2px;
}

//解析问 css 文件

.font, .footer{
    font-size:14px;
    height: 16px;
}
.footer{
    border-width: 2px;
}

占位选择器： %选择器名，通过@extend 去调用，如果不调用，则文件编译后不会出现改该冗余css文件

// scss 文件
%dir{
    font-size: 14px;
}
%clear{
    overflow: hidden;
}
div{
    @extend %dir;
}

/*只有 %dir 选择器被调用了，%clear 在编译的时候会被当做冗余文件给过滤掉，不会出现在编译后的.css文件中*/

函数： sass 内置了很多函数，自己也可以定义函数。以 @function 开始 @return 返回值

//scss 文件
@function per($data){
    @return $data/10 + px;
}

div{
    font-size: per(140);
}

//解析为 css文件
div{
    font-size: 14px;
}

其他功能
其他功能包括以下几点

运算：对于（数字，颜色，变量）的四则（加减乘除）运算,运算符前后各保留一格空格
if判断：@if可以单独使用，也可以配合@else、@else if 一起使用
三目运算符：if(true,1px,2px)，返回的值是1px,if(false,1px,2px),返回的值是2px
for循环，共有两种写法，1：@for $var from through 
2：@for $var from to 。两种写法唯一的区别就是，through包括end这个数，to不包括end这个数。
each循环，@each $var in ,list和map分别表示为list和map类型数据。
项目中经常用到的功能
变量
嵌套
&
函数：用于移动端页面计算rem或者vw最佳

---