sass 安装使用

最新推荐文章于 2024-10-08 17:48:41 发布

橙子a123

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量107

点赞数

文章标签： sass 前端

本文链接：https://blog.csdn.net/weixin_68169041/article/details/126856697

版权

本文介绍了如何在Sass中使用变量、嵌套规则、@import指令导入多个SCSS文件，以及mixin和include的运用。内容涵盖了基础语法到高级特性，如bordered mixin的调用和组件继承的设计。

摘要由CSDN通过智能技术生成

npm install -g sass （第一）

$asd : red (第二变量的使用)

（第三嵌套使用）

nav {
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
li {
  display: inline-block;
  }
a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  }
}

（第四导入多个scss文件|| 导入文件名）

@import "asd";
@import "litobj";
@import "index";

（第五 mixin和include使用）

@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}
.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

（第六继承）

sass代码

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  @extend .button-basic;
  background-color: red;
}

.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}