我已经阅读了很多关于此的内容,但我仍然感到困惑.
我非常了解CSS,但我只有一个问题:scss与CSS有什么不同,如果我使用scss而不是CSS,它的工作方式是否相同？
我正在尝试使用bootstrap variables.less文件处理一些网格宽度,但我想使用SASS而不是LESS.
我有以下代码:
jqGrid.scss
@import url('../../Content/bootstrap/bootstrap-ui/less/variables.less');
@mixin colWidthPercent($columnNum, $widthPercent) {
width: @screen-sm-min;
}
它不喜欢@ screen-sm-min,我假设因为它是一种LESS格式.
有没有办法混合.less文件和.sass文件？
我实际上正在尝试建立一个gulp计划做网络相关的东西,如编译sass,minify css,uglify javascript等等.但我真的遇到麻烦了.
这是我的代码示例:
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
所以我在这里使用指南针,因为我只有*.sass文件,没有.scss所以gulp-sass对我不起作用.因此,我在问是否有人能给我一个为什么这个任务不起作用的暗示.这是我的控制台返回的内容:
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
我知道我没有使用任何config.rb,但有两件事:1)我没有找到这样的文件的例子2)gulp-compass doc给出了没有这样文件的例子所以我认为它是可选的
提前致谢.
TL; DR:我的问题是如何将我的一些sass文件捆绑到单个sass文件中？
我一直在开发一个Angular组件库,我用ng-packagr打包它.我们称之为@my-lib/ngx-components.
我的lib的消费者将导入我的组件,如@my-lib/ngx-components/navbar.
我决定为组件添加主题支持.
例如,我有一个带有默认颜色(背景,文本,悬停等)的导航栏组件.我希望我的库的消费者能够用自己的主题覆盖这些颜色.这就是为什么我写了一个mixin接受$theme输入并覆盖一些css规则的原因如下(这是我所拥有的基本版本)
_navbar-theme.sass
@mixin navbar-theme($theme)
$primary-color: map-get($theme, primary-color)
$secondary-color: map-get($theme, secondary-color)
$color: map-get($theme, color)
.navbar
background-color: $primary-color
color: $color
&:hover
background-color: $secondary-color
每个组件都有自己的*-theme.sass文件.
我也有全局_theming.sass文件,导入所有这些如下
_theming.sass
@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'
我想_theming.sass从我的lib 导出这个文件,所以人们可以在自己的sass文件中导入这个文件,@import '~@my-lib/ngx-components/theming'并开始使用所有mixin可用的文件.如果他们想拥有定制的navbar,button等等,他们应该能够使用这些mixin单进口秒.
我试图让它看起来像角度材料主题设置.
起初,我已经尝试过node-sass哪些已经存在于我的依赖项中.但是,它试图将sass构建为css,因此它省略了输出文件中的mixins.
然后,我看了一下角质材料做了什么.他们使用scss-bundle
我想"这正是我想要的." 但是,它需要scss文件,而不是sass文件.它无法读取sass文件.
然后,我想"好吧,我可以放弃sass并开始使用scss.如何将所有这些文件转换为scss而不用手工完成它们".然后,我找到了sass-convert …
我正在尝试将以下 SASS 变量导出到我的 Vue 项目中的 Javascript 中。
_export.sass
:export
colorvariable: blue
othercolorvariable: red
我将这篇文章中的回复作为模板。但是，当我尝试在下面导入我的 sass 文件时...
About.vue
<script>
import styles from "@/styles/_export.sass";
export default {
name: "About",
data() {
return { styles };
}
};
</script>
我收到以下错误：
WAIT Compiling... 2:17:03 AM
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 2:17:03 AM
error in ./src/styles/_export.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after '...les/main.sass";': expected 1 selector or at-rule, was "export: {"
on line 1 …我正在尝试运行我的 Angular 14 应用程序，但在尝试在本地提供服务时出现以下错误。看看下面的错误：
\nBuild at: 2022-06-28T06:24:59.368Z - Hash: 217d45d22093a51f - Time: 5857ms\n ./src/app/app.component.sass?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):\nSassError: Expected newline.\n \xe2\x95\xb7\n1 \xe2\x94\x82 .example-icon {\n \xe2\x94\x82 ^\n \xe2\x95\xb5\n src/app/app.component.sass 1:15 root stylesheet\n\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n\xe2\x9c\x96 Failed to compile.\n这是我的package.json依赖项：
\n "dependencies": {\n "@angular/animations": "^14.0.0",\n "@angular/cdk": "^14.0.0",\n "@angular/common": "^14.0.0",\n "@angular/compiler": "^14.0.0",\n "@angular/core": "^14.0.0",\n "@angular/fire": "^7.4.0",\n "@angular/forms": "^14.0.0",\n "@angular/material": "^14.0.0",\n "@angular/platform-browser": "^14.0.0",\n "@angular/platform-browser-dynamic": "^14.0.0",\n "@angular/router": …这是我的sass:
table#orders {
background-color:#ff0000;
}
然而,当我实际运行这个时,我得到一个错误,说Invalid CSS after "#ff0000": expected expression (e.g. 1px, bold), was ";"我不知道它为什么期望类似1px的背景颜色.任何人都可以帮我搞清楚吗？
我知道可以在同一项目中同时使用css和sass / scss。我看了一个SO问题，但是从我看到的角度来看，当在angular_cli.json文件中使用css作为styleExt时，会弹出很多警告。
我正在尝试更改 SCSS 文件中滚动条拇指的颜色。
我尝试使用滚动条颜色，但只有使用 webkit 才有效。
// NOT WORK
.demo {
scrollbar-thumb: #0f0f0f;
}
// WORK
.demo{
//....
&::-webkit-scrollbar-thumb {
background-color: #0f0f0f;
}
}
我知道 webkit 仅适用于某些浏览器，因此我希望使其尽可能通用，因此无论用户使用什么浏览器，它都会显示新的颜色。
谢谢大家
我有这个非常简单的webpack项目,我现在也想使用bulma一个css框架.
我安装了包,npm i bulma并尝试将其包含在我的app.js-file中,使用以下剪切失败:
import bulma from '~bulma/bulma.sass';
我也尝试使用特定的sass部分,这也没有用:
import bulma from '~bulma/sass/base/_all';
你能帮助我解决这个问题吗？或者让我指出正确的方向？