标签: sass

我不能确认这种语法是最佳实践.我想引用一个外部Sass文件并将它添加到我的最终CSS文件中,这样我的Sass表看起来更干净,而我只是仍然只发出一个HTTP请求.

例如,取"normalize"代码并将其放入.sass文件中,然后在我的sass表中简单地引用它:

@import src/normalize
@import src/droidSans

rest of code here.....

它到目前为止工作正常,但如果我朝着正确的方向前进,我找不到具体的东西.此外,我只是暂时制作静态模板......目前还没有使用Rails.

我和Sass玩了几个小时,我喜欢它!

对于单个声明块具有多个两类选择器,是否可以简化以下(即不必重复body标记):

body.shop, body.contact, body.about, body.faq {background-color:#fff;}

我必须在CSS中实现以下循环和行组合,我正在寻找有关如何有效实现它的指针.圆圈和线条应如下所示:

我可以这样实现圈子:

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

但这些线条对我来说很难理解.

圆的大小根据是否为活动步而改变,连接圆的线的颜色也根据状态而改变.我怎么做到这一点？

我知道如果您事先知道该单位,您可以从SASS中的数字中删除单位:

$number: 16px;
$without-unit: 16px / 1px;
@warn $without-unit; // 16

但是有可能在不知道单位是什么的情况下从一个数字中剥离单位吗？

@function strip-unit($number) {
  // magic code here...
}

@warn strip-unit(16px); // 16

我一直在使用Webpack,Sass和CSS模块构建一个项目.通常在我的.scss文件中,我定义了一个类,如:

:local(.button) {
    color: white;
}

在我的React组件中,在render方法中,我需要样式:

render = () => {
    const styles = require('./MyStyles.scss');
    <div className={ styles.button } />
}

这一切对世界都很好.一切都按预期工作.

今天我正在阅读CSS模块页面,注意到没有一个选择器:local()像我一样被包含,而且他们导入的样式如下:

import styles from './MyStyles.scss';

而且我觉得"哇看起来好多了,它更容易看到它被导入的地方等等.而且我不想使用它:local(),只是默认情况下本地的东西." 所以我尝试了,并立即遇到了几个问题.

1)`从'./MyStyles.scss'导入样式;

因为我在我的React文件上使用ESLint,所以我立即得到一个MyStyles.scss没有默认导出的错误,这通常是有意义的但是CSS Modules页面说明了:

从JS模块导入CSS模块时,它会导出一个对象,其中包含从本地名称到全局名称的所有映射.

所以我自然希望样式表的默认导出也是他们所指的对象.

2)我试过了 import { button } from './MyStyles.scss';

这会通过linting但button日志为undefined.

3)如果我恢复require导入我的样式的方法,:local未定义的任何内容都是未定义的.

作为参考,我的webpack加载器(我还包括Node-Neat和Node-Bourbon,两个很棒的库):

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' …

我正在开发一个sass样式表,我希望使用该calc元素动态调整某些内容的大小.由于calc元素尚未规范,我需要为目标calc(),-moz-calc()和-webkit-calc().

有没有办法让我创建一个mixin或函数,我可以传递一个表达式,以便它生成所需的标签,然后可以设置为width或height？

我想在我的Flask应用程序中包含一个sass编译器.有一种普遍接受的方式吗？

在Ionic 2中,我想$colors从文件"[my project]\src\theme\variables.scss"中访问变量.

该文件包含:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);

在一个组件中,我画一个画布.它看起来像这样:

import {Component, Input, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: 'my-graph',
})
@View({
    template: `<canvas #myGraph class='myGraph'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})

export class MyGraphDiagram {
    private _size: number;

    // get the element with the #myGraph on it
    @ViewChild("myGraph") myGraph: ElementRef; 

    constructor(){
        this._size = 150;
    }

    ngAfterViewInit() { // wait for the view to init before using the element

      let context: …

有没有为eclipse添加语法高亮和其他细节的插件用于编辑Haml和Sass？谷歌搜索似乎只是指向lucky-dip.net上的一个死项目.

注:这是无礼的话,我最感兴趣的是一种仅使用萨斯(或相近似的什么事情的解决方案.少在Eclipse)将适合我的需要.

此外,我正在使用Eclipse的App Engine插件开发Google App Engine(Java).因此,切换到另一个IDE不是一种选择.

更新:所以我现在使用Pascal的答案进行语法高亮,我已经安装了Ruby和Compass来将sass编译成css.

但是我知道sass的语法会随着2.4而改变,所以我仍然想让Aptana的Haml和Sass编辑器工作.当我尝试使用它们时,它们抛出异常而不显示文件.我有兴趣知道这是因为我错误配置了Aptana还是编辑中的实际错误.

我也对编译与Ecplise集成的Sass的任何方式都非常感兴趣,这样我就不必独立运行它了.(或者将Sass/Compass放入Ecplise构建过程中的方法.)

有没有办法让Sass打印出一个到终端的变量？