Tag: sass

Sass嵌套：hover不起作用

我已经写了这个代码，但是不起作用。 我的问题是什么？ .class { margin:20px; :hover { color:yellow; } }

尝试在节点0.12上重新安装`node-sass`？

我想使用谷歌networking入门套件。 我安装了node.js v0.12.0， node-sass ＆gulp。 然后跑： $ sudo npm install 当我inputgulp serve然后得到这个错误： Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'… 'styles' errored after 93 ms Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding 我重新安装节点和吞咽，但这没有帮助。 接下来我应该做什么？

SCSS和Sass有什么区别？

从我一直在阅读的内容来看，Sass是一种使CSS变得更强大的语言，它支持variables和math。 SCSS有什么不同？ 它应该是相同的语言？ 类似？ 不同？

Rails中正确的SCSS资产结构

所以，我有一个app/assets/stylesheets/目录结构，看起来像这样： |-dialogs |-mixins |—buttons |—gradients |—vendor_support |—widgets |-pages |-structure |-ui_elements 在每个目录中，有多个sass部分（通常是* .css.scss，但是有一个或两个* .css.scss.erb）。 我可能会假设很多，但由于*= require_tree . ，rails应该自动编译这些目录中的所有文件*= require_tree . 在application.css中，对吗？ 我最近尝试通过删除所有颜色variables并将它们放在根app/assets/stylesheets文件夹（_colors.css.scss）中的一个文件中来重构这些文件。 然后我在名为master.css.scss的根app/assets/stylesheets文件夹中创build了一个文件，如下所示： // Color Palette @import "colors"; // Mixins @import "mixins/buttons/standard_button"; @import "mixins/gradients/table_header_fade"; @import "mixins/vendor_support/rounded_corners"; @import "mixins/vendor_support/rounded_corners_top"; @import "mixins/vendor_support/box_shadow"; @import "mixins/vendor_support/opacity"; 我不太了解rails如何处理资产编译的顺序，但是显然对我不利。 看来没有任何文件意识到他们有任何variables或混入被导入，所以它会抛出错误，我不能编译。 Undefined variable: "$dialog_divider_color". (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb) Undefined mixin 'rounded_corners'. (in /home/blah/app/assets/stylesheets/widgets.css.scss) variables$dialog_divider_color在_colors.css.scss中明确定义， _master.css.scss是导入颜色和我所有的混合。 […]

CSS calc（）函数中的Sassvariables

我试图在Sass样式表中使用calc()函数，但是我遇到了一些问题。 这是我的代码： $body_padding: 50px body padding-top: $body_padding height: calc(100% – $body_padding) 如果我使用文字50px而不是我的body_paddingvariables，我得到了我想要的。 但是，当我切换到variables，这是输出： body { padding-top: 50px; height: calc(100% – $body_padding); } 我如何让Sass认识到它需要replacecalc函数中的variables？

通过一系列的颜色与sass循环

有三种颜色的列表是可能的： $ color-list：xyz; 然后通过循环来应用这三种颜色，并将它们添加到无序列表项上。 我想要： <li>row 1</li> (gets color x) <li>row 2</li> (gets color y) <li>row 3</li> (gets color z) <li>row 4</li> (gets color x) 等等等等。 我试图使用@each（ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive ）函数，但是它只是在第一次通过列表后停止应用颜色。 我希望颜色能够保持骑行，直到列表中的项目用完为止。 这是可能的与sass？

使用Gulp.js和globbing模式修改文件（相同的目标）

我有一个尝试将.scss文件转换成.css文件（使用gulp-ruby-sass）的gulp任务，然后将得到的.css文件放到find原始文件的相同位置。 问题是，因为我正在使用globbing模式，所以我不一定知道原始文件的存储位置。 在下面的代码中，我试图用gulp-tap来进入stream，并找出当前文件stream的读取文件path： gulp.task('convertSass', function() { var fileLocation = ""; gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(tap(function(file,t){ fileLocation = path.dirname(file.path); console.log(fileLocation); })) .pipe(gulp.dest(fileLocation)); }); 基于console.log(fileLocation)的输出，这段代码看起来应该可以正常工作。 但是，由此产生的CSS文件似乎被放在比我预期的更高的目录。 它应该是project/sass/partials ，结果文件path只是project/partials 。 如果有这样一个更简单的方法，我一定会更加欣赏这个解决scheme。 谢谢！

占位符Mixin SCSS / CSS

我正在尝试为sass中的占位符创build一个mixin。 这是我创build的mixin。 @mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} } 这是我想如何包含mixin： @include placeholder(font-style:italic; color: white; font-weight:100;); 显然这是不行的，因为所有的冒号和分号被传递给mixin，但是…我真的只想input静态的css，并通过它完全像上面的函数。 这可能吗？

如何才能从Scss样式表导入variables和混合？

我正在使用Zurb Foundation 4（S）CSS框架，并且遇到大量重复样式的问题。 这是因为在@ @import 'foundation'中的每个文件中，Foundation的所有样式也被导入（ body ， .row ， .button和friends的规则）。 这会导致SCSS编译时间过长，并且很难在Chrome浏览器中浏览Web开发者控制台，因为Zurb的所有样式都被声明为四次或五次。 为了减轻这一点，我创build了一个globals scss文件，其中包含了Foundation使用的可覆盖variables（从foundation_and_overrides.scss复制粘贴，然后是foundation_and_overrides导入全局variables）。 只导入globals.scss文件只会在不使用Foundation mixins的文件中删除重复项。 它在使用Foundation mixins的文件中：我能否只导入SCSS文件中的mixins，而不导入具体的Foundation样式？

＆符号（＆）结束，并且是SASS中的select器的一部分

我有一个问题，我正在努力。 我有这个mixin（这是一个尝试，以减lesssass）： @mixin button-variant($color, $background, $border) { … .foreverAlone{ … } .iThink .illNeverWork& { color: $pinkUnicornRainbow; … } } 这显然是不工作的：D我想它会产生像这样的东西： .callerClass .foreverAlone{ … } .callerClass .iThink .illNeverWork.callerClass{ color: #123ABC; … } mixin在各种div类中调用，所以不可能使其变成静态的（很容易）。 有没有什么解决方法从一些萨斯职业（或不亲，但比我更聪明）？ 感谢大家的关注和分享您的解决scheme。