SASS

一、      Sass (安装时从C盘开始不可有中文)

1、文件后缀名有两种,sass中不包含{}和;, scss中包含{}和;,建议使用scss的后缀名。

2、用@import导入文件,可引入scss或者css文件,区别在于scss文件会被译, css文件则不会。

3、变量

$变量名(自取):值,如果在值后面接!default表示默认变量值,如果不想用默认值,在其上面写新的申明即可,默认值不常用。

$变量名:值;

 div {属性名:$变量名;}

4、sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。

声明的@mixin通过@include来调用。

混合mixin,@mixin 名称{声明},调用时使用@include 名称

主要分为三种情况:

1、无参数
@mixin all{
  width: 200px;
  height: 300px;
  background: gold;
}
div{
  @include all;
}
2、有参数(固定值)
@mixin one($width:200px,$height:500px,$background:green){
  width: $width;
  height: $height;
  background: $background;
}
div{
  @include one;
}
3、有参数(无固定值)
@mixin two($width,$height,$background){
  width: $width;
  height: $height;
  background: $background;
}
div{
  @include two(200px,50px,blue);
}

 

posted @ 2016-09-15 12:11  杜润慈前端博客  阅读(184)  评论(0编辑  收藏  举报