css开发技巧（部分结合sass使用）

/* 定义一个基本的文本样式 */
.base-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
 
/* 使用Sass的嵌套规则来简化样式定义 */
.theme-a {
  /* 定义主题颜色 */
  $primary-color: #3498db;
  $secondary-color: #2ecc71;
 
  /* 定义按钮样式 */
  .button {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: $primary-color;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
 
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
 
  /* 定义链接样式 */
  .link {
    color: $primary-color;
    text-decoration: none;
 
    &:hover {
      text-decoration: underline;
    }
  }
}
 
/* 使用Sass的mixin功能来定义一个自动居中的mixin */
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
/* 使用mixin来简化样式应用 */
.logo {
  width: 200px;
  @include center-block;
}

这个代码示例展示了如何在CSS中使用Sass的一些高级特性，如变量、嵌套规则、mixin和函数，以及如何简化和重用样式代码。