文章标签

JavaScript 和 CSS 已经并存了 20 多年。然而，在它们之间共享数据一直非常困难。当然，也有一些大型的尝试。但是，我想到了一种简单直观的方案 - …

这是一篇来自 Brad Frost 的很棒的博文，他在文中为我们介绍了一个有趣的示例。假设我们正在制作一个主题，并且我们有一些像这样的 Sass 代码

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}

对于那些可能没有设计背景的人来说，选择调色板通常基于个人喜好。选择颜色可以使用在线颜色工具，从图像中取样，“借用”喜欢的品牌的颜色，或者仅仅…

Sass 刚刚发布了一项您可能在其他语言中也见过的主要新功能：**模块系统**。这对@import来说是一个巨大的进步，它是 Sass 最常用的功能之一。虽然当前的@import规则允许您…

在一个新项目的开始，Sass 编译几乎是眨眼之间就完成了。这感觉很棒，尤其是在与 Browsersync 配合使用时，它会为我们重新加载浏览器中的样式表。但是，随着 Sass 代码量的…

我最喜欢的向网站添加图标的方法之一是将它们作为data URL背景图像添加到 CSS 中的伪元素（例如::after）。这种技术提供了一些优势

• 它们不需要任何额外的 HTTP 请求

假设您想移动一个元素在:hover上，以获得有趣的视觉效果。

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

不错不错。但是，如果您有…

我认为我们很多使用 Sass 映射的地方都可以用 CSS 自定义属性来替代 - 但请先听我解释一下。

在设计组件时，我们经常需要使用组件的相同结构…

我喜欢嵌套我的@media 查询断点。对我来说，这可能是 Sass 最重要的功能。也许我选择了一种方法，并像这样使用它

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }