sass教程

最新推荐文章于 2021-12-29 08:42:00 发布

七上八下的爆米花

最新推荐文章于 2021-12-29 08:42:00 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/lanseguhui/article/details/103887402

版权

变量声明

任何用作css属性值的赋值都可以用sass的变量值

$nav_width:100px;

.box{
   width:$nav_width;
   height:100px;
}

编译后
.box{
    width:100px;
    height:100px;  
}

也可以用空格分隔多个属性值,或者用逗号分隔多个属性值

$border-style:1px solid red;

$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

变量引用

$nav-bgStyle:#eee;

.nav{
   border:1px solid $nav-bgStyle;
   background:$nav-bgStyle;   
}
//编译后
.nav{
   border:1px solid #eee;
   background:#eee;   
}

在声明变量时，变量值也可以引用其他变量

$highlight-color: #F90;

$highlight-border: 1px solid $highlight-color;

.selected {
  border: $highlight-border;
}

//编译后
.selected {
  border: 1px solid #F90;
}

嵌套css规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }


群组选择器可以嵌套
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
.container h1, .container h2, .container h3 { margin-bottom: .8em }


nav, aside {
  a {color: blue}
}
nav a, aside a {color: blue}



嵌套属性
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入sass文件

文件color.sass

导入使用 @import "color"

混合器@mixin 当需要在多处使用同一个样式使用混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}


使用@mixin定义  使用@include调用
编译后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器也可以传参数以及默认参数

@mixin box-style($width,$height,$background:blue){
    width:$width;
    height:$height;
    background:$background;
}
传参也可以传递默认参数

.box{
   @include box-style(200px,200px);
}

编译后
.box{
   width:200px;
   height:200px;
   background:blue;  
}

继承

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError将会继承样式表中任何位置处为.error定义的所有样式
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

在class="seriousError"的html元素内的超链接也会变成红色和粗体。