scss的使用方法
- 格式：pdf
- 大小：40.41 KB
- 文档页数：4
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:
⽅法⼆：
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:
⽅法三：
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:
⽅法四：
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:
⽅法五：
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:
⽅法六：
scss:
/**
运算
*/
.scss8{
width: (300px+20px)/2+50px/2-20px;
height: 100px;
background-color: #00a3af;
}
css:
.scss8{width:165px;height:100px;background-color:#00a3af}
html:
⽅法七：
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:
⽅法⼋：
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:
