主页 / 问题

问题[sass]

Martin Hope
Konstantin_SH
Asked: 2022-06-13 20:33:48 +0000 UTC
  • 0

我了解混合。据我了解，我可以在那里传递一个变量并用它做一些事情：

$var: "padding"
@mixin exemple($var){
...
}

是否可以调用这样的 mixin@include exemple("padding")并对属性做一些事情padding？在 scss 中，您还可以将默认值传递给变量，如js？也就是说，如果你写：

@mixin exemple($var: "padding"){
$var: 20px;
}

那么$var在连接mixin的时候，理论上是可以传任意字符串的。有没有办法将此字符串转换为属性？

sass
Martin Hope
midnightelf18
Asked: 2021-11-04 04:01:58 +0000 UTC
  • 0

有一个这样的文件夹结构./src/scss/：

--> scss
----> root.scss
----> header.scss
----> body.scss
----> footer.scss

那些。文件夹中scss有 4 个文件.scss。我正在尝试将它们捆绑在一起app.css，但它不起作用。

因此，webpack.mix.js我尝试这样做：

mix.sass(
    [
        './src/scss/root.scss',
        './src/scss/header.scss',
        './src/scss/body.scss',
        './src/scss/footer.scss'
    ], './dist/app.css'
)

但我得到一个错误

AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src


他也这样做了：

mix.sass('./src/scss/root.scss', './dist/app.css')
   .sass('./src/scss/header.scss', './dist/app.css')
   .sass('./src/scss/body.scss', './dist/app.css')
   .sass('./src/scss/footer.scss', './dist/app.css');

但所以他只写了app.css出来footer.scss ¯\_(ツ)_/¯


如何从 laravel-mix 中的 .sass 文件制作一个包？
sass
Martin Hope
Никита
Asked: 2020-06-26 22:52:15 +0000 UTC
  • 0

我会解决这个问题：

有一个带有数字和按钮的标题：

<body>
  <header class="header">
    <div class="header-contacts">
      <div class="header-contacts__phone">8 (123) 000-00-00</div>
      <div class="header-contacts__phone">8 (123) 000-00-00</div>
      <button class="header-contacts__button">Заказать звонок</button>
    </div>
  </header>
</body>

样式“style.sass”：

@import: 'header'
@import: 'variable'

标题样式文件“_header.sass”：

.header
  padding-top: 50px
  &-contacts
    display: flex
    justify-content: flex-end
    &__phone
      font-size: 22px
      &__button
        font-size: 14px
        color: $text-color-dark

还有一个带有变量的单独文件，它连接到 style.sass 文件：

“_variable.sass”：

@text-color-dark: #353535

并且 gulp 应该毫无问题地将所有这些收集到一个 css 文件中（至少它曾经收集它）。现在他开始抱怨：

Error in plugin "sass"
Message:
    src\sass\_header.sass
Error: Undefined variable: "$text-color-dark".
        on line 11 of src/sass/_header.sass
        from line 6 of src/sass/style.sass
>>                      color: $text-color-dark; } } }

对不起，如果这是一个很长的问题，但我不知道如何解释它。

sass
Martin Hope
Василик Віктор
Asked: 2020-07-09 12:58:01 +0000 UTC
  • 0

大家好，我有一个错误：

Error: Illegal nesting: Only properties may be nested beneath properties.
        on line 4 of dist/sass/_test.sass
>>     @media screen and (max-width: $break_s1920) {

   ----^

这是损坏的代码（即使放在单独的文件中）：

$break_s1920: 1920px

=s1920-block()
  @media screen and (max-width: $break_s1920)
    @content

我尝试更改VS Code设置并重新安装它，重新安装gulp-sass，重写代码（变量按顺序排列，使用了 mixins），甚至更改了 Windows）

有趣的是，这段代码和其他一切都有效：

=s1680-block()
  @media screen and (max-width: $break_s1680)
    @content

错误突然出现。在 VS Code 中，我使用tabs == 2 个空格，在代码中是一样的。也许语法已经改变，但 Sass 文档没有？）或者你需要以某种特殊方式设置 Vs Code
给我直接的帮助，谢谢！

sass