Questions tagged «sass»

所以，我有一个app/assets/stylesheets/目录结构，看起来像这样： |-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements 在每个目录中，有多个sass部分（通常是* .css.scss，但是一个或两个* .css.scss.erb）。 我可能有很多假设，但是rails应该由于*= require_tree .application.css中的内容而自动编译那些目录中的所有文件，对吗？ 我最近尝试通过删除所有颜色变量并将它们放在根app/assets/stylesheets文件夹（_colors.css.scss）中的文件中来重组这些文件。然后，我在根app/assets/stylesheets文件夹中创建了一个名为master.css.scss的文件，如下所示： // 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如何处理资产编译的顺序，但是显然这对我不利。似乎没有文件意识到要导入任何变量或mixins，因此会引发错误，因此我无法编译。 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) 该变量$dialog_divider_color在_colors.css.scss中明确定义，并且_master.css.scss正在导入颜色和所有我的mixins。但是显然，rails没有得到该备忘录。 有什么办法可以解决这些错误，还是需要将所有变量定义以及所有mixin导入放回到每个文件中？ 不幸的是，这个家伙似乎并不认为有可能，但我希望他错了。任何想法都将不胜感激。

86 css  ruby-on-rails  asset-pipeline  sass 

可能是Compass 101，但是有人写过mixin来设置颜色的alpha值吗？理想情况下，我希望mixin采用任何形式的颜色定义并应用透明度： @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

86 css  sass  compass-sass  rgba 

我有一个项目类和一个紧凑的“修饰符”类： .item { ... } .item.compact { /* styles to make .item smaller */ } 这可以。但是，我想添加一个@media查询，.item以在屏幕足够小时强制类紧凑。 乍一想，这就是我试图做的事情： .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } 但这会产生以下错误： 您不能从@media内部扩展外部选择器。您只能在同一指令中使用@extend选择器。 我如何使用SASS来完成此任务而不必诉诸复制/粘贴样式？

86 css  sass  media-queries 

在VS <= 2015中，我们可以使用WebEssentials扩展名，该扩展名负责为我们编译less / sass文件，但当前它不支持VS2017。您是否知道类似的扩展名，可以在构建时编译less / sass？

85 visual-studio  sass  less  visual-studio-2017  css-preprocessor 

我的node_modules文件夹中的字体很棒，因此我尝试将其导入到主.scss文件中，如下所示： @import "../../node_modules/font-awesome/scss/font-awesome.scss"; 但是Webpack捆绑编译失败，告诉我 Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 因为font-awesome.scss文件引用了相对路径'../fonts/'。 如何告诉scss \ webpack @import另一个文件，并将该文件的文件夹用作主文件夹，以便其相对路径按预期工作？

84 node.js  sass  npm  font-awesome  webpack 

twitter引导程序代码具有许多CSS属性，!default最后带有一个。 例如 p { color: white !default; } 怎么!default办？ 更新 我不好说不清楚。我正在使用Bootstrap的SASS部分。

82 css  twitter-bootstrap  sass 

我正在尝试从CSS模块导入主题，但是TypeScript给我一个“找不到模块”错误，并且该主题未在运行时应用。我认为Webpack配置有问题，但是我不确定问题出在哪里。 我正在使用以下工具： "typescript": "^2.0.3" "webpack": "2.1.0-beta.25" "webpack-dev-server": "^2.1.0-beta.9" "react": "^15.4.0-rc.4" "react-toolbox": "^1.2.3" "node-sass": "^3.10.1" "style-loader": "^0.13.1" "css-loader": "^0.25.0" "sass-loader": "^4.0.2" "sass-lint": "^1.9.1" "sasslint-webpack-plugin": "^1.0.4" 这是我的 webpack.config.js var path = require('path'); var webpack = require('webpack'); var sassLintPlugin = require('sasslint-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server', './src/index.tsx', ], output: { path: …

82 typescript  import  sass  webpack  css-modules 

我正在建立一个投资组合网站。 HTML代码 <div id = "hero"> <div id = "social"> <img src = "facebook.svg"> <img src = "linkedin.svg"> <img src = "instagram.svg"> </div> </div> CSS代码（使用SASS） #hero { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 300px; #social { width: 50%; display: flex; justify-content: space-between; flex-wrap: wrap; img { width: …

81 html  css  svg  sass 

我已经开始尝试使用Sass进行CSS工作。在我的Css文件所在的目录中，我也看到一个“ .sass-cache”文件夹。谁能告诉我为什么创建此文件夹，并且删除它是否安全？ 谢谢，

78 sass 

在CSS中，您可以执行以下操作： input[type=submit] { // properties } 这对于样式表单按钮非常有用。 您如何在SASS中做同样的事情？

78 css  attributes  css-selectors  sass 

我一直在关注 Sass教程。由于某些原因，尽管Sass文件无法正确生成css。终端说css是无效的，但我很确定不是。我也尝试过更改它，以防万一出现问题... 我做错了什么？ Sass版本：Sass 3.1.10 错误信息： error sass/test.sass (Line 3: Invalid CSS after "80%": expected expression (e.g. 1px, bold), was ";") .sass文件内容： /* style.scss */ #navbar { width: 80%; height: 23px; }

78 css  sass 

如何跟踪包含许多sass文件的整个目录中的更改？我正在使用以下命令来监视sass中的更改 文件： sass --watch style.scss:style.css 但是如何在包含许多sass文件的整个目录/文件夹中监视更改。

77 css  sass  build-process  watch 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow的主题。 6年前关闭。 改善这个问题 我正在寻找Java中的SASS实现（可以与JSP / JSF一起使用）。对于Python，我已经找到了CleverCSS，但是Java没有。有人听说过这种生成CSS的工具吗？

76 java  maven  ant  jruby  sass 

当我使用编译时gulp，出现如下错误。我该如何解决？ module.js:339 throw err; ^ Error: Cannot find module 'gulp-sass' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/flyscoot.com/gulpfile.js:2:12) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Module.require (module.js:366:17)

75 sass  npm  gulp 

我刚刚使用新的Angular CLI 6.0创建了一个新的Angular项目，但是我需要将Sass编译添加到我的项目中。我知道您可以在创建项目时设置标志，但是我的项目已经创建并且工作已经完成。 通过新的Angular CLI生成的新配置文件现在称为angular.json而不是angular-cli.json。文件的方案也有所不同，具有新的属性。 在过去angular-cli.json，您可以在其中设置stylExt类似的内容， "defaults": { "styleExt": "scss" } 但我不确定确切将其放置在何处，如"test"和"lint"属性之后，会出现以下错误： Matches multiple schemas when only one must validate. 建筑产生： Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt). 查看CLI的文档，我看不到任何指示放置位置的信息"styleExt"。 我还看到了其他一些建议：ng set defaults.styleExt scss抛出get/set have been deprecated in favor of the config command.。 …

72 angular  npm  sass  angular-cli