标签: sass

是否有用于定义边界方向的边界的 mixin？

我在用：

@mixin border-all($width, $style, $color) {
    border-width: $width;
    border-style: $style;
    border-color: $color;
}

它正在工作，但正如名称所说，mixin 适用于所有方向。如何定义边界方向？

我在想这样的事情： @mixin border($direction, $width, $style, $color)

有任何想法吗？

我正在从 gulp-ruby-sass 切换到 gulp-sass。Gulp ruby​​ sass 运行没有错误，但为了让我们的 Windows 开发人员的生活更轻松，我试图消除对 Ruby 的依赖。

我在设置我的 gulp 文件时安装了这些软件包，如下所示：

    var sassFiles = './app/assets/sass/**/*.{scss,sass}';
    var cssFiles = './app/assets/css';
    var sassOptions = {
      errLogToConsole: true,
      outputStyle: 'compact'
    };
    var autoprefixerOptions = {
      browsers: ['last 2 versions']
    };


  gulp.task('sass', function () {
     return gulp
    .src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(cssFiles))
    .pipe(browserSync.stream());
});

除了每次都失败在我的文件中的评论：

[08:20:39] Starting 'sass'...

events.js:154
  throw er; // Unhandled 'error' event
  ^
 CssSyntaxError: /Users/stevelombardi/github/designsystem-  3/app/assets/sass/design_system.scss:1:1: Unknown word
 ////
 ^
/// This is a poster comment. …

我正在尝试在 GitHub 页面上设置 Jekyll。在本地我没有构建/执行警告/错误，即使我使用bundle exec jekyll serve --safe. 但是导入命令在 GitHub 页面上失败。我回来的错误是：

您的 SCSS 文件css/main.scss在第 49 行出现错误：找不到要导入的文件或无法读取：base

我没有更改以下内容main.scss：

// Import partials from `sass_dir` (defaults to `_sass`)
@import
    "base",
    "layout",
    "syntax-highlighting"
;

在_config.yml中显式定义 sass_dir 变量没有帮助。有没有办法在本地调试 scss 文件？我曾尝试使用该sass命令，但它似乎不适用于 scss 文件。

我知道问题出在这@import部分上，因为如果我评论它并在 GitHub 页面上推送构建不再失败——但我的博客很丑:)

注意：我已经尝试过Jekyll 2.1中SCSS @import 中描述的内容，但它并没有让我找到某个地方。

使用 SCSS 并有一个嵌套元素，我试图将nth-of-type()规则嵌套到其中，但无论如何我输入它都不起作用。我希望每个奇数el_header元素都是白色文本，每个偶数元素都是黑色文本。

.el {
  height: 500px;
  width: 500px;

  &_header {
    height: 100%;
    width: 10%;
    background: #555;
    display: inline-block;
    line-height: 500px;
    text-align: center;

    &nth-of-type(odd) {
      color: black;
    }
    &nth-of-type(even) {
      color: white;
    }

  }
}

演示

给定 SASS 变量中的有效 CSS 边框属性值（scss 语法中的代码），我需要知道给定边框的宽度和颜色。

这可以使用 a 来完成，@function因为我多次需要此功能。

输入可能如下所示（如果缺少边框属性之一无关紧要，因为这仍然是有效的 CSS）：

• 2px dashed white
• 1px #333
• solid black

不幸的是，我什至不知道从哪里开始。我想拆分列表然后返回相应的值，但我不知道如何确定不同的类型，例如我怎么知道它的边框宽度值？

这就是我目前卡住的地方：

@function getBorderWidth($border) {
    @each $part in $border {
        @if(WHAT IS THE CONDITION?) {
            return $part;
        }
    }
}

非常感谢您的帮助！

我尝试在 Angular 4 中动态创建元素。

TS

const bookmark = document.createElement('a');
bookmark.className = 'bookmark';

社会保障局

.bookmark {
  display: block;
  background: white;
  color: #999;
  padding: 20px;
  transition: 0.3s ease all;
  border-bottom: 1px solid #DDD;
}

但是，该样式不适用于 SASS 文件中的元素。如果我直接在 JS 文件中添加样式，它的工作原理：

const bookmark = document.createElement('a');
bookmark.className = 'bookmark';

bookmark.style.display = 'block';
bookmark.style.background = 'white';
bookmark.style.color = '#999';
bookmark.style.padding = '20px';
bookmark.style.transition = '0.3s ease all';
bookmark.style.borderBottom = '1px solid #DDD';

如果我直接在 HTML 文件中创建元素，它会自动获取一个_ngcontent-c1属性，而在 TS 中创建的元素会错过这个属性（如果我在 Chrome 开发者工具 - 元素面板中手动提供它，它会从 SCSS 获取样式）。

<div …

我正在尝试为使用 ES6 类的应用程序设置 webpack。我使用 Sass，但我也导入了一个供应商 css 文件。sass 部分被导入到sytle.scssuing @import。在我添加 postcss 加载器之前，它一切正常，但现在我在尝试编译时收到一条错误消息，但它失败了。

在webpack.config.js 中：

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css"
})

const config = {
    .
    .
    .

    module: {
        rules: [{
            test: /\.(scss|css)$/,
            use: extractSass.extract({
                use: [{
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }},
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    { 
                        loader: "css-loader", options: {
                        sourceMap: true,
                        importLoaders: 3,
                        modules: true
                    }}
                ],
                fallback: "style-loader"
            })
        }
       ]
      },
     plugins: [
        extractSass …

我正在使用 node-sass 将 scss 文件编译为 WebStorm 内的 css。

这些是我在我的目录中的设置。

程序：

/usr/local/bin/node-sass

参数：

--output $ProjectFileDir$/css/ --compile --map $FileName$

要刷新的输出路径：

$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.map

我希望将 css 文件写入根目录下的 css 目录中。然而，这是我从 WebStorm 中得到的编译错误

/usr/local/bin/node-sass --output /Users/melissa/Dropbox/codepen/sample/core-fe/css/ --compile --map styles.scss
path.js:28
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.extname (path.js:1471:5)
    at getOptions (/usr/local/lib/node_modules/node-sass/bin/node-sass:186:40)
    at Object.<anonymous> (/usr/local/lib/node_modules/node-sass/bin/node-sass:368:15)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3) …

我有一个项目，我想将一些引导程序集成到我的 html 文件中以进行 ui 开发。我知道标准网格大小是 12，我想将网格空间的数量从 12 更改为 24。我知道有一种方法可以从文档中做到这一点，但我不知道如何将它集成到哪里。

这是引导程序文档

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

我在哪里把它放在我的代码中。

CSS file
HTML file
Js file
....

我使用amg-snazzy-window 中的 amg-snazzy-window

有解释说我可以覆盖 css 类，但是当我这样做时它不起作用。这是我的例子：

地图组件.html

   <agm-snazzy-info-window [closeWhenOthersOpen]="true">
         <ng-template>
            My snazzy window
         </ng-template>
   </agm-snazzy-info-window>

我想要更广泛的内容，所以我做了这个：map-component.scss：

.si-content {
  width: 500px !important;
}

我究竟做错了什么？