scss的基本使用方法

1047537295@qq.com

已于 2022-11-02 14:40:26 修改

阅读量219

点赞数

文章标签： scss css css3

于 2022-06-27 11:47:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44928780/article/details/125481237

版权

普通嵌套

.a {
    font-size: 20px;
    .b {
      background-color: #ff0000;
      color: #000000;
    }
}
//编译后
.a {
    font-size: 20px;
}
.a .b{
    background-color: #ff0000;
    color: #000000;
}

属性嵌套

.a{
    border{
        top:{
            width:5px;
        }
        left:{
            width:1px;
        }
    }
}
//编译后
.a{
    border-top:width:5px;
    border-left:width:5px;
}

父选择器

//例
<div class="home">
    <div class="home-title"></div>
    <div class="home-content"></div>
    <div class="home-footer"></div>
</div>

.home{
    &-title{
        background:red;
    }
    &-content{
        background:black;
    }
    &-footer{
        background:green;
    }
}
//编译后
.home-title{
    background:red;
}
.home-content{
    background:red;
}
.home-footer{
    background:red;
}

变量

$width:5px;
.a{
    width:$width;
}
//编译后
.a{
    width:5px;
}

插值

$name: a;
$border: border;
.#{$name} {
    #{$border}-color: blue;
}
//编译后
.a{
    border-color: blue;
}

混合

@mixin demo{
    weight:50px;
    height:50px;
}
.a{
    @include demo;
}
//编译后
.a{
    weight:50px;
    height:50px;
}

继承

.a{
    font-size:14px;
    height: 16px;
}
.b{
    @extend .a;
    border-width: 2px;
}
//编译后
.a{
    font-size:14px;
    height: 16px;
}
.b{
    font-size:14px;
    height: 16px;
    border-width: 2px;
}

函数

@function fontSize($data){
    @return $data/2 + px;
}
.a{
  font-size: fontSize(24);
}
//编译后
.a{
  font-size: 12px;
}

for循环

1. @for $i from start through end

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译后
.item-1 {
  width: 20px;
}
.item-2 {
  width: 40px;
}
.item-3 {
  width: 60px;
}

2. @for $i from start to end

@for $i from 1 to 3 {
  .item-#{$i} { width: 10px * $i; }
}
//编译后
.item-1 {
  width: 20px;
}
.item-2 {
  width: 40px;
}

$i 表示变量
start 表示起始值
end 表示结束值
总结：两种写法的区别就是，through包括end这个数，to不包括end这个数。