sass脚本语言简介

sass是将一个脚本解析css脚本语言，包括两套语法，缩进语法sass和块语法scss
缩进语法，使用缩进区分代码块，回车分隔不同规则，后缀名“.sass”
块语法，使用大大括号区分不同规则，分号区分不同声明，后缀名“.scss”

嵌套规范

• 选择器嵌套

<div>
    <div class="content">
    <div class="box"></div>
</div>

// 选择器嵌套，按顺序嵌套，嵌套不超过三层
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  .box{
    width: 200px;
    height: 200px;
    background-color: orange;
  }
}

• 属性嵌套

<div>
<div class="content">
<div class="box"></div>
</div>

// 选择器嵌套
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  .box{
    width: 200px;
    height: 200px;
    // 属性嵌套
    // background-color的嵌套格式
    background: {
      color: red;
    }
  }
}

变量

样式开头定义样式变量，避免重复定义变量，提高复用和管理

<div>
    <div class="content">
        <div class="box">我是内容</div>
    </div>
</div>

// 变量的定义
$color:#fff;
$bg:red;
$site:top;
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    .box{
        width: 200px;
        height: 200px;
        // 变量的使用
        background-color: $bg;
        color: $color;
        // 字符串‘#{}’使用变量
        padding-#{$site}:20px;
    }
}

混合

使用混合，可以提高代码的复用，且可以传递参数，灵活更改

<div>
    <div class="content">
        <div class="box"></div>
    </div>
</div>

@mixin flexSet($jus,$ali){
  display: flex;
  justify-content: $jus;
  align-items: $ali;
}
@mixin colorSet{
background-color: orange;
color: #fff;
}

.content{
  width: 100%;
  height: 100vh;
  @include flexSet(center,center);
    .box{
  width:200px;
  height:200px;
  @include colorSet;
  }
}

%占位符

通过占位，使用时用extend调用,减少多余样式内容

<div>
    <div class="content">占位符</div>
</div>

%borderBox{
  -webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content{
  @extend %borderBox
}

extend继承

<div>
    <div class="content">
        <button class="pinkBtn">我是粉色按钮</button>
    </div>
</div>

@mixin flexSet($jus,$ali){
  display: flex;
  justify-content: $jus;
  align-items: $ali;
}
.btn{
  width: 200px;
  height: 50px;
}
.content{
width: 100%;
height: 100vh;
@include flexSet(center,center);
.pinkBtn{
  @extend .btn;
  background-color: pink;
}
}

高级语法

<div>
	<div class="content">
		<!-- if判断 -->
		<div class="classIf">if判断</div>
		<!-- for循环 -->
		<div class="classFor">
			<div class="border-10">234</div>
			<div class="border-5">555</div>
			<div class="border-3">3333</div>
		</div>
		<!-- while循环 -->
		<div class="classWhile">
			<div class="item-6">12号线</div>
			<div class="item-4">8号线</div>
			<div class="item-2">4号线</div>
			</dvi>
			<!-- each项循环 -->
			<div class="classEach1">
				<div class="p-red">颜色</div>
				<div class="p-orange">颜色</div>
			</div>
				<div class="classEach2">
				<div class="b-pink">颜色</div>
				<div class="b-gold">颜色</div>
				<div class="b-green">颜色</div>
			</div>
				<div class="classEach3">
				<div class="h1">颜色</div>
				<div class="h2">颜色</div>
				<div class="h3">颜色</div>
			</div>
			<!-- 自定义函数 -->
			<div class="funSize">自定义函数</div>
		</div>
	</div>
        
        
        .content{
	.classIf{
		@if 4>5 {color: blueviolet;}
    @else{color: yellowgreen;}
	}
  .classFor{
		margin-top: 16px;
   @for $i from 1 through 10{
		 .border-#{$i} {
			 border:#{$i}px solid red;
		 }
	 }
  }
	.classWhile{
		margin-top: 16px;
		$i:6;
		@while $i > 0 {
			.item-#{$i} {font-size: 6px * $i;}
			$i:$i - 2;
		}
	}
	.classEach1{
		margin-top: 16px;
		@each $color in red,green,blue,orange{
			.p-#{$color}{
				background-color: $color;
			}
		}
	}
	.classEach2{
		margin-top: 16px;
		@each $color,$border in(pink,solid),(gold,dotted),(green,double){
			.b-#{$color}{
				background-color: $color;
				border: $border;
			}
		}
	}
	.classEach3{
		margin-top: 16px;
@each $key,$color in (h1:red,h2:orange,h3:green){
	.#{$key}{
		color: $color;
	}
}
	}

	@function double($n){
@return $n * 2
	}
	.funSize{
		margin-top: 16px;
		width: double(100px);
		height: 60px;
		background-color: blueviolet;
	}
}