跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
Sass

45 篇文章
{
,

}
指向文章“如何用 CSS 自定义属性制作图标系统”的直接链接
自定义属性 Sass SVG svg 图标

如何用 CSS 自定义属性制作图标系统

SVG 是网站上图标的最佳格式,毫无疑问。它允许您拥有清晰的图标,无论屏幕像素密度如何,您也可以更改悬停时的 SVG 样式……

Avatar of Louis Hoebregts
Louis Hoebregts 于 2022 年 9 月 28 日
指向文章“使用 Sass 默认参数的实用技巧”的直接链接
mixin Sass

使用 Sass 默认参数的实用技巧

Sass 提供了 接受参数 的函数和 mixin。您可以使用 Sass 默认参数,即即使您在调用函数或 mixin 时未提供参数,参数也会具有值。

让我们在这里重点关注 mixin。……

Avatar of Chris Coyier
Chris Coyier 于 2022 年 1 月 13 日
指向文章“如何用 Sass 和 SMIL 选项制作 SVG 加载器生成器”的直接链接
生成器 加载器 Sass SMIL SVG

如何用 Sass 和 SMIL 选项制作 SVG 加载器生成器

在学习 Vue.js 的过程中,我开始构建免费的 Web 工具,这些工具涉及对 SVG 的探索,目标是学习一些关于这两者的知识!让我们看看其中一个工具:一个制作 SVG 加载器的生成器 以及……

Avatar of Mariana Beldi
Mariana Beldi 于 2021 年 8 月 26 日
指向文章“使用内联 CSS 自定义属性和 calc() 的高效无限实用程序助手”的直接链接
自定义属性 mixin Sass sass 地图

使用内联 CSS 自定义属性和 calc() 的高效无限实用程序助手

我最近编写了一个非常基本的 Sass 循环,它输出几个填充和边距实用程序类。没什么特别的,只是一个包含 11 个间距值的 Sass 地图,循环遍历以在每一边创建填充和边距类。……

Avatar of Andy Ford
Andy Ford 于 2021 年 8 月 9 日
指向文章“使用 Sass !default 创建样式表特性标志”的直接链接
Sass

使用 Sass !default 创建样式表特性标志

!default 是一个 Sass 标志,它表示对变量的条件赋值——只有当变量以前未定义或为null 时才赋值。请考虑以下代码片段

$variable: 'test' !default;

对于 Sass 编译器来说,这行代码……

Avatar of Nathan Babcock
Nathan Babcock 于 2021 年 5 月 14 日
指向文章“比较 2020 年的样式方法”的直接链接
css 模块 css-in-js less postcss Sass stylus

比较 2020 年的样式方法

在 Smashing 上,Adebiyi Adedotun Lukman 涵盖了所有这些样式方法。这是在 Next.js 的上下文中,这在某种程度上很重要,因为 Next.js 有一些特定方法可以让你使用这些工具,是 React,因此是基于组件的……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 10 月 20 日
指向文章“当 Sass 和新的 CSS 特性发生冲突时”的直接链接
calc css 变量 自定义属性 filter 渐变 max min Sass

当 Sass 和新的 CSS 特性发生冲突时

最近,CSS 添加了许多新的酷炫功能,例如 自定义属性 和新的 函数。虽然这些东西可以使我们的生活变得更加轻松,但它们也可能以有趣的方式与预处理器(如 Sass)交互……

Avatar of Ana Tudor
Ana Tudor 于 2020 年 6 月 29 日
指向文章“让我的 Netlify 构建运行 Sass”的直接链接
构建工具 jamstack netlify Sass

让我的 Netlify 构建运行 Sass

假设你想用 Eleventy 作为生成器构建一个网站。如今流行的选择!Eleventy 没有什么特别好的方法来预处理你的 CSS,如果你想这样做的话。有各种各样的……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 6 月 9 日
指向文章“如何在 CSS 中驯服行高”的直接链接
google 字体 行高 Sass 排版

如何在 CSS 中驯服行高

在 CSS 中,line-height 可能是最容易被误解,但最常用的属性之一。作为设计师和开发者,当我们想到line-height 时,我们可能会想到 印刷设计中的行距——有趣的是,这个词……

Avatar of Caleb Williams
Caleb Williams 于 2020 年 7 月 9 日
  • 1
  • 2
  • 3
  • ...
  • 5
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.