I'm using SCOUT to compile my SCSS files to CSS.
I have the following code:
$header-background: #ddd;
$header-font-size: 12px;
.header {
background-color: $header-background;
font-size: $header-font-size;
&__logo {
border: solid 1px #000;
&--link {
}
&--image {
}
}
&__banner {
&--link {
}
&--image {
}
}
.navigation {
&__mobile {
&--button {
}
&--link {
}
}
&__menu {
&--list {
}
&--item {
}
&--selected {
}
}
}
}
But when I'm saving the file I'm getting the following error on SCOUT:
error webstyle.scss (Line 7 of _header.scss: Invalid CSS after " &": expected "{", was "-logo {"
"-logo" may only be used at the beginning of a selector.) Sass::SyntaxError on line 7 of C: Invalid CSS after " &": expected "{", was "-logo {"
"-logo" may only be used at the beginning of a selector.
I'm using the latest SCOUT version.
When I'm running the same SCSS in "codepen" it's working well and compiled good (http://codepen.io/chaofix/pen/RNRzym)
What could be the reason for that? Why I can't compiled with SCOUT?
The current version of Scout uses Compass 0.12 and Sass 3.2. The features you're attempting to use require Sass 3.3.
https://github.com/scout-app/scout-app/issues/185
The latest version of Scout-App supports this feature.
http://Scout-App.io
Related
In my scss code I'm trying to make placeholder like:
%input__label {
color: red;
&_content {
color: blue;
}
}
And then extend it:
.input__label {
#extend %input__label;
}
When I'm trying to compile that code only input__label compiles, but input__label_content doesn't:
.input__label {
color: red;
}
(But for example with pseudo elements - &::after everything works fine)
Why is this hapenning? I'm using node v7.10.1 and node-sass v4.5.3.
Use a mixin instead of an extend:
#mixin input__label {
color: red;
&_content {
color: blue;
}
}
.input__label {
#include input__label;
}
The functionality to do it via extends is purposefully disallowed:
https://github.com/sass/sass/commit/face3172930b515ac2040e450d4db3ffe01c31b5
Inside my component I'd like to add a modifier, which should have a higher specification so my output should look like this:
Wanted output:
.component {
// ...
}
.component.component--modifier {
// ...
}
SCSS Suggestion:
.component {
// ...
&.&--modifier {
// ...
}
}
But this does not work, I'm getting compile errors: Kind of "format errors" or "invalid CSS".
You could define a mixin:
#mixin mod($n) {
.#{$n} {
color: blue;
}
.#{$n}.#{$n}--modifier {
color: red;
}
}
#include mod(component);
Output:
.component {
color: blue;
}
.component.component--modifier {
color: red;
}
But there's probably a more raisonnable approach to your real problem, like having a modifier class.
You have a period next to the & (&.&). This would produce component..component--modifier, which is incorrect(two periods). What you really want is && but sass doesn't let you do this. What you want to do is escape the second & like this:
&#{&}--modifier
A simpler solution is to interpolate the second & by putting it into #{&}:
.component {
// ...
&#{&}--modifier {
// ...
}
}
Note: The dot between the two & is not needed, because & contains it already.
An equivalent mixin related to Densys would be:
#mixin modifier($modifier) {
&#{&}--#{$modifier} {
#content;
}
}
Usage:
.component {
#include modifier(breadcrumb) {
// ...
}
}
I am using the method answered here on StackOverflow to use custom police definition with other classes. This method is summarized below:
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
}
.icon-custom:before {
content: "\f0c4";
}
When I'm using a custom class to use it, I have to use the code generated by the library:
i:after {
content: '\f0c4';
}
In case this code f0c4 change in the library, I would like to avoid reporting the change in every custom class one by one. I decided to use Sass or Less to be able to deal with this problem.
It would be like below but it does not work.
i:after {
.icon-custom
}
With Sass or Less, is it possible to avoid this magic number?
I know this will be possible:
i:after {
content: #custom-code-value
}
But I prefer to avoid changing the #custom-code-value: : "\f0c4";
Is it the only solution?
You can try to group all the content value in a map variable
I adapted for you an example
SCSS
// Map variable
$icons: (
facebook : "\f0c4",
twitter : "\f0c5",
googleplus : "\f0c6",
youtube : "\f0c7"
);
// Mixin doing the magic
#mixin icons-list($map) {
#each $icon-name, $icon in $map {
#if not map-has-key($map, $icon-name) {
#warn "'#{$icon-name}' is not a valid icon name";
}
#else {
&--#{$icon-name}::before {
content: $icon;
}
}
}
}
// How to use it
.social-link {
background-color: grey;
#include icons-list($icons);
}
CSS
// CSS Output
.social-link {
background-color: grey;
}
.social-link--facebook::before {
content: "";
}
.social-link--twitter::before {
content: "";
}
.social-link--googleplus::before {
content: "";
}
.social-link--youtube::before {
content: "";
}
So you only have to maintain that $icons variable in case some values change. hope you get the idea.
I'm currently getting this output:
.'teal-dark' { color: #xxx; }
What I want is this: {
.teal-dark { color; #xxx; }
Here is what I'm trying to do:
#teal-dark: #xxx;
.#{currentMember} div { background: ~"#{#{currentMember}}" };
See: http://lesscss.org/features/#variables-feature-variable-interpolation http://lesscss.org/features/#variables-feature-variable-names and
#current-member: teal-dark;
#teal-dark: red;
.#{current-member} {
color: ##current-member;
}
compiles into:
.teal-dark {
color: red;
}
Possible relevant questions:
Defining Variable Variables using LESS CSS
Dynamic class names in LESS
Here's the fix from another post:
#selector: ~'.#{currentMember}';
#{selector} div { background: ~"#{#{currentMember}}" };
When I run compass compile public/, compass converts the following styles:
.foundicon-rss:before {
content: "\f002";
}
.foundicon-facebook:before {
content: "\f003";
}
.foundicon-twitter:before {
content: "\f004";
}
... to this...
.foundicon-rss:before {
content: "^O002";
}
.foundicon-facebook:before {
content: "^O003";
}
.foundicon-twitter:before {
content: "^O004";
}
I'm viewing these fields via vim. It's messing up the styling of my site's icons. Is it a Foundation issue? Compass? Sass?