scss中使用变量

样例

	<template>
	  <div class="scss_content">scss 中变量的定义使用</div>
	</template>

	  $color:red;
	  .scss_content{
	    color:$color;
	  }

效果图：

scss 的作用域。

如上图，定义在scss_content 中的 $borderColor ,用在 scss_footer 中就报错了

只能用在它本身的作用域下，即是

	.scss_content{
	   $borderColor:blue;
	   color:$color;
	   border:1px solid $borderColor;
	 }

用在它子节点上也不行，这个变量只能存在于定义他的大括号中：

改成这样的写法之后，就可以生效了：

scss 中参数传递

	<div class="scss_content_child">scss_content_child</div>

	/*声明,可以多个参数*/
  @mixin Sq($width,$height){
    width:$width;
    height:$height;
  }

  //调用 使用include
  .scss_content_child{
    @include Sq(100px,100px);
    border:1px solid red;
  }

scss 中的省略写法：

	<div class="scss_content">scss 中变量的定义使用
      <div class="scss_content_child">scss_content_child</div>
    </div>

	//在嵌套代码块内
  	//使用 & 引用  父元素
  	.scss_content{
	    color:pink;
    	&:hover{
      	color:yellow;
    	}
  	}

hover后：

计算功能：

	<div class="rounded">roundedroundedrounded</div>

	$baseWidth:100px;
  	.rounded {
      	width:$baseWidth * 2;
      	border:1px solid red;
      	padding:10px 0;
      	box-sizing: border-box;
  	}

此时这个容器的宽度是 200px

使用循环：

	<p class="line-1">line-1</p>
    <!--备注-->
    <p class="line-2">line-2</p>
    <!--备注-->
    <p class="line-3">line-3</p>
    <!--备注-->
    <p class="line-4">line-4</p>
    <!--备注-->
    <p class="line-5">line-5</p>

	 $num_list:1,2,3,4,5;
	 @each $num in $num_list {
	   .line-#{$num}{
	     color:lightblue;
	   }
	 }

如果换成这种写法

	$num_list:1,2,3,4,5;
  		@each $num in 5 {
    	.line-#{$num}{
      	color:lightblue;
    	}
  	}

则是如此：

变量拼接在 属性中：

	<div class="rounded">roundedroundedrounded</div>

	$side : right;
  	.rounded {
      	width:200px;
      	padding:10px;
      	border:1px solid red;
      	border-top-#{$side}-radius: 10px;
  	}

css 中使用变量