Problem
I've created the following mixin:
.type(#style;#mb) {
& when (#style = hero) {
margin-bottom: #mb;
font-size: 2.625rem;
line-height: 1.238095238;
}
}
Now this does mostly what I want. The problem I am having is sometimes I will want to declare a #mb value, but many times I will not. In those instances I will want to fallback to a pre-determined value for each #style parameter.
For example:
For hero, #mb default is margin-bottom: 1.25rem;
For page, #mb default is margin-bottom: 1.125rem;
etc
Desired Outcome
The desired outcome is as follows:
.sample-class-01 { .type(hero); }
.sample-class-02 { .type(page,0); }
and I would get the following output:
.sample-class-01 {
margin-bottom: 1.25rem;
font-size: 2.625rem;
line-height: 1.238095238;
}
.sample-class-02 {
margin-bottom: 0;
font-size: 2rem;
line-height: 1.3125;
}
How do I create this mixin?
Just make the mixin specialization/overloading for each style set:
.type(hero, #mb: 1.25rem) {
margin-bottom: #mb;
font-size: 2.625rem;
line-height: 1.238095238;
}
.type(not-a-hero, #mb: 2.22rem) {
margin-bottom: #mb;
font-size: 3.333rem;
line-height: 4.444444444;
}
// etc.
Ref.:
Argument
Pattern-matching
Mixins with Multiple
Parameters
Something like this:
.type(#style; #mb: '') {
& when (#style = hero) {
font-size: 42px; // 42px
line-height: 52px; // 52px
& when not (#mb = '') { margin-bottom: #mb; }
& when (#mb = '') { margin-bottom: 1.25rem; }
}
& when (#style = footer) {
font-size: 22px; // 42px
line-height: 32px; // 52px
& when not (#mb = '') { margin-bottom: #mb; }
& when (#mb = '') { margin-bottom: 1.125rem; }
}
}
.sample-class-1 { .type(hero); }
.sample-class-2 { .type(hero,0); }
.sample-class-3 { .type(hero,3rem); }
.sample-class-4 { .type(footer); }
.sample-class-5 { .type(footer,0); }
.sample-class-6 { .type(footer,3rem); }
Should compile to:
.sample-class-1 {
font-size: 42px;
line-height: 52px;
margin-bottom: 1.25rem;
}
.sample-class-2 {
font-size: 42px;
line-height: 52px;
margin-bottom: 0;
}
.sample-class-3 {
font-size: 42px;
line-height: 52px;
margin-bottom: 3rem;
}
.sample-class-4 {
font-size: 22px;
line-height: 32px;
margin-bottom: 1.125rem;
}
.sample-class-5 {
font-size: 22px;
line-height: 32px;
margin-bottom: 0;
}
.sample-class-6 {
font-size: 22px;
line-height: 32px;
margin-bottom: 3rem;
}
Less2css link
Related
I know this may sound silly but it would be possible to shorten or rewrite a code like this in SCSS or should I just leave it as is?
h1,
h2,
h3,
h4 {
letter-spacing: .02em;
color: $heading-color;
}
h1 {
margin: .5em 0;
font-size: 2.6rem;
}
h2 {
margin: 1em 0;
font-size: 2.4rem;
}
h3 {
margin: 1.2em 0;
font-size: 1.8rem;
}
h4 {
margin: 1.6em 0;
font-size: 1.4rem;
}
I would recommend you, if you want to shorten your scss code, use loops for "h" tags for setting the margin and font-size.
here is the example how I use it to calculate font-sizes:
#for $h from 1 through 6 {
h#{$h} {
font-size: $base-font-size + $heading-scale * (6 - $h);
}
}
Where:
$h: 1;
$base-font-size: 1rem;
$heading-scale: 0.2;
written in variables.
So you can take whatever base size you want and use the scale to increase the size dynamically.
In my example it would be in the output css file:
h1 {
font-size: 2rem; }
h2 {
font-size: 1.8rem; }
h3 {
font-size: 1.6rem; }
h4 {
font-size: 1.4rem; }
h5 {
font-size: 1.2rem; }
h6 {
font-size: 1rem; }
In the same manner you can set margins.
Considering this following scss code:
#mixin homeSlider(
$dim: 150px,
$h1: "h1 { font-size: 4em; margin-top: 0; }"
){
section {
margin-top: -$dim;
}
$h1;
}
#include homeSlider( $dim: 50px, $h1: "h1 { font-size: 3em; margin-top: 0; }" )
I need to know how is it possible to achieve my goal
Try this
#mixin homeSlider($dim, $h1-font-size){
section {
margin-top: -$dim;
h1 {
font-size: $h1-font-size;
margin-top: 0;
}
}
}
#include homeSlider(50px, 3em;) /* $dim = 50px - $h1-font-size = 3em; */
Is there a way to use {$} to get the most direct parent?
In the example below '&#{&}' is not working as I expected, I managed to work around it using mixin.
#mixin modifier($modifier, $block: &) {
&#{"."+$block}--#{$modifier} {
#content;
}
}
.namespace{
$button : 'btn';
.#{$button} {
line-height: 1;
#include modifier('big', $button){ // working but not clean
padding-top: 8px;
}
&#{&}--big{ // not working as {&} is interpolated to namespace .btn
padding-top: 12px;
}
}
}
Compiled to:
.namespace .btn {
line-height: 1;
}
.namespace .btn.btn--big {
padding-top: 8px;
}
.namespace .btn.namespace .btn--big {
padding-top: 12px;
}
The construct looks a bit odd to me – but you could do it like:
.namespace {
$class: ".btn";
#{$class} { line-height: 1; }
#{$class}#{$class}--big { padding-top: 8px; }
& #{$class}#{&} #{$class}--big { padding-top: 12px; }
}
...or using selector append
.namespace .btn {
line-height: 1;
#at-root {
#{selector-append(&,".btn")}--big{ padding-top: 8px; }
#{selector-append(&,&)}--big{ padding-top: 12px; }
}
}
both compiling to:
.namespace .btn { line-height: 1; }
.namespace .btn.btn--big { padding-top: 8px; }
.namespace .btn.namespace .btn--big { padding-top: 12px; }
How do I change the spacing (between lines/paragraphs) in my mobile footer - css? Code below is from responsive.css wordpress
this is from the responsive.css part of my wordpress
I want the spacing to be closer than what it is currently - you can check it by visiting www.hotdatajobs.digitalya.ro
/* new changes footer */
#media ( max-width: 640px ) {
.col-xs-12.p-t-20.padding-l-r-10 span {
font-size: 18px;
}
.site-footer {
padding-top: 40px;
}
.footerRow .col-md-15.col-sm-15.col-xs-12 .title-block {
margin-bottom: 10px;
}
.m-h-f {
min-height: 295px;
}
.m-h-l {
min-height: 170px;
}
}
#media ( max-width: 440px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 230px;
}
.p-l-f {
width: 150px!important;
}
.site-footer .footerRow .footer-social-item {
font-size: 16px;
}
.site-footer .footerRow a {
font-size: 14px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 16px;
}
}
#media ( max-width: 374px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 225px;
}
.p-l-f {
width: 110px!important;
}
.footerRow .col-xs-12 {
padding: 0;
}
.site-footer .footerRow .footer-social-item {
font-size: 14px;
}
.site-footer .footerRow a {
font-size: 12px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 14px;
}
}
/* end general */
You can control spacing between lines of texts with the line-height property.
For example, 16px font-size and 4px distant from the bottom and upper lines:
line-height: 24px; /* 4px +16px + 4px */
Or with em units
line-height: 2em; /* 1em = 12px in this case. 24/12 == 2 */
So..
.site-footer .footerRow .footer-social-item {
font-size: 16px;
line-height: 24px;
}
Of course, increasing of decreasing the line-height depending on how much spacing you want. Anything below 16px will cut off your text because you are using 16px text so keep that in mind.
Also keep in mind that when the width of that div gets greater than 440px the line-height value will not apply.
I'm trying to create standard classes that can be used to add different amounts of padding. This would be added to the individual elements within the DOM to control padding/margins. I'd like to eventually leverage it for different sizes and for margins as well. This is how I've begun to write it in LESS, but is there a shorter way to write this?
#padding-sm: 5px;
#padding-md: 10px;
#padding-lg: 20px;
.padding-sm {
padding: #padding-sm;
}
.padding-sm-h {
padding-right: #padding-sm;
padding-left: #padding-sm;
}
.padding-sm-v {
padding-top: #padding-sm;
padding-bottom: #padding-sm;
}
.padding-sm-top {
padding-top: #padding-sm;
}
.padding-sm-right {
padding-right: #padding-sm;
}
.padding-sm-bottom {
padding-bototm: #padding-sm;
}
.padding-none {
padding: 0;
}
For LESS 1.7+
This uses the .for looping code that can be found here, which is normally recommended to be saved in a separate less file and imported, like so:
#import "for";
Assuming that code is in place, whether by import or hard copied in, then you can build the following mixin:
.setPadding(#size) {
#s: ~"-#{size}";
#getSize: ~"padding#{s}";
#getValue: ##getSize;
#directions: top right bottom left;
#pairs: h right left, v top bottom;
.appendPadding() {.padding& { #props();}}
#{s} {
//set all directions
& {
#props: {padding: #getValue;};
.appendPadding();
}
//set paired directions
& {
.for(#pairs); .-each(#pair) {
#name: extract(#pair, 1);
#one: extract(#pair, 2);
#two: extract(#pair, 3);
&-#{name} {
#props: {
padding-#{one}: #getValue;
padding-#{two}: #getValue;
};
.appendPadding();
}
}
}
//set four base directions
& {
.for(#directions); .-each(#dir) {
&-#{dir} {
#props: {padding-#{dir}: #getValue;};
.appendPadding();
}
}
}
}
}
Now the above looks vastly more complicated than your original code, but it gets its power by its ability to easily reproduce for all your sizing levels. So with the above code, then the following minimal amount of code defines your three groups into CSS as you are desiring:
#padding-sm: 5px;
#padding-md: 10px;
#padding-lg: 20px;
.setPadding(sm);
.setPadding(md);
.setPadding(lg);
.padding-none {
padding: 0;
}
CSS Output
.padding-sm {
padding: 5px;
}
.padding-sm-h {
padding-right: 5px;
padding-left: 5px;
}
.padding-sm-v {
padding-top: 5px;
padding-bottom: 5px;
}
.padding-sm-top {
padding-top: 5px;
}
.padding-sm-right {
padding-right: 5px;
}
.padding-sm-bottom {
padding-bottom: 5px;
}
.padding-sm-left {
padding-left: 5px;
}
.padding-md {
padding: 10px;
}
.padding-md-h {
padding-right: 10px;
padding-left: 10px;
}
.padding-md-v {
padding-top: 10px;
padding-bottom: 10px;
}
.padding-md-top {
padding-top: 10px;
}
.padding-md-right {
padding-right: 10px;
}
.padding-md-bottom {
padding-bottom: 10px;
}
.padding-md-left {
padding-left: 10px;
}
.padding-lg {
padding: 20px;
}
.padding-lg-h {
padding-right: 20px;
padding-left: 20px;
}
.padding-lg-v {
padding-top: 20px;
padding-bottom: 20px;
}
.padding-lg-top {
padding-top: 20px;
}
.padding-lg-right {
padding-right: 20px;
}
.padding-lg-bottom {
padding-bottom: 20px;
}
.padding-lg-left {
padding-left: 20px;
}
.padding-none {
padding: 0;
}