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.
Related
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 would like to code a simple alert component that has color variations as well as font icon variations. The icons are coded with :before. I can write it fine in in vanilla CSS but I want to do it in LESS as compact as possible and I am stuck with using :extend() which I rarely used :(
.base-alert {
color: red;
...
&:before {
content: 'base-icon-unicode';
...
}
}
In vanilla CSS the code for the variation classes would be like:
.alert-warning {
color: red;
}
.alert-warning:before {
content "warning-icon-unicode";
}
But then the HTML should be class="base-alert alert-warning". I would like to code the variation classes in LESS, using :extend() so in HTML I would only write class="alert-warning" or class="alert-succes" and so on. Something like:
.alert-warning {
&:extend(.base-alert);
color: orange;
&:before {
content "warning-icon-unicode";
}
}
But it the :before doesn't apply anymore.
It seems like you are looking for the following:
.alert-warning:extend(.base-alert all) {
color: orange;
&:before {
content: "warning-icon-unicode";
}
}
This basically just extends .alert-warning from .base-alert using the all keyword. Then the content value for the pseudo-element is changed to warning-icon-unicode and the color is changed to orange.
Based on your comment about extending to multiple classes, I guess you could use the following, which will essentially just alias the selector:
.alert-warning, .alert-warning2 {
&:extend(.base-alert all);
color: orange;
&:before {
content: "warning-icon-unicode";
}
}
Alternatively, depending on your preferences, you could also use the following, which will produce the same desired results.
.alert-warning:extend(.base-alert all),
.alert-warning2:extend(.base-alert all) {
color: orange;
&:before {
content: "warning-icon-unicode";
}
}
..this will work the same as well:
.alert-warning:extend(.base-alert all) {
color: orange;
&:before {
content: "warning-icon-unicode";
}
}
.alert-warning2:extend(.alert-warning all) {}
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;
}
}
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."
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."