css拓展语言sass

这是css的拓展语言
npm install -g 或者–save-dev sass
sass index.sass或者index.scss
也可以监听
sass index.scss:index.css
sass --watch index.scss:index.css
把scss转化css 同时进行同步编译修改
scss改变css也改变
sass与scss的区别

一个没有：{} 比如 
a
  color:red; 
一个有
a:{
color：red;我是喜欢这个
}

变量声明 $美元符合
变量引用 $var:15px;
span{
font-size: $var;
}
$a:red;color
$b:5px-4;number
$c:"hello";string
$d:1px solid red;list

使用type-of可以获取与js里面typeof相似
字符串也可加减但是没有意义
有number， $var=5px+15;(5px/5)(5px*1)(5px-4)建议最后一个不要带单位color十六进制的时候表示也可以进行运算
，string，list，color
可以嵌套css就没必要写很多个了
比如

ul li{
widht:100px;
}
ul{
widht:100px;
}
可以简化
ul{
widht:100px;
li{
widht:100px;
}
}

父选择器的标识符&用于写伪类与伪元素的
比如

span{
        &:nth-child(1){//伪类存在的意义是为了通过选择器找到那些不存在与DOM树；nth-child子元素第一个与first-child标签第一个
            color: sandybrown;
        }
        &::after{//CSS 伪元素用于某些选择器设置特殊效果
            content: "";
        }
    }

伪元素是虚拟容器，不存在HTML源码里面（但是在dom结构中有内容显示）伪元素需要一个实际的元素

如上图 实际元素 span 文本包含世界

而伪类是标签添加的效果，不存在dom结构里面（标签有效果）需要一个实际的类才能达到
如上图 class{color：red}

群组选择器
div{
    .a,.b,.c{
        color: seagreen;
    }
}
编译之后
div .a, div .b, div .c {
  color: seagreen;
}
子组合选择器 同层选择器 > + ~
div{
    .a,.b,.c{
        color: seagreen;
    }
}
@mixin {
    width: 100px;
    height: 100px;
}
div{
    ~p{
        color: red;
    }
    +span{
        color: green;
    }
    >a{
        width: 10px;
    }
    >ul{
        width: 10px;
        li{
width: 10px;
        }
    }
}
嵌套属性
$a:red;
div{
    border:{
        width: 10px;
        color: $a;
        style:deshed;
    };
}
编译后
div {
  border-width: 10px;
  border-color: red;
  border-style: deshed;
}
@import 'xx.scss'可以把变量样式导入
当导入的文件存在变量相同的时候
@import './_mm';
@import './add.scss';//后面的变量会覆盖前面的
前面文件都有 $i变量
$i:"我喜欢世界啊" !default;//这个是默认值如果前面没有这个变量就取值；

div{
    @import './add.scss';//也可以做局部导入
    //存在局部作用域变量也是用局部变量
    border: {
        width: 10px;
        color: $a;
        style:deshed;
    };
}

既然可以导入scss文件那原生css也是可以的
不过要修改原生的css的后缀为scss；
不用担心scss是完全兼容css的；
如果不修改就会当做文件导入不会被直接解析

混合器与继承
如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器

@mixin index( $a, $b, $c) {
    border-bottom: $a;
    border-top: $b;
    box-sizing: $c;
}
.box{
    border: {
        style:solid;
        color: red;
        width: 1px;
    };
}
div{
    @extend .box;//继承样式生成代码少重复选择器
    //继承会形成元素为父子关系
    //最好不要使用后代选择器继承，因为数量会失控
    .box, div {
  border-style: solid;
  border-color: red;
  border-width: 1px;
}
    @include index(10px,10px ,10px);//包含混合器可以带变量，会重复属性，而混合
    div {
  border-bottom: 10px;
  border-top: 10px;
  box-sizing: 10px;
}
没有父子关系
两者都是减少代码重复去的，看情况使用
    .k{
        p{
            display: inline;
            span{
                display: block;
            }
        }
    }
}