sass基础常用指南

2018-06-24 02:02:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、变量

$global-color:red;
.nav{
  background:$global-color;  
}

二、sass命名时横杠和下划线不区分

$global-color:yellow;
.nav{
  background-color:$global_color  
}
.footer{
  background-color:$global-color
}

三、变量中可以套用变量

$global-color:red;
$global-border:1px solid $global-color;
.nav{
  backhround:$global-color;
 border:$global-border;    
}


四、嵌套规则

#head{
  .nav{
    background:red;  
   .logo{
      float:left;
    }
  }

  p{
    color:red
 
  }


}

五·、伪类和直接调用父级符号&

#head{
  a{
    color:biue;
    &:hover{
      color:red
    }      
  }
}


六、sass的导入

@import "header";

.main{
  color:red;
}

@import "fotter";

七、嵌套导入

@import "header";

.main{
  color:red;
  @import "main";
}


@import "fotter";

八、关于注释

以下注释会被编译
/*
*时间:2017-11-18
*auther:liumingwang
*
*/

以下注释不会被编译

//color 静默注释

九、默认变量

@import "header";

$color:red!default; //这里是默认变量,“header”里面有个这个变量就用header里面的,header里面没有,就用此页面的默认变量

.head{
  color:$color;
}

十、混合器的使用mixin

@mixin border-radius{
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 -ms-border-radius:5px;
 border-radius:5px;
}


.header{
  &-nav{
    @include border-radius;
  }

}

十一、混合器mixin传参数

@mixin links-color($nomal,$hover,$visited,$active){
  color:$nomal;
  &:hover{
   color:$hover;
  }
  &:visited{
    color:$visited
  }
  &:active{
    color:$active
  }
}

.header{
  @include links-color(red,blue,green,yellow)
}


十二:继承

.center{
  margin:0 auto;
}

.main{
  @extend .center
}

 十三:占位符

%center{
  margin: 0 auto;
}

.main{
  @extend %center;
}

注意:占位符和继承的区别:以上占位符的%center不会被编译,只有.main中会编译,然后继承的.center和.main都会被编译

十四、注意事项

1、所有引用或者用到sass语句的最后都要加上封号(“;”)否则会报错

2、sass文件头加上下划线就不会被编译(可以用一个主文件来引用这些下划线的sass,然后最后编译主文件)

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:响应式布局 max-device-width 与 max-width 的区别

下一篇:CSS之BFC、IFC、FFC and GFC