I'm trying to create a dynamic css property using SASS by using mixins.
#mixin setProperty($property,$value,$unit:null){
#{$property} :$value$unit;
}
.class{
#include setProperty(position,relative);
}
This creates an output
.class {
position: relative;
}
I'm fine with this. But when i create some property for margin or padding we should include PX. So i tried something like this
.class{
#include setProperty(margin,10,px);
}
which creates output with a space in the middle as follows. How do i get rid of these space.
.class{
margin: 10 px
}
You should use interpolation to concatenate the values instead of adding, you can try this:
#mixin setProperty($property,$value,$unit:null){
#{$property} :#{$value}$unit;
}
When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.
Related
I'd like to get the result below using sass nesting
css
.box {...}
h3.box-title {...}
I tried code like this, but it causes an error.
sass
.box {
h3.&-title {
...
}
}
I'd like to know if there is any way to do this keeping sass nesting?
I know that it's not good to write HTML element on CSS,
but I'm working on a project that I can't modify existing CSS and need to overwrite them.
Try this:
.box {
#at-root h3#{&}-title {
...
}
}
I used the sass interpolation #{} to compile expectedly the value of &, and #at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)
Here's the captured result:
Anyway, I don't think this is a good practice to write sass/scss
.box
and
.box-title
are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.
Also & is used to look for additional class names. i.e.
.box {
&.box-title {}
}
would be
.box.box-title {}
I wanted to make a mixin for column spanning containers in SASS using the Susy framework where I could just use an include in a div and use the span-columns such as this:
#mixin container($columns, $ofColumns) {
#include span-columns($columns,$ofColumns);
}
Then in CSS use it like this:
#foo {
#include container(4,12);
}
But I get the error in the output css 'Mixin container is missing argument $columns.' What am I doing wrong here?
Is there a way to directly assign a CSS value to a SASS variable, like this:
$var:padding: 20px/1440px * 100%;
I know that I can to this:
$padding: 20px/1440px * 100%;
padding: $padding;
But is there a way to directly assign a value in CSS to a variable? Basically to have it on a same line.
not possible to use a variable directly, you could use a mixin instead:
#mixin pad{padding: 20px/1440px * 100%;}
.div-with-padding{#include pad;}
http://jsfiddle.net/gTsG9/
no its not possible to assign directly from the variable. you have to use mixin for that.
sample :
#mixin ur_padding
{
padding:20px/1440px * 100%
}
.ur_div_here
{
#include ur_padding;
}
You could assign a css value like a string:
$var:"padding: 20px/1440px * 100%";
But I really don't know how is this going to help you. Mixin is the best way.
Most Susy examples I've seen seem to handle situations where the amount of columns changes at a given breakpoint, i.e.:
$total-columns: 4;
$large: 12;
// code based on 4 columns
#include at-breakpoint($large) {
// code based on 12 columns
}
But what about when you want the number of columns to remain the same, but (for example) just change the column width? Like this:
$total-columns: 12;
$column-width: 3em;
$large: 64em;
$large-column-width: 3.75em;
#include at-breakpoint($large) {
$column-width: $large-column-width; // automagically changes previously declared column-widths.
}
I would want anything using columns() or span-columns() before the breakpoint to automatically adjust their values to the new column-width without having to redeclare them.
So...
foo { #include span-columns(4, $total-columns); }
would not change at the breakpoint, but the width of the columns would, automatically.
Is this possible?
Susy 2 solves this problem using the new susy-breakpoint with a more powerful shorthand syntax. But the Susy 1 approach isn't much more complex. The at-breakpoint mixin is a simple wrapper for two actions:
Set up a media-query.
Change the global Susy settings inside that media-query block.
I recommend downloading Breakpoint (or another plugin like it) to handle the media-query side of things, but you can also do it by hand. Susy provides a mixin to handle the second part (with-grid-settings). If you put those two together, you have a more powerful version of at-breakpoint.
$large: 64em;
$large-column-width: 3.75em;
#media (min-width: $large) {
#include with-grid-settings($column-width: $large-column-width) {
// new column-width applied to code in here.
}
}
I've got a SCSS-based layout in which I want to use the spacing module from OOCSS.
The OOCSS module is pure CSS - ptl, for example, stands for padding-top: large, where large is a defined value (by default 20px).
I'd like to enhance it with SCSS. So far I've been able to replace the fixed values with SCSS variables, so I can change the values in one place if I want to (I don't want to):
$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}
Now I'd like to be able to use ptn,pvs, etc. as mixins, so I can do this:
.client-name {
#include spacing-pvs; // this has the same padding properties as pvs
}
I'm flexible in the syntax, but that's the functionality I'd be interested in having.
The only way I can think of for doing this is manually defining every single mixin:
#mixin spacing-pvs {
padding-top: $spacing-small !important;
padding-bottom: $spacing-small !important;
}
.pvs { #include spacing-pvs; }
But there are around 56 styles/mixins. Doing each one individually like this would be pain to write and to maintain.
Is there a better way to do this in SASS/SCSS?
The most efficient mixin would be like this (you'll need a similar mixin for padding, or add an extra argument to switch between margin/padding):
#mixin marginify($t: null, $r: null, $b: null, $l: null) {
margin-top: $t;
margin-right: $r;
margin-bottom: $b;
margin-left: $l;
}
.test {
#include marginify($t: 10px, $b: 10px);
color: green;
}
Which generates this:
.test {
margin-top: 10px;
margin-bottom: 10px;
color: green;
}
The null (available in Sass 3.2+) is doing its magic here: if a variable is null, then it doesn't generate a property for it. However, you have to give up the use of !important (most people would argue that you should only use it as a last resort anyway). Reliance on this mixin is going to introduce a fair bit of bloat because the longhand form is always used over the shorthand (margin: 10px 0), so you'll need to use it responsibly or write a more powerful mixin that will generate the shorthand if appropriate.
That said, using a mixin for this purpose (adding margins) does reduce readability in your code. Before I looked at the entire source, the names made no sense. There's a lot to be said about the readability of vanilla CSS. The marginify mixin isn't really a reusable pattern like a clearfix or inline-menu mixin might be: writing a mixin isn't just about saving keystrokes.
I ended up not using mixins at all. Instead, I left the CSS rules as they were, and I used this less documented feature called #extend. Behold!:
.client-name {
#extend .pvs; // this has the same padding properties as .pvs
}