Sass的笔记汇总

安装

我以Hbuilder为例，上来直接傻瓜式安装

而在Vue项目中安装后看这里，比如是一本书，目录里有你要的这节课

cnpm install sass sass-loader -S

我在Vue测试是否成功，后面的再细讲

---

第一节

为何我刚才第一步使用的是 scss而不是 sass呢？
由于口味不一样，咱们看本来的css是这样的

#app{
    width: 100px;
    height: 100px;
    background-color: #000;
}

#app span{ color:#fff }

sass口味特别重，跟我吃臭豆腐同样爽！吃能够，可是我不会多吃。在sass里 不让用{} 和 ； 并且子级的位置必定要固定，差一点都不行。
sass猥琐笑着说：看着费劲不，老铁o( ￣︶￣)o

<style lang="sass">
#app
    width: 100px
    height: 100px
    background-color: #000
    span 
    color:#fff
</style>

scss好像青苹果，跟普通的苹果同样。他和本来的css本体不变，里面却别有风味

#app{
    width: 100px;
    height: 100px;
    background-color: #000;
    span{
       color:#fff;
    }
}

---

第二节 变量

js中的变量就是var a = '123456789十JQKA'
而scss中是这样使用的
好处在于大项目全局风格是固定的三四个，你若是作color:#000000 #ffffff重复写N次，有了他能重复使用
注意两点：一个是$，一个是：
我第一次用竟然用上了等号
$xxx:#000

第三节 输出格式

其实就是看你下次查找css时方便不方便，若是你一生都不会再改那就换成没有空格一条横线的compressed压缩。倍爽！欧耶
nested：嵌套

ul{
   color:#000 }
  ul li{
   color:#000 }

compact：紧凑

ul{ color:#000 }
ul li{ color:#000 }

expanded：扩展

ul{ 
   color:#000 
}
ul li{
   color:#000 
}

compressed：

ul{color:#000 }ul li{color:#000 }

可是我通常不用，百度一搜就能一键压缩，或者一键自动换行

---

第四节 嵌套方式

以前开头简单说了，就是一层一层的嵌套和被嵌套
&至关于加一个:hover, 若是不加&将成了 a 　 　:hover这个打空格
最恨的就是用&变成了一个自创名称：出来就变成了#app-cnm

#app{
    color: #000;
    span{
        width: 100px;
        height: 100px;
        &:hover{
            color: #42B983;
        }
    }
    &-cnm{
      background:#000
    }
}

---

第五节 属性嵌套

这个纯属爱好，爱用不用的一种。你们知道就好。
曾经我们设置某些属性的名称很像。

#app{
    font-size: 14px;
    font-family: '微软雅黑';
    font-weight: 800;
}

现在我们又出新花样,把前面同样的font分出来加一个 : { ... }

#app{
   font:{
          size: 14px;
          family: '微软雅黑';
          weight: 800;
        }
}

---

第六节 mixin

这个英文发音：妹可森， 混合的意思
记住他方式：蜜心（mi，xin）
他在乎思是什么？你曾几什么时候有没有这样的现象!
我在第一个页面里用了a,隔了几天创了无数个页面到z的时候，发现a的里面和z的如出一辙。可是这个页面必须用z!这该怎么办

.a{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

.z{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

那就是这个mixin,起一个名字之后想用直接艾特他，没错！是艾特@这个符号。@include
你能够当作：

@建立 谁谁谁	@使用的 谁谁谁
@mixin cnm	@include cnm

@mixin cnm{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

.a{
    @include cnm
}

一样是这里，还有一种玩法！就是任意时随便加颜色.这页面就能直接切换主题。分两种，一种是按顺序，一个是不须要顺序

@mixin cnm($txt-color, $bg-color){
    width:100px;
    height:100px;
    background:$bg-color;
    color:$txt-color;
    text-shadow: 0 0 15px darken($bg-color, 30%)
}

.a{
    @include cnm(#ffffff, #000000)
    @include cnm($txt-color:#ffffff, $bg-color:#000000)
    //二选一，一个固定顺序， 一个没有顺序
}

---

第七节 “和” “扩展”

说一句话来形同：bb本来很没出息，什么都没有！aa说我把@extend给你。你就不会那么穷了

.aa{ padding: 15px; }
.aa a{ margin: 100px; }    
.bb{    
    @extend .aa;
    background: #000;
}

.aa, .bb {
  padding: 15px;
}

.aa a, .bb a {
  margin: 100px;
}

.bb {
  background: #000;
}

---

第八节 @import

跟当年我们引入无数个.css文件。你会发现本身页面没写多少，引入进来文件太多！
这个scss这招就在， 在这个scss文件里引入！而不是在html引入
我在sb.scss

@import "./assets/sb.scss";
.aa{
    padding: 15px;
}

---

第九节 lighten和darken

高亮和变暗
其实就是把本来的颜色，按比例加深减淡

$sb: lighten(#cccccc, 10% );

.ss{
    background: $sb;
}