sass 相关问题

我已经准备好了css代码，但是我想将其重写为scss。但是当我这样做时，嵌套不起作用怎么办？ html: 我已经准备好了css代码，但我想将其重写为scss。但是当我这样做时，嵌套不起作用怎么办？ html: <header class="header"> <div class="container"> <div class="header__side"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <span>Catalog</span> <ul class="header__list"> <li class="header__item"> <a href="#">Channels</a> </li> <li class="header__item"> <a href="#">Chats</a> </li> <li class="header__item"> <a href="#">Bots</a> </li> </ul> </li> </ul> </nav> </div> </div> </header> CSS： .header__nav .header__list { padding: 0; margin: 0; list-style: none; position: relative; } 这就是我正在努力做的事情 .header { ... &__nav { margin: 10rem 0; &__list { padding: 0; margin: 0; list-style: none; position: relative; } } } 我只是有很多这样的块，我不想重复自己并像这样写它们 .header { &__nav &__list &__item {} &__nav &__list &__list {} &__nav &__list &__item:hover>&__list {} &__nav &__list &__list &__item {} } 当您将 SCSS 与 BEM 结合使用时，将元素嵌套在块内而不是其他元素内非常重要。这是重写代码的更好方法。 .header { // Main block &__nav { margin: 10rem 0; // Element under header__nav &__list { padding: 0; margin: 0; list-style: none; position: relative; // Element inside header__nav__list &__item { // Styles for list item } // Nested list inside header__nav__list &__list { // Styles for nested list // Hover state for item to display nested list &__item:hover > & { // Styles for nested list when hovered } } } } } <header class="header"> <div class="container"> <div class="header__side"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <span>Catalog</span> <ul class="header__list"> <li class="header__item"> <a href="#">Channels</a> </li> <li class="header__item"> <a href="#">Chats</a> </li> <li class="header__item"> <a href="#">Bots</a> </li> </ul> </li> </ul> </nav> </div> </div> </header>

html css sass bem

回答 1 投票 0

我在使用 gulp 压缩 css 和 js 文件时遇到问题

这些文件正在缩小，但谷歌指责这些文件的重量，并表示使用 gzip 来压缩它们。但我不知道如何在html中使用gzip。我需要有关如何压缩这些文件的帮助

css sass gulp

回答 1 投票 0

旧版 JS API 已弃用，并将在 Dart Sass 2.0.0 中删除

我之前使用的是create-react-app，现在我将同一个项目切换到vite，一切正常，除了我收到如下警告日志弃用 [legacy-js-api]：遗留 JS A...

reactjs sass vite

回答 1 投票 0

使用Flex Wrap时，高度如何通过最小高度与第一行相同？

目前，我使用 Flex 换行在移动到下一行时留出一个空格。然而，如果第一个的高度变长，则第一个柔性包装线的高度不会变长。目前，我使用 Flex 换行在移动到下一行时留出一个空格。但是，如果第一个高度变长，第一个柔性换行线的高度不会变长。 <div class="parent"> <div class="unique-wrapper"> <div class="unique_element">First</div> </div> <div class="child-wrapper"> <div class="child">Second</div> <div class="child">Third</div> <div class="child">Fourth</div> <div class="child">Fifth</div> </div> </div> div { font-family: arial, sans-serif; margin: 5px; color: white; border: 1px dotted black; } .parent { display: flex; width: 300px; } .unique_element { background-color: Crimson; padding: 10px 10px 10px 10px; } .unique-wrapper, .child-wrapper { border: none; margin: 0; } .unique-wrapper { flex: 3; } .child-wrapper { flex: 7; display: flex; flex-wrap: wrap; } .child { width: auto; background-color: Cornflowerblue; padding: 10px 10px 10px 10px; } 我的结果增加高度时随着第一个高度的增加，第二个和第三个的长度也必须增加，但在当前代码中，只有第一个更长。我搜索并发现有一种方法可以添加隐藏元素，但我无法使用 data.map 为特定元素提供类名。我该怎么办？我想要的结果我想知道需要做什么工作才能使它看起来像上图。这是因为，你的 unique_element 是 flex 的一个子元素，而 child-wrapper 是另一个。因此，如果 unique_element 的高度增加，它会考虑与 child-wrapper 的关系。为了实现您的功能，您可以将其设为 3-column grid，也可以将第一个 3 个元素放入一个子元素中，将其他 2 个元素放入下一个元素中。这取决于您的用例。

html css sass flexbox

回答 1 投票 0

如何在Vite中设置sassOptions

使用 webpack，我们可以像下面这样设置 sassOptions： { 加载器： require.resolve('sass-loader'), 选项： { sassOptions: { QuietDeps: true }, }, } 根据 vite 文件，我正在尝试合作...

sass vite

回答 4 投票 0

Angular 16 - '#{map.get($map, 'name')} 的主题不包含 #{$key}';

我正在尝试从 Angular 版本 15 升级到 16。更新必要的包后，我收到错误： HookWebpackError：模块构建失败（来自 ./node_modules/sass-

css angular sass

回答 0 投票 0

无法将 CSS 添加到除使用 :not(:last-child) 的类之外的所有类

这是我的 HTML： ... 这是我的 HTML： <div class="TwoSidesLayout"> <div class="LeftSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> </div> <div class="RightSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> </div> </div> 我正在尝试将 margin-bottom: 10px 的 CSS 添加到 .mainItem 类中。但是，如果它是 .mainItem 中的最后一个 .LeftSide 类或 .mainItem 中的最后一个 .RightSide 类，那么我只想删除最后一个类中的 margin-bottom: 10px。例如，假设 .LeftSide 或 .RightSide 有 100 个 .mainItem 类，最后 100 个 .mainItem 类不应该是 margin-bottom: 10px。我以为我可以通过使用 :not(:last-child) 轻松实现此目的，但由于某种原因这不起作用。它不会将 margin-bottom: 10px 添加到任何 .mainItem 中。我认为它将每个 .mainItem 视为最后一个孩子。这是我尝试过的： .TwoSidesLayout{ .LeftSide, .RightSide{ .mainItem:not(:last-child) { margin-bottom: 10px; } } } 这不是一个答案，而是一个演示，以表明您的 :not(:last-child) 方法显然有效： .TwoSidesLayout{ div {border:1px solid grey; margin: 2px} .LeftSide, .RightSide{ display:inline-Block; width:120px; .mainItem:not(:last-child) { margin-bottom: 20px; } } } <div class="TwoSidesLayout"> <div class="LeftSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> </div> <div class="RightSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> </div> </div>

css sass css-selectors

回答 1 投票 0

如何在生产中使用React动态导入SCSS文件？

一些背景：我正在构建我的第一个大型 React 应用程序，并且我决定同时使用 SASS + Bootstrap。由于我的项目的设置方式，我在动态更改时遇到困难...

reactjs sass themes bootstrap-5 sass-variables

回答 1 投票 0

sass 相关问题

最新问题