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
...
Related
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.
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 {
...
}
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'm trying to use an each loop in Sass but the css is compiling with the variable name instead of the content of the variable.
$green-1: #9ae200;
$green-2: #5ea600;
$color-list: green-1 green-2;
#each $single-color in $color-list {
&.#{$single-color} {
background-color: $single-color;
}
}
The output I am looking for is:
.green-1 {
background-color:#9ae200;
}
.green-2 {
background-color:#5ea600;
}
But the css is compiling as:
.green-1 {
background-color:green-1;
}
.green-2 {
background-color:green-2;
}
So to try to get the dollar sign in there I tried this:
#each $single-color in $color-list {
#function create-variable($variable){
#return "$" + $variable;
}
&.#{$single-color} {
background-color: create-variable($single-color);
}
}
But that compiled as:
.green-1 {
background-color:$green-1;
}
.green-2 {
background-color:$green-2;
}
Sass is not reading the variables for some reason and is taking them literally. Anyone know how to make this work?
You cannot create dynamic variable in sass. Instead you can achieve your desired result using map
example:
$green-1: #9ae200;
$green-2: #5ea600;
$color-map: (
green-1: $green-1,
green-2: $green-2,
);
.body{
#each $key,$value in $color-map {
&.#{$key} {
background-color: $value;
}
}
}
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;
}