Questions tagged «sass»

根据我的阅读，Sass是一种语言，它通过变量和数学支持使CSS更加强大。 SCSS有什么区别？是否应该使用相同的语言？类似？不同？

1900 css  sass 

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

1343 css  sass  css-calc 

无论如何，是否可以使用Sass的@import命令导入常规CSS文件？尽管我没有使用sass的所有SCSS语法，但我仍然喜欢它的合并/压缩功能，并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它

508 css  sass 

我已经通过npm install安装了节点模块，然后尝试在命令提示符下执行gulp sass-watch。之后，我得到以下回应。 [18:18:32] Requiring external module babel-register fs.js:27 const { Math, Object, Reflect } = primordials; ^ ReferenceError: primordials is not defined 在gulp sass-watch之前尝试过这个 npm -g install gulp-cli

363 node.js  sass  gulp  gulp-sass 

我在Scss文件中配置了一些字体，如下所示： @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } 实际的字体文件存储在/ app / assets / fonts /中 我已添加config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的application.rb文件 并且编译的CSS源代码如下： @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); } 但是，当我运行该应用程序时，找不到字体文件。日志： 在2012-06-05 23:21:17 +0100投放的资产/icoMoon.ttf-127.0.0.1开始获取“ …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

我正在为当前项目使用Sass（.scss）。 以下示例： 的HTML <div class="container desc"> <div class="hello"> Hello World </div> </div> SCSS .container { background:red; color:white; .hello { padding-left:50px; } } 这很好。 使用嵌套样式时可以处理多个类吗？ 在上面的示例中，我正在谈论这一点： 的CSS .container.desc { background:blue; } 在这种情况下，所有div.container通常会red，但div.container.desc会是蓝色的。 我该如何将它container与Sass 嵌套在一起？

332 sass 

我是Angular的新手，我来自Ember社区。尝试使用基于Ember-CLI的新Angular-CLI。 我需要知道在新的Angular项目中处理SASS的最佳方法。我尝试使用该存储ember-cli-sass库来查看它是否可以正常运行，因为Angular-CLI的许多核心组件都运行于Ember-CLI模块。 它没有用，但还是不确定我是否配置错误。 另外，在新的Angular项目中组织样式的最佳方法是什么？最好将sass文件放在与组件相同的文件夹中。

329 angular  sass  angular-cli 

我的SCSS文件中有这个： .class-a{ display: inline-block; //some other properties &:hover{ color: darken(#FFFFFF, 10%); } } .class-b{ //Inherite class-a here //some properties } 在b类中，我想继承的所有属性和嵌套声明class-a。怎么做？我尝试使用@include class-a，但是在编译时只会抛出错误。

309 inheritance  sass 

我想使用Google Web Starter Kit。我安装了node.js v0.12.0 node-sass和＆gulp。 然后运行： $ sudo npm install 当我键入gulp 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 我重新安装了node和gulp，但这没有帮助。 接下来我该怎么办？

263 node.js  sass  gulp 

有没有一种运行方法： sass --watch a.scss:a.css 但是a.css最终被缩小了吗？ 如何在编译样式表时避免运行单独的缩小步骤？

235 css  sass  minify 

我想保留一个中央.scss文件，该文件存储项目的所有SASS变量定义。 // _master.scss $accent: #6D87A7; $error: #811702; $warning: #F9E055; $valid: #038144; // etc... 由于其性质，该项目将具有大量CSS文件。我必须在一个位置声明所有项目范围的样式变量，这一点很重要。 有没有办法在SCSS中做到这一点？

216 css  sass 

我有以下Sass mixin，它是RGBa示例的一半完整修改： @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } 我已经申请了$opacity确定，但现在我对这个$color零件感到困惑。我将发送到mixin的颜色将是十六进制而不是RGB。 我的示例用法是： element { @include background-opacity(#333, .5); } 如何在此混合中使用十六进制值？

213 css  sass  background-color  mixins  rgba 

我正在用SASS局部化模块化样式表，如下所示： @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues 有没有办法包含整个部分目录（这是一个充满SASS部分的目录），例如@import指南针或其他内容？

209 import  sass  partials 

我正在写一个像这样的mixin： @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } 当真正被调用时，我真正想要的是如果不$inset传递任何值，则不会输出任何内容，而是将其编译为以下内容： -webkit-box-shadow: 2px 2px 5px #555555 ""; -moz-box-shadow: 2px 2px 5px #555555 ""; box-shadow: 2px 2px 5px #555555 ""; 如何重写mixin，以便在没有$inset传递值的情况下什么也不输出？

201 sass 

我想开始使用罗盘和无礼的话来加快开发速度。此刻，我已经在Mac上安装了Sass，并指示它监视scss文件作为输入，以及css文件作为生成的输出。 在许多文章中，Sass与Compass一起使用，我想知道为什么会这样，而Compass补充说Sass没有提供什么呢？如果可以举一个例子，那就更好了。 谢谢

166 css  sass  compass-sass