标签: bourbon

我已经安装了rvm和bourbon.然后我将波旁威士忌安装到我的/ css目录中.但是,当我尝试

@import 'bourbon/bourbon'; 

我收到此错误:

Sass::SyntaxError: File to import not found or unreadable: bourbon/bourbon.

我已经检查了其他线程有相同的问题,但似乎没有解决我的问题.如何让这个错误消失并让波本威士忌正确导入？

我想为不同的浏览器提供不同的字体（请参阅此问题）。

用Sass / Bourbon可以做到这一点吗？

这是我到目前为止的内容：

<!--[if IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: false);
<![endif]-->
<!--[if !IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: true);
<![endif]-->

我正在尝试将波本威士忌作为依赖项添加到使用的项目中grunt-contrib-sass.node-bourbon有关于grunt和Sass集成的以下内容:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        // THIS IS THE LINE I ADDED TO MY CONFIG
        includePaths: require('bourbon').includePaths,
        outputStyle: 'compressed'
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

但是,当运行grunt时,我收到以下错误:

OptionParser::InvalidOption: invalid option: --include-paths

给出的任何路径数组都会出现此错误includePaths,而不仅仅是波本威士忌.

我究竟做错了什么？

根据波旁文献,您可以使用 #{$all-text-inputs}这个:

#{$all-text-inputs} {
  border: 1px solid green;
}

进入这个:

input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"] {
  border: 1px solid green;
}

有没有办法用Bourbon或Sass申请:hover或:focus每个？

#{$all-text-inputs:hover}并#{$all-text-inputs}:hover没有奏效.

我正在开发像这样的面包屑:

<div class="breadcrumb">
  <ul>
    <li><a href="behandelingen.html">Behandelingen</a></li>
    <li><a href="behandelingen-cat.html">Gelaatsverzorgingen</a></li>
    <li class="active">Environ Discovery</li>
 </div>

我正在使用Sass设计面包屑样式:

.breadcrumb {
  @include outer-container;
  @include shift(4);
  margin-top: em(50);
  padding-left: em(14);
  li {
    float: left;
    margin-right: 15px;
  }
}

在每个列表项后添加">>",我在我的li定义中添加了这个:

&:after{
  content: ">>";
  margin-left: 10px;
}

这工作正常,但现在我想添加一个规则,定义不向最后一个列表项添加">>".我试过这个:

&:after:not(li:last) {
  content: ">>";
  margin-left: 10px;
}

但这使得所有">>"都消失了.

有人可以告诉我如何在每个列表项后添加">>",除了最后一个？

看来,Bourbon Sass图书馆的苦味为项目奠定了基础.您是否需要normalise.css与苦味或苦味一起使用才能做同样的工作？

在我看来,使用normalise.css有点多余.

我是对还是错？

我需要一个带有图像可选的表单，我在谷歌搜索过，我尝试使用选择选项，但这不起作用

你能给出解决这个问题的任何想法吗？

我正在使用波旁威士忌和整洁（SASS）

@include span-columns(12)和之间有什么区别@include row()？我应该在何时使用？

所以我正在建立一个新项目,我想通过npm使用Bourbon来scss.这需要做npm install bourbon,然后在编译时以某种方式将路径传递给node-sass.

我当前的sass脚本如下所示:

node-sass --output-style compressed -o build/css/ scss/

和波旁文档表明,我需要做的是这样的:

require("bourbon").includePaths

但是我如何通过命令行执行此操作？

我有一个 SASS 变量：

$default-padding: 15px

我想用它来使用 calc 函数设置 CSS 宽度属性。

我要根据 $default-padding 变量的值进行各种计算。例如，宽度将为 100% - (2 * $default-padding)。因为左边和右边都有填充。

我正在尝试设置一个局部变量（使用 Bourbon 的 strip-unit 方法）：

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px;

在这个用例中，我希望这个变量的结果是 30px，我想在以下规则中使用它：

.popup {
    width: calc(100% - #{$default-padding-left-and-right});
}

这不起作用，结果 CSS 是：

.popup {
    width: calc(100% - strip-unit(15px)px);
}

任何想法我做错了什么？