SASS breaks my selector - compilation

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

SASS variables are not working in .scss file

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;
}

How do i include the env() method inside of a min or max function in SCSS?

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)))?

Sass and Autoprefixer in Dart

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.

Prevent js-beautify from adding extra whitespace / empty lines

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.

Valid SCSS not compiling with Codekit

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.

Resources