标签: sass

有谁知道如何将此代码转换为标准CSS？它不适用于他们的编辑器.

http://codepen.io/andymcfee/pen/eyahr

很难确定如何制作SASS而不是SCSS作为样式表的默认值.

我试过sass_config.rb用这个制作一个文件:

Sass::Plugin.options[:syntax] = :sass
Sass::Plugin.options[:style] = :compressed

我也尝试将它添加到environment.rb文件中.无论哪种方式我都会收到此错误:

.../config/environment.rb:7:in `<top (required)>': 
  uninitialized constant Sass::Plugin (NameError)

你们如何对使用Less/Sass构建的CSS进行维护？

我喜欢Dev Tools/Firebug的一个方面就是能够看到css样式的行号.除了必须手动搜索.less/.scss文件以找到我想要修改的代码之外,还有一种很好的方法可以使用CSS预处理器吗？

我最近一直在重构我的CSS到SASS样式表.我正在使用VS2012 的Mindscape Web Workbench扩展,每次保存SCSS时都会重新生成CSS.我开始使用与此类似的代码:

/* Starting point: */
h1 { font-size: 1.5em; /* 24px ÷ 16px */ }

然后我试着先把它重构为:

/* Recfator: */
h1 { font-size: (24px / 16px)em; }

但不幸的是,这产生了:

/* Result: */
h1 { font-size: 1.5 em; }              /* doesn't work, gives "1.5 em" */

注意额外的空间,我不想要那里.我尝试了几种替代方案,这里有一些:

h1 { font-size: (24/16)em; }           /* doesn't work, gives "1.5 em" */
h2 { font-size: 24 / 16em; }           /* doesn't work, gives "24/16em" */
h3 { font-size: (24px …

我是CSS和SCSS的新手.

在以下代码中,

.title {
    width: 718px;
    &.sub-title {
      width: 938px;
   }
}

什么做&.手段？和嵌套类一样吗？

我可以在我的.scss文件中保留这样的内联注释

thead {
    display: table-header-group; // h5bp.com/t
}

我的CSS输出中不想要这个评论.

我想在使用Angular CLI创建的Angular(4+)项目中使用Bootstrap 4和SASS.

特别是我需要:

• 使用SASS而不是CSS作为全局样式和组件样式
• 编译Bootstrap SASS源以及我的自定义*.scss样式
• 确保我的自定义样式覆盖Bootstrap源,因此我可以在需要时覆盖Bootstrap源,而无需编辑Bootstrap源本身(可以轻松升级Bootstrap源版本)
• 每当我的任何*.scss文件(包括组件和全局样式)更改为ng serve脚本时,添加监视和自动重新编译

我无法让数学 SASS 库在 Vue 应用程序中工作。它使用 Dart Sass 和 sass-loader 编译。Dart Sass 版本是1.26.3，所以数学模块应该可以工作。

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "math".

@for $i from 2 through 10 
    &:nth-child(#{$i}) { transition-duration: 300ms + $i * 50ms - 400ms * math.floor($i / 8); }
                                                                          ^^^^^^^^^^^^^^^^^^
}

• Dart Sass: v1.26.3 ( https://www.npmjs.com/package/sass )
• Sass-loader: v8.0.2 ( https://www.npmjs.com/package/sass-loader )

使用SASS,我想在IF语句中有多个条件

我现在用的是什么:

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

我天真(失败)尝试使用多个条件:

@function color-x ($alpha) {
    @if      $accent == red   && theme == light {@return red($alpha)} 
    @else if $accent == green && theme == light {@return green($alpha)} 
    @else if $accent == blue  && theme == light {@return blue($alpha)}
}

是否可能有多种条件？

我正在使用SASS的SCSS语法创建一个动态网格系统,但我遇到了麻烦.

我试图使网格系统完全动态,如下所示:

$columns: 12;

然后我创建这样的列:

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

哪个输出:

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

这很好但我接下来要做的是动态生成一个由逗号分隔的列类的长列表,基于所选的$列数 - 例如我希望它看起来像这样:

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

我累了这个:

@mixin col-x-list {
  @for $i from 1 through $columns - 1 {
  .col-#{$i}-m { float: left; }
  }
}

但输出是这样的:

.col-1 {
  float: left;
}
.col-2 {
  float: left;
} …