sass基础常用指南

最新推荐文章于 2024-04-26 10:27:45 发布

转载最新推荐文章于 2024-04-26 10:27:45 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=21ia01cb&title=sass%E5%9F%BA%E7%A1%80%E5%B8%B8%E7%94%A8%E6%8C%87%E5%8D%97

前端专栏收录该内容

493 篇文章

订阅专栏

一、变量

$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
}

十三：占位符