小编cim*_*non的帖子

我希望在if语句中定义变量在Sass中起作用但不幸的是我得到的错误是该变量未定义.这是我尝试过的:

@for !i from 1 through 9
    !foo = #000
    @if !i == 1
        !bg_color = #009832
    @if !i == 2
        !bg_color = #195889
    ...

    #bar#{!i} 
        color: #{!foo}
        background-color: #{!bg_color}

使用此代码,我会收到以下错误:

未定义的变量:"!bg_color".

是否可以在整个SCSS文件中使用罗盘项目的config.rb文件中定义的变量？

我刚刚升级到Sass 3.3,以便我可以使用一些新功能(BEM样式的类名,映射,@ at-root等).如果我用Sass(via sass --watch)编译我的项目,它就可以了.但是,如果我使用Compass(via compass watch)编译它,使用新的Sass功能时会出错.

我正在使用Compass 0.12.

我试图在这个图像中居中对齐文本,理想情况下使用尽可能少的CSS/HTML.如您所见,左侧的图标将其推离中心:

以下是此顶部的相关HTML和CSS:

<div class="navbarheader">
    <div class="header-left">
        <button type="button" class="pull-left btn-nav-menu">
            <i class="navbar-text fa fa-fw fa-navicon"></i>
        </button>
        <button type="button" class="pull-left" ng-click="ui.showSearch()">
            <i class="navbar-text fa fa-fw fa-search"></i>
        </button>
    </div>
    <div class="header-title">
        <div class="navbar-brand">{{ui.headerTitle}}</div>
    </div>
    <div class="header-right">
        <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
            <i class="navbar-text fa fa-fw fa-binoculars"></i>
        </button>
    </div>
</div>

CSS:

.navbarheader {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.navbarheader .header-left {
  margin-left: -0.5rem;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
}
.navbarheader .header-right {
  margin-right: -0.5rem;
}

任何想法如何保持文本中心对齐,但如果有必要允许它占据所有空白？

值得一提的是Bootstrap 4.0 alpha代码库.

所以我正在使用HAML和SASS处理一些HTML5代码.

我目前有一个ID为"restaurant-info"的DIV

HAML:

#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

上海社会科学院:

#restaurant-info {
  background: #F00;
}

在Firefox中,这是创建以下HTML:

<div id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

在浏览器中使用红色(#F00)背景正确设置此块的样式.如果我检查section元素,我会看到:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px;
  overflow:hidden;
}

但是,当我将DIV更改为某个部分时,如下所示:

%section#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

在Firefox中,现在会产生以下标记:

<section id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

但是,该部分完全失去了它的背景颜色.但是,当我去检查Firefox中的section元素时,它的样式与以前完全相同:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px; …

我刚刚进入LessCSS,我遇到了我认为是主要的限制,我想知道是否有办法做到这一点？我想说我在某处读到Sass允许用户定义的函数,但LessCSS会做同样的事情吗？

我想做什么:

@fs: 16;

// either return the value
.s(@t,@s,@u) {
    // return @t/@s*@u;
}
#elem {
    margin-top: .s(30,@fs,1em);
    width: .s(900,@fs,1em);
    .child {
        width: .s(100,900,100%);
    }
}

// or have a property argument
.s(@t,@s,@u,@p) {
    @{p}: @t/@s*@u;
}
#elem {
    .s(30,@fs,1em,margin-top);
    .s(900,@fs,1em,width);
    .child {
        .s(100,900,100%,width);
    }
}

我能想出来的唯一方法,但它非常有限,因为我必须有多个mixin:

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; }
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; }

我知道我总是可以修改less.js文件来添加一个像内置函数 …

Sass在我的css文件中输出#000和#fff作为黑白颜色值.例如:

$color: #000;

.box {
    color: $color;
}

输出到:

.box {
  color: black;
}

不应该输出十六进制值？

我有以下关键帧mixin,但它似乎生成无效的CSS:

@mixin keyframes($animationName)
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

@include keyframes(icon-one) {
        0% {
          opacity: 1;
        }
        33% {
          opacity: 0;
        }
        66% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
}

这是输出:

@-webkit-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes $animationName {
  0% {
    opacity: …

我最近创建了一个网页使用Angularjs,我正在尝试使用Google将其编入索引pushstate.

我已经做了相当的研究和升技发现,我可以用Googlebot-simulater在Google Webmaster tools模仿我的网站上谷歌访,看机器人是怎么看我的网页VS什么用户看到.

在这里,结果看起来不错,Google看到一模一样的东西,我的用户,并且所有页面/子页面获得的任何状态partially或fully.

我今天早上被告知的另一种方式Google是,通过Google搜索来查看我网站上看到的内容site:domainname.这里谈到的所有页面/子页面的列表,Google具有cached和通过点击不同的链接,你会得到其中相应的页面显示的视图.

这是我有点担心我错过了什么,因为无论我的页面是什么partially/ fully状态Goolgebot-simulation,当我查看我的页面(使用第二种方法)时,页面都是空白的.

这是我第一次索引网页,我已经尝试了几天,但没有任何运气.是否有人能说出我做错了什么/错过了什么,或者至少指出了正确的方向？或者我应该多一点耐心？

我尝试制作一个移动菜单：http://animesector.budi.upperyard.de/

您可以在顶部标题栏看到 2 个菜单按钮。右边给出内容区域变换(translateX(-200px)); 左边给出内容区域变换：translateX(200px);

负 (-) 值不会创建滚动条水平滚动条...但正值会创建滚动条。有人能解决这个问题吗？

我试图给 div 周围溢出：隐藏；但这对我不起作用。