scss的使用方法

引用scss文件——看上一篇的less使用，里面的Koala，一样的原理！！！

 

 

 

方法一：

scss:

/**
定义变量
 */
$width:404px;
$color:green;
$font-size:20px;

.scss1{
  width: $width;
  height: $width/2;
  background-color: $color;
  font-size: $font-size;
}
css:

.scss1{width:404px;height:202px;background-color:green;font-size:20px}

html:

<h1>定义变量</h1>
    <div class="scss1">Hello Scss</div>

 

 

 方法二：

scss:

/**
嵌套（可以多层）
 */
.scss2{
  width: 100px;
  height: 100px;
  background-color: green;
  .scss3{
    width: 200px;
    height: 100px;
    background-color: red;
    .scss4{
      width: 300px;
      height: 100px;
      background-color: yellow;
    }
  }
}

css:

.scss2{width:100px;height:100px;background-color:green}.
scss2 .scss3{width:200px;height:100px;background-color:red}
.scss2 .scss3 .scss4{width:300px;height:100px;background-color:yellow}

html:

 

<h1>嵌套</h1>
    <div class="scss2">Hello Scss
        <div class="scss3">Hello Scss
            <div class="scss4">Hello Scss</div>
        </div>
    </div>


方法三：
scss:

/**
导入
 */
@import "index2";
.scss5{
  font-size: $font-size;
  background-color: $bgc;
  width: $width;
  height: 100px;
}

css:

*{margin:0;padding:0}.scss5{font-size:30px;background-color:brown;width:404px;height:100px}

html:

<h1>导入</h1>
<div class="scss5">Hello Scss</div>

 

 

 

方法四：

scss:

/**
mixin 混入
用@include调用（可带参数）
 */
@mixin scss6($width:100px,$height:100px,$color:lightblue){
  width: $width;
  height: $height;
  background-color: $color;
  border: $width/10;
}
.scss6{
  //用include调用申明的方法
  @include scss6();
}
.scss7{
  //带参
  @include scss6($color:red);
}

css:

.scss6{width:100px;height:100px;background-color:#add8e6;border:10px}.scss7{width:100px;height:100px;background-color:red;border:10px}

html:

<h1>mixin混入</h1>
<div class="scss6">Hello Scss</div>
<div class="scss7">Hello Scss</div>

方法五：
scss:

/**
扩展/继承
 */
.scss_all{
  width: 100px;
  height: 100px;
  background-color: darkred;
  text-align: center;
}
.scss_all_item1{
  @extend .scss_all;
  background-color: lightgreen;
}
.scss_all_item2{
  @extend .scss_all;
  background-color: lightblue;
}

css:

.scss_all,.scss_all_item1,.scss_all_item2{width:100px;height:100px;background-color:darkred;text-align:center}
.scss_all_item1{background-color:lightgreen}.scss_all_item2{background-color:lightblue}

html:

<h1>扩展/继承</h1>
<div class="scss_all">darkred</div>
<div class="scss_all_item1">lightgreen</div>
<div class="scss_all_item2">lightblue</div>

 

方法六：

scss:

 

/**
运算
 */
.scss8{
  width: (300px+20px)/2+50px/2-20px;
  height: 100px;
  background-color: #00a3af;
}

 

css:

.scss8{width:165px;height:100px;background-color:#00a3af}

html:

<h1>运算</h1>
<div class="scss8">Hello Scss</div>

 

 

方法七：

scss:

/**
函数
 */
$color:#999ccc;
.color_item{
  color: $color;
  &:hover{
    background-color: darken($color,50%);//变暗
  }
}
.color_item2:hover{
  color: lighten(red,1%);//变亮
}

css:　　

.color_item{color:#999ccc}.color_item:hover{background-color:#222444}
.color_item2:hover{color:#ff0505}.font-1{font-size:14px;color:#ffacb8}

html:

<h1>颜色函数</h1>
<div class="color_item">123</div>
<div class="color_item2">123</div>

 

 方法八：

scss:

/**
流程控制
 */
$blur:lightpink;
@for $i from 1 through 10{//i=from后面的数字
  .font-#{$i} {
    font-size: 12px+$i*2px;
    color: darken($blur, $i*2);
    @if $i%2==0{//判断i除以2余=0
      text-decoration: underline;
    }
  }
}

css:

.font-1{font-size:14px;color:#ffacb8}.font-2{font-size:16px;color:#ffa2b0;text-decoration:underline}
.font-3{font-size:18px;color:#ff97a7}.font-4{font-size:20px;color:#ff8d9e;text-decoration:underline}.font-5{font-size:22px;color:#ff8396}
.font-6{font-size:24px;color:#ff798d;text-decoration:underline}.font-7{font-size:26px;color:#ff6f84}.font-8{font-size:28px;color:#ff647c;text-decoration:underline}
.font-9{font-size:30px;color:#ff5a73}.font-10{font-size:32px;color:#ff506a;text-decoration:underline}

html:

<h1>流程控制</h1>

<div class="font-1">Hello Scss</div>
<div class="font-2">Hello Scss</div>
<div class="font-3">Hello Scss</div>
<div class="font-4">Hello Scss</div>
<div class="font-7">Hello Scss</div>
<div class="font-8">Hello Scss</div>
<div class="font-9">Hello Scss</div>
<div class="font-10">Hello Scss</div>