标签: bourbon

我在rails 3.1应用程序上工作.我希望有一个框架/库,涵盖渐变,阴影等.指南针已经很受欢迎,但让它与rails 3.1很好地配合对我来说是一个挑战,所以我选择了Bourbon,它似乎也越来越受欢迎.我想知道Compass和Bourbon之间的主要区别是什么.或者,如果您使用的是不同的框架,请分享.

• 为什么你更喜欢一个框架而不是另一个？
• 您是否经历过浏览器或rails等版本的兼容性问题？
• 哪一个有更大或更好的mixins库？

我试图在我的项目中开始使用Bourbon和Neat Sass库.我想用Gulp编译Sass.这是一个简单的styles任务设置,我在其中一个教程中找到了:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    neat = require('node-neat').includePaths;

var paths = {
    scss: './assets/styles/*.scss'
};

gulp.task('styles', function () {
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ['styles'].concat(neat)
        }))
        .pipe(gulp.dest('./dist/styles'));
});

gulp.task('default', function () {
    gulp.start('styles');
});

然后在主.scss文件中我放置导入:

@import "bourbon";
@import "base/base";
@import "neat";

此任务正确执行.

让我困惑的是究竟是什么includePaths？基于上面的例子,有人可以向我解释一下includePath角色是什么吗？

我试图在我的style.scss文件中使用以下include:

@include box-shadow(red 2px 2px 10px);

但是我得到一个错误:

警告:不推荐使用box-shadow,将在下一个主要版本发行版中删除它

我试图谷歌这个,但我不知道我用的是什么,是否有另外mixin我可以手动制作或使用？我在他们的文档中查看了Bourbon网站,但我找到的只有:

弃用警告:已弃用box-shadow mixin.使用官方规格.

波本威士忌font-url 在这里使用.

Rails有一个方法font_url,我很确定是被调用的.但是,我无法找到这两件事之间的联系.我已经探索过bourbon,sass,sass-rais和rails的代码库.

在哪里font-url定义,和/或它与铁轨之间的连接font_url？

更新

澄清:我的最终目标是在rubyland中定义自己的助手,这些助手是font_url的兄弟姐妹.

我正在使用波本威士忌和整洁的宝石来创建一个rails应用程序的设计.我的application.css.scss包含这个:

 @import "bourbon";
 @import "neat";
 @import "main";

但是,如果我运行'rake assets:precompile',则会发生以下错误:

rake aborted!
Undefined mixin 'outer-container'.
(in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss)
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in  `outer-container'
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5

main.css.scss文件包含:

footer#page_footer { 
 @include outer-container;
 nav{
  @include span-columns(6);
  @include shift(3);
  section#about_me_footer, section#contact_footer, section#miscellaneous_footer {
  @include span-columns(2 of 6);
 }
}
p {
 @include span-columns(6);
 @include shift(3);
}
}

有人可以给我一些建议吗？

我正在尝试使用整洁的波旁威士忌,我已经解决了大部分事情,但是我在创造突破点时遇到了一些障碍.

我更喜欢为手机,平板电脑,桌面和大型桌面制作单独的sass文件,我通常不会使用冒泡来创建我的媒体查询,因为我不喜欢它不仅仅创建一个媒体查询它通过css制作音调文件.但到目前为止,我似乎只能找到关于冒泡方法的文档.

关于如何在整洁中使用断点的文章

这是我做的:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }

我也试过这个,它确实更新了bg颜色,但没有更新可视网格:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }

我一直在使用波旁威士忌做一个桌面的第一个布局工作正常.

但是,我想做一个移动的第一个版本,从移动开始,然后继续努力.默认网格是12列,对于移动设备,我通常使用4的网格.我尝试将网格设置为4并扩展到12,但这不起作用.

除了创建标准桌面布局,然后将移动媒体查询放入每个CSS选择器并从移动版本开始并构建方式,是否有更好的方法来首先进行移动？

我是Bourbon/Neat的新手.我有一个关于嵌套的问题:我希望红色框填满整个宽度,它们之间没有沟槽.当对它们使用"@include omega"时,第一个框将删除其边距右边,但右边框仍然有边距,并且不调整其宽度.

你能告诉我如何让它们跨越整个父盒而它们之间没有任何边缘吗？

这是一个演示:http://wuergeengel.net.dd13736.kasserver.com/

这是我的标记:

<div class="container">
  <div class="box box-left"></div>
  <div class="box box-right">
    <div class="box-red-left nested"></div>
    <div class="box-red-right nested"></div>
  </div>
</div>

这是我的风格:

.container
{
  @include outer-container;
}

.box
{
  border: 1px solid black;
  height: 500px;
}

.box-left
{
  @extend .box;
  @include span-columns(4);
}

.box-right
{
  @extend .box;
  @include span-columns(8);

  .nested
  {
    border: 1px solid red;
    height: 400px;


    &.box-red-left
    {
      @extend .nested;
      @include span-columns(3 of 8);
      @include omega;
    }

    &.box-red-right
    {
      @extend .nested;
      @include span-columns(5 of 8);
      @include …

当我运行sass --watch app.sass:app.css终端显示已检测到更改为sass但不会编译为css.我正在使用Bourbon所以我的所有.scss和.sass文件都是通过mixins导入的.

恩.

 >>> Sass is watching for changes. Press Ctrl-C to stop.
 >>> Change detected to: css/2-modules/top-nav.scss

我正在使用Bourbon Refill导航菜单,并希望对其进行修改,以便在小模式下单击链接时,菜单会向上滑动.当菜单下降时,但是当单击菜单项时,菜单会保持下降状态.由于我使用带有固定顶级菜单的滚动页面,这意味着很多内容隐藏在菜单后面.

这是Codepen上的代码:

http://codepen.io/mikehdesign/pen/LVjbPv/

我现有的代码如下:

HTML

<header class="navigation" role="banner">
<div class="navigation-wrapper">
<a href="javascript:void(0)" class="logo">
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image">
</a>
<a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">Menu</a>
<nav role="navigation">
  <ul id="js-navigation-menu" class="navigation-menu show">
    <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
  </ul>
</nav>

SCSS

.navigation {
$large-screen: em(860) !default;
$large-screen: $large-screen;

// Mobile view
.navigation-menu-button {
display: block;
float: right;
margin: 0;
padding-top: 0.5em;

@include media ($large-screen) {
  display: none;
}
}

// Nav menu
.navigation-wrapper {
@include …