我将.sass文件中的占位符选择器定义为:
.bold,
%bold
font-weight: bold
font-weight: 500
大胆的
%大胆的
字体大小:粗体
字号:500
然后我用扩展:
.pane-share-of-day
@extend %bold
.每日分额
@扩展%bold
生成css时,我收到以下错误消息:
语法错误:“.bold”之后的CSS无效:应为选择器,为“%bold”
我使用的是Sass版本3.2.5。
请提供帮助。将这些声明添加到他们自己的文件中
有没有办法将imports参数指向变量
@import $variable_name
这是政府所说的:
导入可能包含#{}插值,但仅包含某些
限制。无法动态导入Sass文件
基于变量;插值仅适用于CSS导入。像这样的
它仅适用于url()导入。例如:
将编译为
因此,您的问题的答案可能是,您正在尝试做的事情是不可能的。您到底想用它做什么?感谢您的回答-对于缺乏对SCS的支持,这太糟糕了:(
$family: unquote("Droid+Sans");
@import url("http://
我正在使用as SASS编译器。我想知道是否有办法将Scout配置为使用DevTools Sass支持(保存后自动重新加载css)。我想安装Scout应该在我的机器上安装指南针和SASS。当我在终端中尝试“compass”时,我得到“compass:command not found”
我必须单独安装sass才能工作吗
非常感谢 谢谢各位的回复。看起来SASS Scoutap正在使用的版本没有源代码映射支持。根据这一点,您需要Sass 3.3 只要您有一个可以在监视模式下运行的编译器(类似于sa
我发现此方法可以使用mixin轻松添加@media块:
@mixin phone() {
@media only screen and (max-width: 480px) {
@content;
}
}
要使用它,只需键入如下内容:
p {
@include phone { ... }
span {
@include phone { ... }
}
}
但问题在于真正的CSS输出:
@media only screen
我正在尝试使用sass convert将sass文件转换为scss,但当我运行该命令时,甚至当我运行compass watch时,我会出现以下错误:
Invalid variable: $media (min-width: 950px)
我通常使用scss语法,所以我不确定为什么会产生错误,应该是@media吗
守则的条文如下:
.center text-align:center
.right text-align:right
.top vertical-align:top
.mi
这是我的混音
@mixin myColor($background:null){
@if $background == "yes"{
background-color: white;
}@else{
background-color: blue;
}
}
@include myColor; //background-color: blue;
@include myColor('yes'); //background-color: whit
我目前正在使用和它的所有有用的CSS3混合。我想使用边界半径(5px)mixin,并用标记来自它的所有属性!重要信息
在中,可以应用!重要信息只需在调用后指定mixin中的所有属性即可
.myMixin(@x) {
border-radius: @x;
-moz-border-radius: @x;
}
.myClass {
.myMixin(5px) !important;
}
编译成
.myClass {
border-radius: 5px !importa
标签: Sass
compass-sasscss-sprites
我的文件夹有a.png和b.png两张图片,这是我的scss代码:
@import "icon/*.png";
@include all-icon-sprites(true);
汇编结果:
.icon-sprite, .icon-a, .icon-b{
background: url('/images/icon-s351f62e8ff.png') no-repeat;
}
.icon-a {
background-position: 0 0;
height: 138px;
widt
我想知道是否有可能在同一个项目中同时使用LESS和SCSS,这意味着使用Grunt将两种类型的文件压缩并缩小到一个css文件中?我问这个问题的原因是,我计划将MMenu(用SCSS编写)用于一个我已经开始的项目,该项目用更少的语言编写。或者我必须将MMenu SCSS文件转换为更少的文件吗?我发现了下面的Grunt任务,但由于存在一些兼容性问题,我不确定是否值得这样做
有没有人有在同一个gruntfile中同时使用LESS和SCSS的经验
如果有人愿意帮忙,这是我的文件
'use strict'
标签: Sass
koalaauto-compile
我正在使用Koala for Win64将sass(有很多部分)编译成css,没有问题,但是Koala自动编译功能只有在根scss文件中有更新时才会运行,所以每次我对包含的部分进行更改时,我都需要打开Koala并按下“编译”按钮
有没有办法将scss自动编译配置为监视sass部分中的更改?因此,当我自己遇到问题时,遇到了这个问题。只是记录
我做的第一件事
创建样式.scss或全局.scss(确保在考拉中设置“自动编译”),并仅使用导入填充:
@import 'layout'; //_layout
我正在Sass 3.4.5中构建一个mixin,但它的行为与我预期的不同,例如:
@mixin test($values...) {
$items: length($values); // length is 2
@if $items > 1 {
$var: true;
@debug $var; // output is 'true'
}
$var: false !default;
@debug $var; // output is 'false'
由于更新到最新版本的Compass,现在需要4.294s来编译
由于需要susy
Running "sass:dist" (sass) task
Running "watch" task
Completed in 4.294s at Tue Sep 30 2014 23:38:01 GMT+0200 (W. Europe Daylight Time) - Waiting...`
// Running versions
compass -v 1.0.1
susy -v 2.1.3
sas
我理解,导入SASS/SCSS部分而不使用前导下划线是最佳做法;e、 g
@import 'normalize-scss/normalize';
// this imports ./normalize-scss/_normalize.scss
我对nerdy完整性的问题是,如果使用下划线导入文件,会有任何后果吗
@import 'normalize-scss/_normalize';
不可以。如果您的文件是_foo.scss,则所有这些导入都具有相同的结果,只要您没有任何不明确的文件名(除
我正在重构我的一些Sass代码,我遇到了一个奇怪的问题。我的代码当前如下所示:
// household
$household_Sector: 'household';
$household_BaseColor: #ffc933;
// sports
$sports_Sector: 'sports';
$sports_BaseColor: #f7633e;
// the mixin to output all sector specific css
@mixin sector-css($s
标签: Sass
compass-sasscompass
使用Compass编译单个样式表时遇到问题。我可以使用compass compile执行所有文件,并使用compass watch监视更改。但是,当我尝试将特定文件分配给compass compile时,会出现以下错误:
单个样式表必须位于sass目录中
我的目录结构:
project root
- util
-- compass
--- config.rb
- www
-- css
--- [destination for .css files]
-- sass
--- [.scss file
我有以下映射来包含我的主题中的所有颜色:
$_base-ocean:rgb(13,176,184);
$_base-hover:10%;
$themes: (
ocean: (
base: $_base-ocean,
hover: darken($_base-ocean, $_base-hover)
)
);
我知道如何使用@each循环从映射中获取键/值信息,但如何在不使用循环的情况下直接访问映射的值?我尝试使用方括号,就像在JavaScri
我能在sass中实现这样的目标吗
ul.menu li{
background-color: rgba(0, 196, 196, 1) + rgba(1, -16, -16, 0);
}
结果应为1180180,1。
sass是否可以这样做?您必须合并这些值。。否则是不可能的
您的问题示例:
ul.menu li{
background-color: rgba(1, 180, 180, 1);
// or: background-color: rgba(0+1, 196
我正在扩展一个现有的SASS主题(实际上是bootswatch主题),我需要从变量集中提取垂直填充,如下所示:
$panel-heading-padding: 10px 15px !default;
我需要像这样的东西:
$my-vertical-padding: vertical($panel-heading-padding);
我已经检查了参考文档,但似乎没有任何文档记录
这是否可能(不使用子字符串)?在寻找与您相同的答案后,我最终编写了一个基本函数,用于此目的:
@func
在my Jekyll站点中,所有内容都有特定的宽度。据我所知,这来自/css/main.scss:
$content-width: 800px;
$on-palm: 600px;
$on-laptop: 800px;
我尝试使用“本地”css来覆盖这些内容。但它没有起作用
上述内容也会影响整个内容
有没有办法使标题(/\u includes/header.html)全宽,并使其余内容保持默认的中心宽度(从上面继承的)?在\u includes/header
我正在使用将SCS编译为css。
如果我只是在terminal命令行中手动键入以下内容,则此操作有效:
这很有效
node-sass --output-style compressed resources/assets/sass/sourcefile.scss public/css/endfile.css
但是当我把选项放在一个表中时,它就不起作用了。我提供了相同的论点,所以我不明白为什么它不起作用
VS代码任务不起作用
{
"version": "0.1.0",
"comma
标签: Sass
css-preprocessor
是否可以检查是否存在带有sass(.scss)的文件
我想导入一个文件,如果它存在,如果没有导入另一个文件。可能吗
我没有使用指南针(建议重复问题)不幸的是,没有办法做到这一点。
如果您导入一个不存在的文件,您将立即得到一个错误(即使它被置于错误的条件下)
对此进行了讨论
此外,还全面介绍了导入功能可能与我没有使用Compasso的功能重复,我只记得以前见过这个问题,如果没有:false flag!这是否意味着@import'style.scss'或background image:file.j
我试图声明一些基本的css规则,以便在我的应用程序中全局使用它们。像拉rx,拉lx等等
在将这些规则写入app.scss之后,build文件夹中的main.css文件将得到正确更新,但是当涉及到在“LoginPage”中使用这些规则时,例如,我之前声明的每个规则都将被忽略。我错过什么了吗
如果我改为在login.scss文件中编写pull rx类,它就会工作。有没有一种方法可以在全球范围内获得一个类
app.scss:
app.module.ts:
login.html:
Astrid Bet
当我使用由webpackdev服务器运行的materialui组件Avatar时,客户端上的样式呈现不正确。在服务器上,它们正在正确渲染
无效校验和的控制台错误:
(客户);显示:-webkit框、-moz框、-ms-flexbo
(服务器);显示:-网络工具包盒;显示器:-moz盒;
如您所见,客户机显示样式属性没有被分隔但带有,
有什么建议吗
感谢材质UI库依赖浏览器用户代理为每个组件正确呈现css
在您的情况下,material ui为-web kit合规浏览器使用了正确的css。由于
我是个菜鸟。玩混音游戏。有些地方不对劲:
$> sass -v
Sass 3.4.23 (Selective Steve)
$> cat myscss.scss
// Keyframe animations
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
}
@include keyframes(move-up) {
0% {
t
在SASS的类选择器中,我想选择父类的兄弟
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// text
它似乎使事物无效,只是使其回归到默认的变换原点:中心
关键是我需要以某种方式“响应地”计算变换原点的x偏移量。如果最后一个44px/2不是打字错误,请删除它。这超出了calc()的范围。如果是打字错误,你能再给我们一些代码吗?一些html会很好
这里有一个以下是最终有效的方法:
transform-origin: calc(100% - (44px / 2)) 44px / 2;
第二次计算缺少calc函数。你知道吗?这实际上是一个糟糕的问题。我本想在使用Sass变量时问这个问题,但我替换了文
我正在尝试将BEM整合到我的sass中。我也在喝啤酒。当我不使用BEM时,我的代码运行良好。当我加入BEM时,代码不再工作
这是我的HTML,没有BEM
<div class="wrapper">
<ul class="stage">
<li class="scene">
<div class="movie">
<div class="poster"></div>
这个问题很容易解释
这是输入:
.a {
position: relative;
overflow: hidden;
width: 960px;
background: #a3c1ef;
height: 100%;
margin: 0 auto;
> &-b {
list-style: none;
> &-c {
display: inline-block
我正在做一个有角度的页面,我找不到一种方法使有角度的材质选项卡透明。这是HTML代码:
<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
<a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
[active]="rla.i
**编辑**
不,问题是使用css2 api的人wght@500:
因此,我必须用%40和%3B逃离@and:,现在它已被修复。
但有人告诉我使用盖茨比插件字体更好,这稍微提高了我的网站性能。谢谢大家
**
我是GatsbyJS的新手,我正在尝试修改TaniaRascia的静态博客模板,系统运行良好。但是我不能在我的SCSS文件中导入google字体。我在她的网站上也看到了这个错误。有什么解决办法吗
守则:
/*! Primitive
by Tania Rascia */
@import u
我有一个SCSS模块,里面有很多可重写的!默认的变量,我正试图在使用新规则的项目中使用它,而不是要弃用的@import。覆盖大量变量过去非常简单。只要我在导入模块之前导入了变量,它们就会优先于!默认值
现在,如果我尝试在全局名称空间中使用模块,如下所示:
$h1-font-size: 40px;
@use 'my-module' as *;
我得到一个错误-SassError:这个模块和新模块都定义了一个名为“$h1 font size”的变量。
显然,正确的方法是将与关键字一起使用,如
默认的.font-weight-medium为500,我想将其更改为600作为我的特定字体。这些是$font-weights的默认值,具体取决于:
我尝试将variables.scss中的$fonts权重设置为
$font-weights: (
'thin': 100,
'light': 300,
'regular': 400,
'medium': 600,
'bold': 700,
'black': 900
)
但它不起作用。到目前为止似
Compass创建一个sass样式表目录,其中包含
_设置.scss
app.scss
规范化.scss
我以模块化的方式工作,在这里我有许多样式表,如导航、内容、页脚等。我在哪里包括我的scss文件?是否创建一个partials文件夹,然后将其导入app.scss
如果我将它们导入app.scss,这将把我的CSS附加到app.CSS的末尾。但是,使用指南针手表,它也创建了我的每一个部分。。。它们不需要,因为它们被附加到app.css
我看了指南针,Sasy和基金会网站,我似乎找不到该怎么
一段时间以来,我在一个大型网站上遇到了一个问题。
主要的问题是我们的网站有两种语言:英语和中文。
该中文网站也由另一个域名提供:domain.com和domain.com.cn
这给我们所有的CSS工作带来了一些问题,主要是字体,另一个问题是域,因为图像是从我们的CDN提供的,我们必须将绝对链接放入CSS中,但这也意味着我们必须为我们的中文站点更改它
body.en .title { background: url(http://media.domain.com/title.png); }
bo
标签: Sass
failed-installation
我正在尝试在我的OS X 10.8.4计算机上安装Sass
当我输入“sudo gem install sass”时,我得到以下输出:
Successfully installed sass-3.2.9
1 gem installed
但之后,当我输入“sass-v”时,我得到:
我的路径文件如下所示:
#homebrew should always take presedence
/usr/local/bin
#the default stack
/usr/bin
/bin
/usr/sb
我有一个生成选择器名称的sass mixin:
@mixin rocks($name){
#{$name}-rocks {
@content;
}
}
通过调用mixin调用:
@include rocks(dave){
color: red;
}
我想为我创建一个调用此mixin的自定义函数,将语法缩短为:
rocks(dave){
color: red;
}
有可能吗。在选择器之外调用sass@函数?二,。从中调用mixin?大致如下:
@function ro
我用
sass--scss--interactive或scss--interactive并输入
>>$x:3px
我得到一个错误:
SyntaxError:3px之后的CSS无效:预期表达式(例如1px,粗体)为“;”
有人知道我做错了什么吗
谢谢
PS:Sass安装使用:sudo gem install scss。然后是chmod-R 755/var/lib/gems,然后是chmod 755/usr/local/bin/{scss,sass},交互式shell只接受类似于编程语言的表达式,例
标签: Sass
compass-sasscompass
我使用sass和compass以及Grunt来构建我的项目。但罗盘突然停止工作了。当我运行Grunt时,出现以下错误:
“正在运行”sass:dist(sass)任务
错误:无法加载指南针。
警告:退出,错误代码为1请使用--force继续。“
版本如下:
罗盘(0.12.4)
sass(3.2.18)
我在谷歌上搜索过ant,尝试过很多东西,但似乎都不适合我。
有什么建议吗?你应该考虑在这里添加你的GruntFrm文件。Haha,你完全正确。我只需重新安装ruby、sass、compass和g
我直接从命令行(实际上是一个Makefile)使用节点sass来构建CSS
scss文件位于不同的目录中,它们互不引用。我想要的是将这些文件sassify到一个CSS输出,我可以通过工作源代码映射从HTML中读取
这是我在Makefile中的当前命令:
$(OUT_MAIN_CSS): $(SCSS) Makefile $(node-sass)
cat $(SCSS) > $(TMP_SCSS)
$(node-sass) --output-style compressed
我正在使用gulp ruby sass,下面是gulpfile.js中的代码
gulp.task('styles', function() {
return sass('styles/app.scss', { style: 'expanded'})
.on('error', function(err) {
console.log(err);
console.log(err.message);
})
这是我的gulpfile.js:
var gulp = //code code code
var path = {
// code code code
watch: {
styles: './assets/styles/**/*.scss',
html: './assets/*.html',
img: './assets/img/**/*.*',
scripts: './assets/scripts/**/*.
标签: Sass
grunt-contrib-sass
我有一个目录结构:
视图
\u静态
some.js
somesass.scss
something.jade
我希望做这样的事情:
sass:{
地区:{
选项:{
样式:“扩展”
},
档案:[{
是的,
cwd:“视图”,
src:['*/*.scss'],
扁平化:是的,
dest:“视图/*/\u静态”,
分机:'.css'
}]
}
},
如果我只做了dest:'views'并删除flatten:true,那么它至少会将它放在.scss文件所在的同一个文件夹中,但我不知
我似乎无法让ExtractTextPlugin正常工作。我从未见过CSS文件。在我尝试切换到这个插件之前,scss文件被捆绑在一起,没有问题
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: "./index.js",
outp
我有这个SCSS代码:
.a {
color: red;
}
.b {
@extend .a;
}
:not(.a) {
color: green;
}
我期待着:
:not(.a) {
color: green; }
:not(.a):not(.b) {
color: green; }
但我明白了:
:not(.a) {
color: green; }
:not(.a):not(.b) {
color: green; }
是否有任何文档指定
如何在新的gulp scss引导项目中添加和使用font awesome?清洁和正确的方法是什么?谢谢。使用NPM安装font awesome。您可以将其添加到package.json中:
"devDependencies": {
"bootstrap": "latest",
"font-awesome": "latest",
etc
然后添加一个gulp任务,将文件从节点_模块复制到部署中的目录:
gulp.task('copy', function() {
gu
我正在使用Gulp编译我的SASS文件。我有一个main styles.scss文件,用于导入其他SASS文件
我的styles.scss文件如下所示
@import "slider/slider_style";
.slider-nav li {border-radius: $dot-rounded;}
我的slider/\u slider\u style.scss文件如下所示:
$dot-rounded: 30px !default;
编译时,出现以下错误:
Error: Undefin
我想知道是否可以用SCS来实现这一点?每次递增X
这很棘手,因为需要更新-s或-md而不是数字
@for $i from 1 through 6 {
.u-marg-t-#{$i} {
margin-top: 0px + ($i * 8);
}
}
除此之外,这里的@for是不是最好的方法
纯CSS输出
.u-marg-t {
&-xs {
margin-top: 8px;
}
&-
标签: Sass
nestedmedia-queries
我在scss类中使用了媒体查询,我想创建媒体查询并在该媒体查询中定义所有scss类。在媒体查询中访问嵌套的scss类时遇到问题。
这是我的密码
.data-one {
display: flex;
flex-wrap: wrap;
&.mobile {
width: 100%;
.data {
max-width: 100%;
}
}
.data {
height: 72px;
margin-right: 10px
我通过npm包含了sass mq,并通过responsive.scss部分包含了基本需求
$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
);
$mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide); //todo: Disable on production
我在名为src/assets/scss的目录下有多个css文件。我想将这些文件编译成dist/assets/css下类似命名的css文件。例如,src/assets/scss/a.scss应编译为dist/assets/css/a.css,src/assets/scss/b.scss应编译为dist/assets/css/b.css
如何使用汇总来完成此操作?您不需要汇总。Sass已经提供了一个功能来实现这一点。您可能知道,以下划线开头的Sass文件不是单独编译的,例如,\u函数.scss或\u
1 2 3 4 5 6 ...
下一页 最后一页 共 59 页