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?
Related
I am using typography plugin that tailwind provides inside my NextJS project.
It displays Content inside the code tag with backtick around it. I am trying to remove these backticks. So I tried .prose code::before {content: "";} inside my globals.css file but it has no effect. It works when I change it from Firefox style editor.
Any ideas why it is not working?
/* globals.css inside NextJS Project */
.prose code::before {
content: "";
}
.prose code::after {
content: "";
}
Use !important, this works for me.
/* app.css */
.prose code::before {
content: "" !important;
}
.prose code::after {
content: "" !important;
}
You can do this in with no CSS file involved.
Just add some customization code in tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
code: {
'&::before': {
content: 'none !important',
},
'&::after': {
content: 'none !important',
},
},
},
},
}
},
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
I have a JSFiddle, https://jsfiddle.net/khpeek/3gh0r931/43/, in which I'd like to toggle the visibility of up/down Materialize arrow icons based on the class of the parent element (which is set to asc or desc by a jQuery plugin, list.js).
I've noticed that the following nesting pattern doesn't work:
.sort.asc > i.material-icons {
&.upper::after {
content: "arrow_drop_up";
}
&.lower::after {
content: "";
}
}
.sort.desc > i.material-icons {
&.upper::after {
content: "";
}
&.lower::after {
content: "arrow_drop_down";
}
}
However, if I 'write out' the nesting like so,
.sort.asc > i.material-icons.upper::after {
content: "arrow_drop_up";
}
.sort.asc > i.material-icons.lower::after {
content: "";
}
.sort.desc > i.material-icons.upper::after {
content: "";
}
.sort.desc > i.material-icons.lower::after {
content: "arrow_drop_down";
}
Then I get the intended behavior. (This code is commented-out in the JSFiddle). (I still want to position the icons on top of each other to make a 'diamond' similar to https://www.datatables.net/, but that's a separate issue).
What is wrong with the 'nested' form of this SCSS expression?
Your nesting is fine, you just have a syntax error after the font-size line:
i.material-icons {
position: relative;
font-size: $th-font-size * 2;
{
&.upper: margin-top: -$th-font-size/2;
&.lower: margin-bottom: -$th-font-size/2;
}
}
You probably meant this:
i.material-icons {
position: relative;
font-size: $th-font-size * 2;
&.upper { margin-top: -$th-font-size/2; }
&.lower { margin-bottom: -$th-font-size/2; }
}
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 have the following LESS code:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
}
&.is-favourite:after {
color:#red;
content: '\e811';
}
&:hover {
&:after {
color:#red;
content: '\e811';
}
&.is-favourite:after {
color:#grey;
content: '\e836';
}
}
}
With the essential goal being that there is a normal state and a hover state, that are reversed when another class is present. I'll be repeating this for other actions (eg .share-action-link, .review-action-link etc) and this just seems messy the way I have it. Is there a way to create a mixin such that I could provide this like so:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
&:hover {
color:#red;
content: '\e811';
}
.reverseOnClass(is-favourite);
}
}
Or something like that? The only way I can think of so far would be to do:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
}
&.active:after {
color:#red;
content: '\e811';
}
}
and then to use jQuery instead to do the hover - toggling .active on (isHovering XOR hasClass(is-favourite)) - but turning LESS into LESS + jQuery is the opposite of fixing a mess/maintainability issue.
I would really recommend writing it like below because it keeps the code simple and easy to read.
.favourite-action-link {
&:after, &.is-favourite:hover:after {
color: #grey;
content: '\e836';
}
&:hover:after, &.is-favourite:after {
color: #red;
content: '\e811';
}
}
But if you really want to use a mixin to avoid repeating the selectors then you could write it like below. This mixin takes two rulesets as input and they are applied to the required selectors.
.favourite-action-link {
.rules-gen(
{
color: #grey;
content: '\e836';
};
{
color: #red;
content: '\e811';
}
);
}
.rules-gen(#rule1; #rule2){
&:after, &.is-favourite:hover:after {
#rule1();
}
&:hover:after, &.is-favourite:after {
#rule2();
}
}
In both these methods, the selectors are also grouped and that also means reduced lines of code.
Demo
Or, if the extra class is not always is-favourite and it could also be something else then you could pass it also to the mixin as a parameter like below:
.favourite-action-link {
.rules-gen(
{
color: grey;
content: '\e836';
};
{
color: red;
content: '\e811';
};
~"is-favourite"
);
}
.share-action-link {
.rules-gen(
{
color: yellow;
content: '\e836';
};
{
color: gold;
content: '\e811';
};
~"active"
);
}
.rules-gen(#rule1; #rule2; #addedClass){
&:after, &.#{addedClass}:hover:after {
#rule1();
}
&:hover:after, &.#{addedClass}:after {
#rule2();
}
}
Demo
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