从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言.
与SCSS有什么区别？它应该是同一种语言吗？类似？不同？
我正在尝试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函数中的变量？
我创建了一个空白的 React 项目，使用命令：npx create-react-appon npm v7.0.7 和 Node v15.0.1
安装：
然后我尝试将空白的 .scss 文件导入 App 组件：
应用程序.js
import './App.scss'
function App() {
return (
<div className="App">
App
</div>
);
}
export default App;
抛出错误：
Failed to compile.
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
包.json
{
"name": "react-17-node-sass-5",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4" …无论如何使用Sass的@import命令导入常规CSS文件？虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够在不将我的所有文件重命名为*.scss的情况下使用它.
我写了这段代码,但它不起作用.我的问题是什么？
.class {
margin:20px;
:hover {
color:yellow;
}
}
我在我的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");
}
但是当我运行应用程序时,找不到字体文件.日志:
开始获取"/assets/icoMoon.ttf"为127.0.0.1在2012-06-05 23:21:17 +0100服务资产/icoMoon.ttf - 404未找到(13ms)
为什么资产管道没有将字体文件缩小为just/assets？
人们有什么想法？
亲切的问候,尼尔
额外信息:
在检查rails控制台的资产路径和assetprecompile时,我得到以下内容:
1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil
1.9.2p320 :002 > …我是Angular的新手,我来自Ember社区.尝试使用基于Ember-CLI的新Angular-CLI.
我需要知道在新的Angular项目中处理SASS的最佳方法.我尝试使用ember-cli-sassrepo来查看它是否会发挥作用,因为Angular-CLI的许多核心组件都是使用Ember-CLI模块运行的.
它没有用,但又不确定我是否只是错误配置了一些东西.
另外,在新的Angular项目中组织样式的最佳方法是什么？将sass文件放在与组件相同的文件夹中会很不错.
我正在使用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将其嵌入其中？
我在我的SCSS文件中有这个:
.class-a{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//Inherite class-a here
//some properties
}
在class-b中,我想继承所有属性和嵌套声明class-a.这是怎么做到的？我尝试使用@include class-a,但这只是在编译时抛出错误.
我想使用谷歌网络入门套件.我安装了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,但这没有用.
接下来我该怎么办？