sass 项目常用

Posted 2020-12-23 xingjibin

只展示在项目的初级用法，最常用的东西

1 嵌套  选择器的嵌套，属性的嵌套等

//css 
div h1 {
　　color : red;
}

//sass
div {
　　　hi {
　　　　　　color:red;
　　　　}
　}

.box {
  width: 666px;
  .content {
    font-size: 66px;
  }
}

.box {
  font: {
    size: 66px;
    weight: bold;
  }
}

2可以定义变量  在{}外定义的变量为全局变量，{}内定义的为局部变量

// 全局变量
$width: 666px;

// 局部变量
.box {
  $width: 666px;
  width: $width;
}

3  父选择器

// & 必须置于首位
.box {
  color: red;
  &:hover {
    color: blue;
  }
}

 

  4继承 

.father {
  border: 1px #f00;
}

// 继承选择器
.son {
  @extend .father;
  border-width: 3px;
}

5 混合

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
}

div {
　　　　@include left;
　}

// @mixin 如果没有调用，不会被渲染

@mixin rounded($conor: 5px){ // 定义 mixin 并设置默认值 5px
  -webkit-border-radius: $conor;
  -moz-border-radius: $conor;
  border-radius: $conor;
}

.btn-rounded{
  @include rounded(); // 这里引用上面的 mixin，默认值 5px
}

.btn-big-rounded{
  @include rounded(10px); // 这里引用上面的 mixin，并设置值 10px
}