I'm looking to do this. But I get a parse error. Is this possible with LESS?
Mixin:
.fa-icon(#fa-pseudo-postion, #fa-icon, #fa-font-size, #fa-display-value) {
&:#{fa-pseudo-postion} {
content: #fa-icon;
font-family: FontAwesome;
font-size: #fa-font-size;
display: #fa-display-value;
}
}
In Use:
.fa-icon(before, #fa-plus, 16px, inline);
A workaround until this bug is fixed.
.fa-icon(#fa-pseudo-position, #fa-icon, #fa-font-size, #fa-display-value) {
#pseudo-position: ~":#{fa-pseudo-position}"; // Workaround for this bug (https://github.com/less/less.js/issues/1294) remove when fixed
&#{pseudo-position} {
content: #fa-icon;
font-family: FontAwesome;
font-size: #fa-font-size;
display: #fa-display-value;
}
}
Related
In one file, I have typography.css:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
And in another file, I want to apply .p.lg to my .links:
.link {
#apply p lg;
}
The following code is generated and shipped to the front end:
.link {
font-size: 1.125rem;
}
Even if I change the order of lg and p and even if I inline it in the link itself with class="p lg".
Hell, even if I specify for the p styles to explicitly NOT target the lg elements it STILL generates the incorrect CSS:
Input:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
Output:
.link:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
It's just stupidly copying and pasting the rest of the paragraph selector rather than running the selector logic and determining whether or not to apply the styles.
I have this exact same problem hundreds of times in my project with seemingly no solution other than to completely abandon Tailwind for half the project or to install tailwind-plugins and then enter every single combination of every class I want to apply in my tailwind.config.js.
Help is greatly appreciated. I've searched online for a while without finding anyone even having the same problem; I only found people who don't know how #apply works (well perhaps I'm one of them...). Thanks in advance.
UPDATE:
I also have:
.p {
#apply font-light;
}
.p.subheading {
#apply font-normal;
}
And of course the same issue with applying p subheading where it applies the wrong font weight and even using .p:not(.subheading) still generates the wrong styles. Will I really have no way whatsoever of styling p font-weights without also giving every single .p ANOTHER class to tell it to use one font weight? In other words, are default styles impossible?
UPDATE 2
Even when using !important it still fails to override...
.p {
#apply font-light;
}
.p.subheading {
#apply !font-normal;
}
and
.p.xl {
font-size: 1.375rem !important;
}
.p.lg {
font-size: 1.25rem !important;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem !important;
}
I STILL get the wrong font sizes and font weights generated:
.link {
font-size: 1.125rem;
}
.link {
font-weight: 300;
}
In VS Code formatter, searched a lot to format CSS and SCSS and put the braces in a new line as below, But dint find any. Can anyone help on this.
:root
{
--brandColorVar: #056ca1;
}
#font-face
{
font-family: Museo Sans;
src: url("Font/MuseoSans_500.otf");
}
body
{
font-family: Museo Sans;
margin: 0;
}
.NameCls
{
display: flex;
column-gap: 20px;
}
I have found the setting for js but need the same for CSS too
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
i want to use just like this but not working .
counter-increment: card;
h2{
font-weight: normal;
margin: 0;
&::before{
content: url(`../../public/icons/skill${counter(card)}.svg`);
}
}
Short answer, NO. You can't pass other functions such as attr() or counter() into url() function to generate a url string dynamically, yet.
But since you're using sass, you may utilize #for to achieve it. Although you have to choose a number (such as 50) that you're sure there are no more than that number of h2s in the same hierarchy.
h2 {
font-weight: normal;
margin: 0;
#for $i from 1 through 50 {
&:nth-of-type(#{$i})::before {
content: url('../../public/icons/skill#{$i}.svg');
}
}
}
Basically it generates the following css for you:
h2 {
font-weight: normal;
margin: 0;
}
h2:nth-of-type(1)::before {
content: url("../../public/icons/skill1.svg");
}
h2:nth-of-type(2)::before {
content: url("../../public/icons/skill2.svg");
}
h2:nth-of-type(3)::before {
content: url("../../public/icons/skill3.svg");
}
/* repeats 50 times */
Ok so I have a placeholder with a nested selector:
%block {
.title {
font-size:12px;
}
}
I want to extend it and ADD to the .title class:
.superblock {
#extend %block;
.title {
font-weight:bold;
}
}
The answer I WANT is this:
.superblock .title {
font-size: 12px;
font-weight: bold; }
However, the answer I get is this:
.superblock .title {
font-size: 12px; }
.superblock .title {
font-weight: bold; }
Am I doing something wrong or is this just how it works? To clarify I want to merge it. If I add something directly inside the .superblock and add like another .superblock2 which also extends %block they merge without any problems.
Sass has no functionality for "merging" duplicate selectors. You'll need to find another utility to do this after the CSS has been compiled.
The #extend directive isn't just a way to use classes in place of mixins (similar to LESS style mixin calls). Why #extend works the way it does becomes clear when you're extending normal classes instead of extend classes:
.block {
font-size:12px;
}
.foo {
#extend .block;
font-weight: bold;
}
Output:
.block, .foo {
font-size: 12px;
}
.foo {
font-weight: bold;
}
Using an extend class just suppresses the emission of the original class name.
Now that you've seen why #extend works the way it does, do you still want what #extend offers? If the answer is no, then you need to use a mixin:
#mixin block {
// styles
.title {
font-size: 12px;
#content;
}
}
.superblock {
#include block {
font-weight: bold;
}
}
Output:
.superblock .title {
font-size: 12px;
font-weight: bold;
}
This is pretty much it. SASS produces extended declarations separately.
And it has no functionality of grouping declarations by selector, it's not that smart.
But you need not worry that much about CSS cleanness. Modern web servers serve CSS gzipped, all duplication will be nicely compressed.
LESS can do that. However you would write:
.superblock {
.title {
.block .title;
}
}
Not sure if it works with #extend too.
You can use a tools, I used it to clean the css
https://github.com/addyosmani/grunt-uncss
"A grunt task for removing unused CSS from your projects with UnCSS."
I checked few topics I this one is kinda new, I found one similar but not the same case.
So, my project is working perfect with sass and font-awesome.
I am importing the font-awesome scss file:
//libs
#import "css/font-awesome/scss/font-awesome";
And my sass class I am using
&:hover {
font-family: FontAwesome;
content: $fa-var-android;
}
I don't want use font-family: FontAwesome; in every class, it's some way to use just like that?
&:before {
content: $fa-var-android;
}
Or even better: just the unicode?
&:hover {
content: '\f26e';
}
I tried but did not work, someone can give me a help?
Thank you.
Here is a solution use a common class for the font family.
HTML
<div class="a b">
</div>
CSS
.a{
font-family: FontAwesome;
}
.b:before{
content: '\f26e';
}
.b:hover:before{
content: '\f2a3';
}
&:hover {
content: '\f26e';
}
&:before {
content: '\f003';
}
&:hover, &:before {
font-family: FontAwesome
}
So you can add all the classes and pseudo-classes you want after commas and include the font family in one go!
I'd create a mixin for that purpose, and in that mixin you include the FontAwesome family-font and the content variable:
$icon: 'bar';
$icon-2: 'baz';
#mixin fa($icon){
font-family: FontAwesome;
content: $icon;
}
.foo{
#include fa($icon);
&:before{
#include fa($icon-2);
}
}
And the output:
.foo {
font-family: FontAwesome;
content: "bar";
}
.foo:before {
font-family: FontAwesome;
content: "baz";
}
Thanks for your help, I am agree with this answers above but these just apply in few classes not in all my css. understand?
so I found a better way to do this just like that:
body {
font-family: FontAwesome,Helvetica;
}
so like that I can use the unicode and the variables and I don't need write font-family in my classes.
&:before {
content: $fa-var-android;
}
&:hover {
content: '\f26e';
}
Thank you.