标签: css-preprocessor

我正在使用媒体查询mixins编译我的sass文件时出错.我按照几个教程,但它不会编译.我正在使用Sass 3.3.0.alpha.67 (Bleeding Edge).

这是我的代码

/* Included at the end */
@mixin mobile-only {
    @media (max-width : 320px) {
        @content;
    }
}

/* Included where the rest of my sass is */
body { @include mobile-only { 
            display: none; 
    } 
}

我正在使用scout编译并观察变化.还有什么我需要做的吗？

我有一个关于混淆 HTML 和 CSS 文件的最终输出的问题。让我留下这个 HTML 代码，并在单独的 CSSfile 中声明相应的类名：

<div class="header">
  <div class="logo"></div>
  <div class="session-info"></div>
</div> 

<div class="bank-account-content">
  <div class="account-info"></div>
  <div class="account-info"></div>
  <div class="here-is-my-ss-number"></div>
</div> 

有没有办法获取我的 HTML/CSS 文件并以某种方式处理它，它将在 HTML/CSS 文件中获取原始类名/id 并随机生成新文件以用无意义的类名替换现有的类名/id/ id 来掩盖最终输出？例如，上面的输出将被处理并产生如下所示的 html，其中包含定义了抽象类/id 名称的相应样式表。

<div class="1dcx4y">
  <div class="1354fs"></div>
  <div class="f3wecd"></div>
</div> 

<div class="retv5">
  <div class="dgee2f></div>
  <div class="fhg54h"></div>
  <div class="dgd426"></div>
</div> 

运行Sass 3.4.3,Compass 1.0.1,Gulp 3.8.8和Gulp-compass 1.3.1

gulp.task('compass', function() {
    gulp.src('comp/sass/style.scss')
        .pipe(compass({
            sass: 'comp/sass',
            image: 'dev/theme/images',
            style: 'compressed'
        })
        .on('error', gutil.log))
        .pipe(gulp.dest('dev/theme/css'))
});

指南针任务正在编译sass但压缩不起作用.它输出一个正常的未压缩的css文件.

我有Webstorm 7(在Win7上)将我的.less文件编译成带有源映射的缩小的css(在nodejs v0.10.26上使用lessc,从Webstorm中的File Watcher运行),然后我可以在生成的css上自动运行autoprefixer插入供应商前缀.

我不知道该怎么办,将两个步骤结合起来.可以在Webstorm中链接File Watchers吗？

可能的方法:

• 创建一个从文件观察器调用的批处理脚本,然后按顺序调用less和autoprefixer.
• 创建一个调用less的node.js脚本/模块,然后创建autoprefixer.
• 使用自定义扩展(例如,.unprefixedcss)将较少的转换器输出css,然后具有专门用于该扩展的文件监视器.
• 我错过了什么？

使用Polymer,我可以通过添加<style>标记在元素定义中包含我的CSS样式.我想做的是为这些样式添加预处理器.像https://autoprefixer.github.io/这样的东西会很棒.

有没有外部CSS文件的方法吗？

看看下面的 CSS 样式，我计划将 LESS 和 SASS 用于两个不同的项目，这在preprocessors.

.longDots {
  content: "  ......................................................................................................";
}

.shortDots {
  content: "....................";
}

究竟是什么，我想避免重复点将其作为单点，并且太可配置而无法将其更改为 -, #, *

mixin像下面这样的东西。

 .longDots {
    content: repeater('.', 25);
}

.shortDots {
    content: repeater('.', 10);
}

.longDashes {
    content: repeater('-', 25);
}

.shortDashes {
    content: repeater('-', 10);
}

是否可以使用sass（.scss）检查文件是否存在我想导入一个文件，如果它存在，如果不导入另一个文件。那可能吗？

我没有使用指南针（建议重复问题）

我正在撰写论文,并没有真正找到任何一个问题的明确答案.
预处理器和转换器(或转换器)之间有什么区别？

在搜索答案时,我已经发现编译器和转换器之间有什么区别.

例如CSS预处理器(sass,less)和JS转换器(coffee script,typescript).它们是一样的吗？我的意思是,他们做同样的事吗？

在某些地方它被称为"JS预处理器",但是当我谷歌那时,我找不到任何有价值的信息.

现在,我在想,预处理器只是将sass转换为CSS,使浏览器更具"可读性".并且转换器编译整个过程,从咖啡脚本语言到javascript语言.

所以我就在这里,转换器只是编译整个事物(这是更大的过程),预处理器只是转换为更"可读"？

或者Sass,例如,就像CSS的不同语言一样,咖啡脚本来自javascript？

先感谢您!

我的SCSS中有以下循环:

@for $i from 1 to 5 {
    .thing-#{$i} {
        @if $i == 1 {
            & + & { /* some styles */ }
        }

        @if $i == 2 {
            & + & + & { /* some styles */ }
        }

        @if $i == 3 {
            & + & + & + & { /* some styles */ }
        }

        @if $i == 4 {
            & + & + & + & + & { /* some styles */ …

我试图弄清楚如何使用 SASS 在每个循环上声明和访问嵌套列表。我想在第一个循环中使用第二级循环？

这是我的示例代码：

$chap1-blocks:  (5
                    (1, -70, 30),
                    (2, -130, 80),
                    (3, 10, -30),
                    (4, -90, 50)
                ),
                (7  
                    (1, -70, 30),
                    (2, -130, 80),
                    (3, 10, -30),
                    (4, -90, 50)
                ),
                (10 
                    (1, -70, 30),
                    (2, -130, 80),
                    (3, 10, -30),
                    (4, -90, 50)
                );

@each $chap1-block in $chap1-blocks {
    $section:  nth($chap1-block, 1);  //5
    $row:      nth($chap1-block, ??); //1
    $top:      nth($chap1-block, ??); //-70
    $bottom:   nth($chap1-block, ??); //30

    .section-#{$section} {
        .row-#{$row} {
            margin: #{$top}px 0 #{$bottom}px;
        }
    }
}

第一组的期望输出： …