I've started using CSS modules, however I cannot find any examples of how exactly this works:
:local(.class){
/* some property */
}
All classes are local by default, so what does :local or :global mean?
That's right, all classes are local by default. But if you switched a block to global and you need a local selector inside, this where you need local applied.
:global {
.a {
...
}
:local(.b) {
...
}
}
compiles to
.a {
...
}
.b___1bJNe {
...
}
Related
Let's say I have a class: myclass__button-create--success.
I want to limit the usage of -create part in:
.myclass__button {
&-create {
}
}
As it's not a new block, element or modifier.
Allowed structures:
.myclass__button-create {
&--success {
}
}
.myclass {
&__button-create {
}
}
.myclass__button-create--success {
}
Any idea how to achieve this restriction using sass-lint?
I'm writing some sass to generate a set of icons based on a series of parameters. I have a function that analyses a set of variables and then returns a 'scenario' variable which in turn is used to filter the information taken from the nested map where everything is stored.
The code which retreives the information from the nested map is as follows:
#each $key-lv0, $lv0 in $icon-config {
#if($key-lv0 == $scenario) {
.icon{
#each $key-lv1, $lv1 in $lv0 {
#if type-of($lv1) != "map" {
#{$key-lv1}: $lv1;
}
#each $key-lv2, $lv2 in $lv1 {
#if type-of($lv2) != "map" {
.#{$key-lv1} {
#{$key-lv2}: $lv2;
}
}
#each $key-lv3, $lv3 in $lv2 {
#if($key-lv2 == "hover") {
.#{$key-lv1}:#{$key-lv2} {
#{$key-lv3}: $lv3;
}
} #else {
.#{$key-lv1} #{$key-lv2} {
#{$key-lv3}: $lv3;
}
}
}
}
}
}
}
}
... and this produces something along these lines:
.icon .icon-header {
background-color: #00a9f0;
}
.icon .icon-header:hover {
border-color: #040100;
}
... etc ...
... which is fine - repeated statements aside whicvh I'll deal with later.
The problem is the cap between ".icon" and ".icon-header". These classes will all be used in a single element and for the css to be interpretted correctly it needs to generate something like this:
.icon.icon-header {
background-color: #00a9f0;
}
.icon.icon-header:hover {
border-color: #040100;
}
I've tried bringing ".icon" down like so:
#if type-of($lv1) != "map" {
.icon#{$key-lv1}: $lv1;
}
and removing it from the top but sass rejects this with the following error:
Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
It seems such a minor thing but it's nagging me and I can't seem to find an answer.
Polymer supports CSS mixins, which can be set like this:
scope1 {
--mixin1: {
attr1: val1;
};
}
and applied like this:
scope2 {
#apply --mixin1; /* sets attr1 */
}
Is there a way to set the value of a mixin from inside a mixin? I tried this, but it doesn't work:
scope1 {
--mixin1: {
attr1: val1;
--mixin2: {
attr2: val2;
};
};
}
scope2 {
#apply --mixin1; /* sets attr1 */
#apply --mixin2; /* is attr2 set? */
}
A real case of why this would be useful: Say you have an app that uses several custom components based on paper-listbox and paper-item. You would like to style all of the lists in your custom components with a different spacing and font. You could set the --paper-listbox and --paper-item mixins in a global scope. But that would affect every occurrence of the two elements relying on defaults. Instead in your custom components, you would simply #apply --custom-list; and set that mixin in a global :root {--custom-list: {/*set list style, set item style*/}; }.
Workaround: Instead of nesting mixins, refactor into selectors:
scope1 {
--mixin1: {
attr1: val1;
};
}
scope1 scope2 {
--mixin2: {
attr2: val2;
};
}
In the use case above, instead of --custom-list with nesting:
:root custom-list {
--paper-input-container: {/*set list style*/};
--paper-item: {/*set item style*/};
}
I have A.css and imported in B.css,
There are few classes rotate45, rotate90, rotate135 and rotate180 in A.css
and I would like to use them in B as
B.css
{
.roate{
// Get properties of rotate180
}
#media(min-width:570)
{
.roate{
// Get properties of rotate45
}
}
#media(min-width:750)
{
.roate{
// Get properties of rotate90
}
}
#media(min-width:950)
{
.roate{
// Get properties of rotate135
}
}
}
can any one help on this.
Import A.css into B.css.
Use #import url(); at the begining of the file.
B.css
#import url('path/to/A.css');
// code in B.css
...
I've used guard expressions elsewhere in my CSS to achieve IF statements in LESS, however these don't work for me when trying to declare variables like so...
#neutral: false;
#warm: true;
when (#neutral = true) {
#green: #91C95B;
#red: #F15647;
etc...
}
when (#warm = true) {
#green: #91AD3C;
#red: #BF2A23;
etc...
}
This is an example of how I would like to be able to use that variable
h1 {
color:#green;
}
This is how I would expect it to compile down to CSS
h1 {
color: #91AD3C;
}
Is this possible with LESS or would I need to modify my code to use mixin guards?
You can use Guarded Mixins like this :
#neutral: false;
#warm: true;
.color() when (#neutral) {
#green: #91C95B;
}
.color() when (#warm) {
#green: #91AD3C;
}
.color();
h1 {
color:#green;
}