sass

最新推荐文章于 2024-10-15 20:45:55 发布

zenkle

最新推荐文章于 2024-10-15 20:45:55 发布

阅读量148

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_35142645/article/details/104930014

版权

css 专栏收录该内容

13 篇文章

订阅专栏

sass是一种预编译器

在引入时需要将.scss文件通过easy watcher编译成.css

通过@import './文件名.css'的方式引入进来

变量复用：变量声明以$变量名形式声明

对于多个变量用于全局，可以通过@mixin 名称进行定义；在需要使用的地方使用@include 名称直接放进去

@extend 选择器名称会继承对应选择器下的所有样式，同时嵌套在内部的子元素样式也会被继承

变量存在局部变量，可以通过添加！global设置对应样式为全局变量

.html文件
 <style>
      @import './sass.css';
    </style>
  </head>
  <body>
    <div class="a">
      111111
    </div>
    <ul>
      p
      <div class="child">child1</div>
    </ul>
    <h1>cccc</h1>
  </body>


/.scss文件
$color: red;  //变量声明以$的形式
$backgroundColor: pink;
$font: 40px;

.a {
  $color: green;
  color: $color;
  background: $backgroundColor;
  font-size: $font;
  border: 1px+ 2px solid red;
  @extend ul;//继承ul的样式以及内部子元素的所有样式
}
ul {
  color: $color;

  .child {
    font-size: $font;
    font: {//font:{}形式生成font-family;font-size;font-weight
      family: Helvetica, sans-serif;
      size: 18px;
      weight: bold;
    }
  }
}
@mixin aa {//定义一个样式串
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
h1 {
  &:hover {
    color: yellow;//添加&：绑定到父元素上
  }
  @include aa;//通过@include将样式混入
}


//.css文件
.a {
  color: green;
  background: pink;
  font-size: 40px;
  border: 3px solid red;
}

ul, .a {
  color: red;
}

ul .child, .a .child {
  font-size: 40px;
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

h1 {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

h1:hover {
  color: yellow;
}