• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

SCSS 使用方法

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0722/57014.html 1190000019830803

嵌套选择器

<!-- HTML -->

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
//comment:scss

.box{
  border:1px solid red;
  >ul{
    background: blue;
    > li{
      color:white;
    }
  }
} 

/* css */

.box{ border:1px solid red; } 
.box ul{ background: blue; }
.box ul li{color:white;}

变量


//comment:scss

$borderColor:red;
$borderWidth:1px;
// $kong:$borderWidth;   不同的变量 是同一个值

.box{
  border:$borderWidth solid $borderColor;
  >ul{
    background: blue;
    > li{
      color:white;
    }
  }
}

mixin 用法

//comment:scss

@mixin border-style{
  border:1px solid red;
}
.box{
  @include border-style;
  >ul{
    background: blue;
    > li{
      color:white;
    }
  }
}

接收参数 并且有默认值

//comment:scss

@mixin border-style($border-color:red){ //像js一样可以接收参数
  border:1px solid $border-color;
}
.box{
  @include border-style; //什么都不传默认为红色
  >ul{
    background: blue;
    > li{
      @include border-style(green); //什么都传了绿色 就为绿色
    }
  }
}

注释写法

//comment:该注释只是在.scss源文件中有,编译后的css文件中没有

/* comment:编译后的css文件中也有 */


本章 完 。


相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!