css - SASS rule reuse -



css - SASS rule reuse -

i have set of icons different colors , each color used different status declared css classes. example, <span class="icon icon--app"><span> gives grayness app icon while <span class="icon icon--app icon__light icon__selected"><span> gives white app icon.

the next code written in scss.

span.icon { display: inline-block; width: 32px; height: 32px; &.icon--app { background: url(../images/app_gray.png); &.icon__selected { background: url(../images/app.png); } &.icon__light { background: url(../images/app_gray.png); &.icon__selected { background: url(../images/app_white.png); } } } &.icon--device { background: url(../images/device_gray.png); &.icon__selected { background: url(../images/device.png); } &.icon__light { background: url(../images/device_gray.png); &.icon__selected { background: url(../images/device_white.png); } } } }

the problem is, there's long list of css rules above, shares much similarity app , device , other icons. wonder if can simplify these css rules using sass?

i created mixin you:

@mixin icon($type) { &.icon--#{$type} { background: url(../images/#{$type}_gray.png); &.icon__selected { background: url(../images/#{$type}); } &.icon__light { background: url(../images/#{$type}); &.icon__selected { background: url(../images/#{$type}_white.png) } } } } span.icon { display: inline-block; width: 32px; height: 32px; @include icon(app); @include icon(device); }

css sass

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

ubuntu - Bash Script to Check That Files Are Being Created -

ubuntu - Bash Script to Check That Files Are Being Created - we have amazon ec2 instance upload output our security cameras. every , then, cameras have issue, stop uploaded, , need rebooted. easy way determine seeing if files not beingness created. problem creates lots , lots of files. if utilize find -ctime, takes long time script run. there faster way check see if files have been created since yesterday? need capture result, (yes there files, or not there not,) , email message, nice have didn't take half hr run. #!/bin/bash find /vol/security_ftp/west -ctime -1 find /vol/security_ftp/backentrance -ctime -1 find /vol/security_ftp/boardroomdoor -ctime -1 find /vol/security_ftp/mainentrance -ctime -1 find /vol/security_ftp/north -ctime -1 find /vol/security_ftp/south -ctime -1 using find natural solution, if must avoid it, can see newest file in directory using ls , sorting output according ctime, eg. ls /vol/security_ftp/west -clt | head --lines=1 ...
Read more

Php operator `break` doesn't stop while -

Php operator `break` doesn't stop while - have weird issue, break doesn't break while loop , maintain rotating. logically should break cycle , set output while ($c++ != 5) { // here curl request, doesn't relevant have removed preg_match("!<.*?>(\s*)[^<>]*?{$to}<!", $resp, $result) ; // echo 'cnt = ' .count($result).'<br>'; if(!count($result)) { $amount = 0; echo 'sleep called'; sleep(4); exit; continue; } else { $amount = trim(@$result[1]); $amount = round($amount + $amount * $exchange_ratio, $precision); echo 'break happen<br>'; break; } } so output cnt = 2 break happen cnt = 0 sleep called so skipped break , maintain rotating. how so? edit works fine on localhost issue php version? ...
Read more