sass基础用法

Posted 2020-08-16

嵌套：

　　1.选择器嵌套；

　　2.属性嵌套;

　　.box {
  　　　　  border-top: 1px solid red;
  　　　　  border-bottom: 1px solid green;
　　}
　　.box {
 　　　　 border: {
   　　　　　　　　　　top: 1px solid red;
　　　　　　　　　　　bottom: 1px solid green;
 　　　　　　 }
　　　　}

　　3.伪类嵌套；

　　.box:before {
  　　　　　　　　content: "伪元素嵌套";
　　}
 
　　.box{
  　　　　&:before {
  　　　　  　　content:"伪元素嵌套";
  　　　　}
　　}

　　4.跳出嵌套；@at-root

　　跳出嵌套
　　body{
   　　　　@at-root .container{
       　　 　　width: 20px;
   　　　　 }
　　}

---

混合宏：

　在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏

@mixin border-rad($rad1...){
	-webkit-border-radius:$rad1;
	-moz-border-radius:$rad1;
	-o-border-radius:$rad1;
	-ms-border-radius:$rad1;
	border-radius:$rad1;
}
.box4{
	@include border-rad(36px 30px 10px red,2px 5px 6px red);
}

 继承：在 Sass 中也具有继承一说，继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
 
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
 
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
 
效果：
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

占位符：Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
 
.btn {
  @extend %mt5;
  @extend %pt5;
}
 
.block {
  @extend %mt5;
 
  span {
    @extend %pt5;
  }
}
 
效果：
.btn, .block {
  margin-top: 5px;
}
 
.btn, .block span {
  padding-top: 5px;
}
 

插值：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
 
//它可以让变量和属性工作的很完美，上面的代码编译成 CSS：
 
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}


@mixin asd($wid,$hei,$classname,$bg,$name){
    #{$name}:$wid;
    height:$hei;
    .#{$classname}{
        #{$bg}:red;
    }

}

运算：

.box {
  width: 20px + 30px;
}
 
效果：
.box {
  width: 50px;
}

.box {
  width: 20px - 30px;
}
 
效果：
.box {
  width: -10px;
}

.box {
  width: 20px * 30px;
}
 
效果：
.box {
  width: 600px;
}

注意运算符之间要用空格隔开；

函数：

　　颜色函数：

body{
    color: rgb(255,0,200);
}
 
body{
    $color: rgb(255,0,200);
    color: $color;
    background-color: rgba($color,0.5);
}


p{
        color: darken($color, 2);
        background-color: lighten($color,0.5);
    }

 str-length(),str-index();

　　z-index:str-length("aaaaa");得到的结果是，Z-index：5；

　　z-index：str-index("abcdfedd",c);得到的结果是，Z-index：3；

自定义函数：

　　@function double($width){

　　　　@retrun $width * 2;

}

控制命令：

//@if
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
 
.block {
  @include blockOrHidden;
}
 
.hidden{
  @include blockOrHidden(false);
}
 
编译出来的CSS:
 
.block {
  display: block;
}
 
.hidden {
  display: none;
}
 
@debug报错时调试
//@for
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
 
关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
 
.item-1 {
  width: 2em;
}
 
.item-2 {
  width: 4em;
}
 
.item-3 {
  width: 6em;
}

//@while
$types: 4;
$type-width: 20px;
 
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
 
编译出来的 CSS
 
.while-4 {
  width: 24px;
}
 
.while-3 {
  width: 23px;
}
 
.while-2 {
  width: 22px;
}
 
.while-1 {
  width: 21px;
}
//@each
$k: 1;
@each $c in blue, yellow, gray{
  .div#{$k}{
     color: $c;
  }
  $k: $k + 1;
}
 
@each $key,$value in (a: blue, b: yellow, c: gray){
  .class#{$key}{
     color: $value;
  }
}