I'm having trouble with SASS. Locally I have this selector:
#featured-categories{
ul{
li{
width: 33.33%;
}
}
}
which works as expected. Deployed (and compressed) however this is compiling to:
#featured-categoriesulli{width: 33.33%;}
which of course is an invalid selector. The more straight more forward formulation:
#featured-categories ul li{
width: 33.33%;
}
behaves in the same way - i.e. compiles to something munged and broken.
The only way I can get this to compile is to add redundant rules between the elements of the selector:
#featured-categories{
margin: 0;
ul{
margin: 0;
li{
width: 33.33%;
}
}
}
This works, but is obviously not ideal.
Can anyone help? I'm in a ruby 1.9.3 project running sass 3.2.9. Any pointers would be greatly appreciated.
The SCSS that you've provided should work fine. Check it out with SassMeister or http://jsfiddle.net/Kjanu/. It will compile to this:
#featured-categories ul li { width: 33.33%; }
So you've got something else going wrong in your setup.
Related
I'm having trouble with sass variables. The browser is telling me i am using invalid property values and i can see the code editor is not picking up the variables i am using because it's not colorizing them.
I have uninstalled and reinstalled sass and gulp-sass but that didn't fix the problem and i'm out of ideas. I'm sure it's something really simple.
Key Facts
I am on windows 10
I installed sass using npm install sass
i installed gulp-sass using npm install gulp-sass
I am successfully compiling the .scss file into the .css file
i am currently trying to create the variables in an .scss file
This is my .scss file
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: flx;
min-height: 100vh;
flex-direction: clm;
}
main {
flex: mpage;
}
.item-wrap{
justify-content: sb;
}
In order for Sass to read your variables, when you call them you have to hang the $ character in front of them, as you did when you declared them.
Example:
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: $flx;
min-height: 100vh;
flex-direction: $clm;
}
main {
flex: $mpage;
}
.item-wrap{
justify-content: $sb;
}
I have a styles.scss file.
In it, i have the following definition which fails to compile down to css:
.modal-dialog {
margin-top: max(6%, env(safe-area-inset-top));
}
I get the following error:
"env(safe-area-inset-top)" is not a number for "max"
How do i write this correctly?
.modal-dialog {
margin-top: unquote('max(6%, env(safe-area-inset-top))');
}
What about calc(max(6%, env(safe-area-inset-top)))?
I want to, in Dart project, use Sass (for some nesting and file concatenation) and then apply autoprefixer to the result CSS.
In pubspec.yaml I do have those dependencies and transformers. TL;DR I am trying to use sass_builder (which works just fine on it's own; https://pub.dartlang.org/packages/sass_builder) and postcss_transformer (https://pub.dartlang.org/packages/postcss_transformer):
dependencies:
dev_dependencies:
browser: '>=0.10.0 <0.11.0'
dart_to_js_script_rewriter: '^1.0.1'
postcss_transformer: '^0.1.1'
sass_builder: '^1.1.2'
transformers:
- dart_to_js_script_rewriter
- sass_builder
- postcss_transformer:
arguments:
- use: autoprefixer
- autoprefixer.browsers: '> 1%'
However even if the usage of the transformers is, at least I believe, good, it just cannot cooperate OK:
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" serve web --port=62806
Loading source assets...
Loading dart_to_js_script_rewriter, sass_builder and postcss_transformer transformers...
Serving klubFITpp_titani web on http://localhost:62806
[web] GET Served 4 assets.
[Info from Dart2JS]:
Compiling klubFITpp_titani|web/main.dart...
Build error:
Transform Postcss on klubFITpp_titani|web/style/alfa.css threw error: Systém nemůže nalézt uvedený soubor.
Command: postcss --use autoprefixer --autoprefixer.browsers "> 1%"
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
dart:async/zone.dart 1307 _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330 _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257 _BufferingStreamSubscription._add
dart:async/stream_controller.dart 796 _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 667 _StreamController._add
dart:async/stream_controller.dart 613 _StreamController.add
dart:isolate-patch/isolate_patch.dart 151 _RawReceivePortImpl._handleMessage
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
[web] GET style/alfa.css => Could not find asset klubFITpp_titani|web/style/alfa.css.
[Info from Dart2JS]:
Took 0:00:04.000418 to compile klubFITpp_titani|web/main.dart.
Build completed with 1 errors.
I am seeking for the solution on how to connect those two transformers or what to use to run Autoprefixer properly. I am also fine with instaling postcss etc. using node, which I now for the postcss_transformer transformer. It would be best if it would work using pub build / pub watch, eg. using some Dart transformer or so.
I use Windows 10. postcss works ok in a command line.
So I got this to work, but I'm not sure what exactly in your configuration isn't working. What I had to get this to work:
a) postcss command needs to work along with having the autoprefixer. I used this command to install:
npm install -g postcss-cli autoprefixer
b) Then I tested the on the command line to ensure it worked.
I used your pubspec.yaml exactly.
The web/index.scss I used was:
$primary-color: #333;
body {
color: $primary-color;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
The output was:
body {
color: #333;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: linear-gradient(to bottom, white, black);
}
/*# sourceMappingURL=*/
This was on a mac. So the configuration is possible. Hopefully this helps some.
Just a note that in the new build_runner system this won't work as is as it overwrites a file which is not allowed in the new system. One could fix this by specifying different output extensions instead of using the same input extension.
js-beautify (used under VSCode) annoys me by putting extra lines after comments:
My sample.scss
/* a fancy comment */
.foo-bars {
background: $gray;
display: block;
width: 26px !important;
}
...becomes...
/* a fancy comment */
<-- annoying empty line inserted
.foo-bars {
background: $gray;
display: block;
<--- (this is fine. I like it being preserved)
width: 26px !important;
}
This is my .jsbeautifyrc (verified to be effective, i.e. by testing with "indent_char": "#")
{
"indent_char": " ",
"preserve_newlines": true,
"max_preserve_newlines": 8,
"keep-array-indentation": true,
"break_chained_methods": false,
"newline_between_rules": false,
"selector_separator_newline": false,
"end_with_newline": false
}
update: Affects /* block comments */ only, not // line comments.
It seems like that this should have been fixed (js-beautify#609) but somehow didn’t work out as expected as there is still an open issue#531 and a pending pull request regarding this problem.
As you mentioned you could use // line comments as a workaround for now.
I'm having trouble with codekit, the code below is correct and should work with sass 3.4.5 (selective steve) which is running with my codekit 2.1.6 - ive tested the code with sassMeister and have provided a link. Has anyone got an idea what is going on?
Codekit was setup as a compass project using the latest compass.
Codekit gives me:
Compass was unable to compile one or more files in the project:
error style.scss (Line 3 of _nav.scss: Invalid CSS after " &": expected "{", was "__list {"
"__list" may only be used at the beginning of a compound selector.)
identical style.css
http://sassmeister.com/gist/f07191a09789e354bae6
nav[role=navigation] {color: black;}
.nav {
&__list {
color: black;
&__item {
color: black;
}
}
&__link {
color: black;
&--active {
color: black;
}
}
}
should convert to
nav[role=navigation] {
color: black;
}
.nav__list {
color: black;
}
.nav__list__item {
color: black;
}
.nav__link {
color: black;
}
.nav__link--active {
color: black;
}
EDIT
if I go about in codekit its using SASS 3.4.5 and Compass 0.12.7 (which is the current) - ill try to installl a later version of compass
IF I RUN COMPASS WATCH ON THE DIRECTORY IT WORKS but Codekit doesnt..
EDIT
Codekit seems to be using an older version of Compass - even if I point it to my locally installed version.
EDIT
I believe that the version of compass codekit is using on my system is too old - 0.12.7 where it needs to run 1.0.1 - but I cant find out how to get it to switch
Codekit didnt seem to pick up the correct version of compass - no documentation, so I moved back to the terminal.