Can I achieve this versatile mixin in SASS? - sass

I am attempting to reduce the amount of repitition in the following CSS:
$width_altyp_name : 220px;
$width_view_dates : 140px;
$width_alog_status: 60px;
tr,
td {
line-height: 3;
.view_date_raised,
.view_date_sent {
max-width: $width_view_dates;
min-width: $width_view_dates;
}
.altyp_name {
max-width: $width_altyp_name;
min-width: $width_altyp_name;
}
.alog_ID {
max-width: $width_altyp_name;
min-width: $width_altyp_name;
}
.alog_status_text {
max-width: $width_alog_status;
min-width: $width_alog_status;
}
}
I am wondering whether I can use #mixin (or anything else) to produce a "function" which will take 2 arguments:
$classname
$width
and use that to generate CSS rules in the style of the following:
#mixin set-column-width($classname, $width)
$classname {
max-width: $width;
min-width: $width;
}
}
I would hope to then replace much of the above with something like:
#include set-column-width(".view_date_raised", $width_view_dates);
#include set-column-width(".altyp_name", $width_altyp_name);
#include set-column-width(".alog_status_text", $width_alog_status_text);

Thanks to #Arkellys for pointing out that all I needed to do was understand interpolation
My revised SASS is this:
$width_alog_ID : 60px;
$width_alog_status: 60px;
$width_altyp_name : 220px;
$width_emp_names : 150px;
$width_view_dates : 140px;
#mixin set-column-width($c, $w) {
#{$c} {
max-width: $w;
min-width: $w;
}
}
tr,
td {
line-height: 2;
#include set-column-width('.view_date_raised', $width_view_dates);
#include set-column-width('.view_date_sent', $width_view_dates);
#include set-column-width('.altyp_name', $width_altyp_name);
#include set-column-width('.alog_ID', $width_alog_ID);
#include set-column-width('.alog_status_text', $width_alog_status);
#include set-column-width('.emp_drafter', $width_emp_names);
#include set-column-width('.emp_sender', $width_emp_names);
}

Related

Is there a way to write style that will always come after mixins are included?

I am facing a problem with the SCSS mixins whereby I have to repeat the same code to get the work done. I have the following SCSS code:
#mixin column($count, $size) { // Can not make any change in this code.
width: getWidth($count, $size);
margin-left: 3%;
margin-right: 3%;
}
#mixin desktop {
#media screen and (min-width: 1024px) {
#content;
}
}
#mixin tablet {
#media screen and (min-width: 768px) and (max-width: 1023px) {
#content;
}
}
#function getWidth($count, $size) {
#return 50; // For example purpose only.
}
.c {
#include desktop {
#include column(10, large);
}
#include desktop {
#include column(11, large);
}
margin: 0 auto;
}
which is compiled into:
.c {
margin: 0 auto;
}
#media screen and (min-width: 1024px) {
.c {
width: 50;
margin-left: 3%;
margin-right: 3%;
}
}
#media screen and (min-width: 1024px) {
.c {
width: 50;
margin-left: 3%;
margin-right: 3%;
}
}
The problem here is that margin is overwritten by the mixins. Or I have to repeat the same code(duplicate code) like below:
.c {
#include desktop {
#include column(10, large);
margin: 0 auto; // Duplicate
}
#include desktop {
#include column(11, large);
margin: 0 auto; // Duplicate
}
margin: 0 auto;
}
to get:
.c {
margin: 0 auto;
}
#media screen and (min-width: 1024px) {
.c {
width: 50;
margin-left: 3%;
margin-right: 3%;
margin: 0 auto;
}
}
#media screen and (min-width: 1024px) {
.c {
width: 50;
margin-left: 3%;
margin-right: 3%;
margin: 0 auto;
}
}
Is there any better way to remove this duplicate code so that I have to write code only once?
Try this to see if the #media query comes after makes you happy.
.c {
#include desktop {
#include column(10, large);
}
#include desktop {
#include column(11, large);
}
& {
margin: 0 auto;
}
}

Is there a way to include a mixin as a variable

I just tried to save me some time, generating some helper css classes for different breakpoints.
What I tried:
#mixin resp { width: 100%; height: auto;}
#mixin table { display: table}
#mixin trow { display: table-row}
#mixin tcell { display: table-cell; }
#mixin gutter1px { padding: 0 1px; }
$tools: resp, table, trow, tcell, gutter1px;
#mixin make-tools($breakpoint) {
#each $tool in $tools {
$i: index($tools, $tool);
.#{$tool}-$breakpoint { #include #{$tool}(); }
}
}
#media (min-width: $screen-xs-min) {
#include make-tools(xs);
}
But this dosent seem to work:
#include #{$tool}();
Has anyone an idea how to archive that, or is it simply not possible?

