Sass的使用

Sass的使用简介

sass用来编写样式，后缀名为scss，可以像js一样设置变量名、继承等，会大大提高开发效率。稍微讲解一下

编译工具

sass可以使用koala 和codekit来编译，本文以Koala为例

image.png

常用知识点简介

• 变量的使用
  一些常用的颜色、尺寸等可以使用变量来定义，方便以后一次性修改样式。例如：

$darkgray:#eee;    //变量声明，
//变量引用
body{
  background-color:$darkgray;
}

• 层级嵌套
  比如类.main下面有.head，.container,.head和.container下面各有一个title的类，设置字号为12px，可以这样写：

.main{
    .head{
        .title{
            font-size: 12px;
        }
    }
    .container{
        .title{
            font-size: 14px;
        }
    }
}
//编译出来就是
//.main .head .title{font-size:12px;}
//.main .container .title{font-size:14px;}

• 父选择器的标识符&

  
  
  

  image.png
  
  

  &相当于当前层级的父级，比如文中的&就相当于li

• 导入其它sass文件
  比如我们可以写一个基本的sass文件，是一些常用公共的集合，里面有变量，一些类等，可以通过import导入文件，然后进行编译，这样编译器就会把common直接编译进引入的文件了，最后生成一个文件，页面直接引入这个文件就可以了。
  
  

  image.png
  
  例如index.scss
  
  

  image.png

@import "common";    //直接在文件中引入文件名就可以了

• 注释
  // 这种注释不会出现在生成的css文件中
  /* 这种注释内容会出现在生成的css文件中 */
• 混合器

//@mixin定义一个混合器
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//@include生成混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

最终生成的内容为：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

• 给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

• 继承
  最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现
  例如:

.dcenter{
    margin: 0 auto;
    text-align:center;
}
.abc{
    @extend .dcenter;
    font-size:12px;
}

//编译后就自动继承了样式属性

.abc{
    margin: 0 auto;
    text-align:center;
    font-size:12px;
}

最后就是编译工具的使用了

首先点击 add folder添加文件夹，选中相应的sass文件夹

image.png

创建新的sass文件后，点击refresh刷新，选中sass文件勾选自动编译，点击执行编译，这样后面编写sass文件编译器就能实时更新了

image.png