Sass --css预处理器

今天，我们来深入详细带实例地讲一下css预处理器--SASS

• sass编译器 在线+软件
• 重点拎一拎 -- 特好使的自动编译器软件 Koala
• 变量使用
• 父子级标签嵌套
• 继承 @extend
• 导包 @import
• mixins
• @media媒体查询结合mixin
• 操作符
• sass社区
• 流行的sass框架

sass

官网

超赞sass社区: thesassway

一、编译器

1.在线编译器： SassMeister

SassMeister

2.在线 CodePen

CodePen

3.软件自动编译器 Koala

标志性logo真的很可爱

image 项目拖进去

使用Koala有几大好处...

• 自动编译：将项目拖到界面中第一次编译后，本地项目里自动生成css文件，实时更新，所以你只需要放心大胆写你的scss，在html文件里引入它对应的css文件就OK啦
• 语法错误提示：编译的时候本身就会去检测，语法错误肯定报错提示，在右下角弹出红框框
• 多语言都支持：不仅仅是Sass,还有Less，CoffeeScript都能编译
• 嗯！免费！这才是重点....

二、变量引入(variables)：

1.png

• 变量赋值直接引用

$commonColor:red; //这里赋变量
.nav{
color:$commonColor;  //后续都可以直接用变量
}

三、嵌套(nesting):

• 自己就不需要打那么多父级标签来限制；
• 在tab切换引发样式，背景图等改变起来方便得多

2.png

.site-header nav {
    ul {
        padding: 0;
        margin: 0;
    }
    
    li {
        list-style: none;
        float: left;
    }
}  //一直可以父元素套子元素

• 这个在我做移动端开发不同tab栏切换图标背景简直完美！

tab切换

继承

• 例子：类.btn-b和类.btn-a样式一样，

4.png

.btn-a{
    啦啦啦，这是我的各种样式
}
.btn-b{
    @extend .btn-a;  // 听btn-a的话，没毛病，100分！
    啦啦啦，后续继续写自己的样式；
}

• 例2：

.group:before, .group:after {
    content: "";
    display: table;
}

6.png

五、引入@import

• 单独将某一块scss拎出来作为小模块，该用的时候就@import引进来

• 按照习惯，给这个外部的scss文件命名前面加下划线_：

8.png

• 需要的时候就@import：

9.png

六、强大的Mixins

• 例子：为了设置一个渐变，我们不得不将所有可能的浏览器适配的代码都写上去，仅仅为了一个效果，后期想修改也需要，复用性也低

10.png

• 解决方案：

  
  12.png

$borderColor:#ec7785;  //变量
.btn-a {
  display: inline-block;
  padding:15px;
  margin-right: 10px;
  border:1px solid $borderColor;
}

//这是你用mixin包装好的verticalGradient方法，传入参数变量
@mixin verticalGradient($fromColor,$toColor) {
  background-image: linear-gradient(to bottom, $fromColor, $toColor);
}
.btn-b{
  @extend .btn-a;  //继承
  border-radius:5px 5px;
  @include verticalGradient(blue,red); //引入mixin的方法，传入你想要的颜色值
}

11.png

• sass开心易理解，我们也开心，少写代码咯~

• 我们也可以把这个mixin代码提取出来放到单独的文件里：_mixins.scss；需要的文件就

@import 'mixins' //文件名导入

• 眼不见，心不烦，哇，代码又少啦；(不然呢，你看bootstrap4怎么辣么多下划线开头的scss文件)

七、@media结合mixins

/* Media Query Mixins*/
@mixin sm-width { //定好的两个mixin，小屏幕和中等屏幕的media query媒体查询
  @media only screen and (max-width: 400px) {
    @content; //没啥特殊意义，就指你引入这个mixin后，这地儿是你的地盘，可以自由写样式
  }
}
@mixin ml-width {
  @media only screen and (min-width: 1100px) {
    @content;  
  }
}

• 需要的时候@include 这在自适应的时候特别方便，

li {
  list-style: none;
  float: left;
  margin-right:10px;
  @include sm-width { //小屏幕时一行一个li
    float: none;
    margin-right: 0;
    margin-bottom: 2px;
  }
  @include ml-width {  //中大屏幕时每个li有5px右边距
    margin-right:5px;
  }
}

屏幕适配

• 例2：根据屏幕宽度调整页面字体大小：

html {
  font-size: 1em;
  @include sm-width {
    font-size: .8em;
  }
  @include ml-width {
    font-size: 1.4em;
  }
}

八、支持操作符

• 运算操作符：

运算操作符	简介
+	加
-	减
*	乘
/	除
%	取余

.box {
    width:100px + 200px; //可识别，一共300px
}

• 逻辑操作
• 一些命令指令，表达式
• 等等...
• 这个博主写的不错，推一下啦,可惜没有广告费~

流行的Sass框架和社区,大佬们时常更新耐心解答

• Compass
• Bourbon
• Susy
• 有空继续给你唠唠嗑，讲讲这几个框架网站啥的

哇咔咔，小仙女想去逛街

• 不容易啊小仙女，忍住逛街的诱惑码字，
  嗯。一定是学习使我快乐

  
  学习与思考使我保持清醒