Issue mixing variable with mixin with keyframe animation?

First time using SCSS, and testing my knowledge from the Sass-Lang.com guide. According to the guide, it is possible to both set variables and use mixins to simplify your CSS.
I was coding an animation where the div is clipped from bottom to top. I used variables to set the initial and final clip-path settings, and used them while calling a mixin. Yet I get the error, 'Invalid CSS after "...slider-initial)": expected "{", was "; }"'. What am I doing wrong?
Here is my code:
<body>
<section id='main'>
<div id='left'></div>
<div id='right'></div>
<section>
</body>
$slider-initial: inset(0 0 0 0);
$slider-final: inset(0 0 100% 0);
#mixin slider-clip($slider-state) {
-webkit-clip-path: $slider-state;
clip-path: $slider-state;
}
body {
height: 100%; width: 100%;
margin: 0 auto;
}
#main {
height: 64vh; width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
border: 1vh solid black;
}
#left {
order: 1;
width: 4%;
height: 100%;
margin-left: 46%;
background: green;
}
#right {
opacity: 1;
order: 2;
width: 4%;
height: 100%;
margin: auto;
margin-left: 0;
animation-name: dropdown;
animation-duration: 4s;
background: red;
}
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
You called your mixin in a wrong way:
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
In the guide on sass-lang.com, you can see the following example of how to include a mixin:
.box { #include border-radius(10px); }
Applied to your case, your code should look like this:
#keyframes dropdown {
from { #include slider-clip($slider-inital); }
to { #include slider-clip($slider-final); }
}

Updating a mixin for themes with SASS 3.4.7

I updated today SASS to use the version 3.4.7 Unfortunetly, one mixin I used since the beginning of my project don't work anymore. I don't understand why...
$program: test1;
#mixin program($programName) {
#each $p in $programName {
#if $p == $program {
#content;
}
}
}
$cta-box-type: null !default;
#include program(test1) {
$cta-box-type: cta-buy, cta-like;
}
#include program(test2) {
$cta-box-type: cta-like, cta-share;
}
#each $cta-type in $cta-box-type {
.banner--#{$cta-type} .banner {
background: white image-url("Modules/Cta/bg-#{$cta-type}-1.jpg") no-repeat bottom left;
background-size: 100% auto;
}
}
DEMO SASSMEISTER
The compiled result looks like this:
.banner-- .banner {
background: white url('/images/Modules/Cta/bg--1.jpg') no-repeat bottom left;
background-size: 100% auto;
}
Instead of:
.banner--cta-buy .banner {
background: white url('/images/Modules/Cta/bg-cta-buy-1.jpg') no-repeat bottom left;
background-size: 100% auto;
}
.banner--cta-like .banner {
background: white url('/images/Modules/Cta/bg-cta-like-1.jpg') no-repeat bottom left;
background-size: 100% auto;
}
If someone have an idea why it's no more working, it's gone help me a lot !
Thanks !
I found the solution :
I simply removed the !default and add !global.
$cta-box-type: null;
#include program(test1) {
$cta-box-type: cta-buy, cta-like !global;
}
#include program(test2) {
$cta-box-type: cta-like, cta-share !global;
}

Susy grid - any (easy?) way to make 'columns' the same height?

Getting my feet wet with Susy/sass/haml etc (using adjusted middleman - with latest susy from master branch)
Have this in grid.css.scss
#import 'susy';
$total-columns : 8;
$column-width : 4em;
$gutter-width : 0em;
$grid-padding : $gutter-width;
$break-max : 12;
$container-style: magic;
// Container
.page {
#include container($total-columns, $break-max);
}
// Layout
.header {
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.pagenav {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.main {
clear: both;
.main-left {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(7);
}
}
.main-right {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(3 omega);
}
}
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.footer {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
this snippet comes from site.css.scss
.main {
background-color: #eee;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
.body background is black...
Now when content in main-left is larger than main-right I see a black square on the bottom right...
Any way I can make that bottom right #eee i.o.w. main-right the same height (dynamic) as main-left - or have the .main background to apply...???
Thanks
Peter
PS Somebody with more credits should make a Susy tag in stackoverflow...
#main {
display: table;
background-color: #eee;
}
.main-left,
.main-right{
display: table-cell;
vertical-align: top;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
This will make the two divs match each other as if they were adjacent table cells.
Don't worry, this doesn't qualify as using tables for layout, it's cool for columns, and it's not caused me any problems.
Of course, shitty old browsers don't support it, but you could use a .js script like ie9.js to patch it where necessary.

Resources