I have this code;
#each $viewport, $viewport-val in $viewport-vars {
// Classes only apply once certain breakpoint is triggered.
#include media-query(nth($viewport-val, 1)) {
$_cols: nth($viewport-val, 2);
#while $_cols > 1 {
#for $i from 1 through $_cols {
#if $i == $_cols {
.pull-#{$viewport}-1/0 {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
} #else {
.pull-#{$viewport}-#{$i}-#{$_cols} {
$col-width: (100 / $_cols * $i);
right: (percentage($col-width / 100));
}
}
}
$_cols: $_cols - 1;
}
}
}
Where I have this line .pull-#{$viewport}-#{$i}-#{$_cols}, I would like to add slash in the classname like so, #{$i}/#{$_cols}
Unfortunately this throws an error, does anyone know why?
B
Related
I have made a condition in scss but when I compile, the result cannot appear in css file, I hope anyone can help me to solve my problem, I put code in the bellow :
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $color-sp == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $color-sp == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
I think you have to put if condition on $i instead of $color-sp. Check below code it will produce two classes .
try it on https://www.sassmeister.com/
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
#if $i == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} #else if $i == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}
And more optimized code for creating classes is below:
$color-sp: color-sp;
$width: 100%;
#for $i from 1 through 2 {
.#{$color-sp}-#{$i} {
width: $width / $i;
}
}
I have a problem with the nesting of SAS to make multiple selections, nose much about it, I hope you can help me and understand (because I do not write very good English).
SASS mixin:
#mixin data($x) {
$sel: &;
$collector: ();
#for $i from 1 through length($sel) {
$s: nth($sel, $i);
$last: nth($s, -1);
#if str-slice($last, -1) == "]" {
// if is just the bare attribute with no value, $offset will be -1, otherwise it will be -2
$offset: -1;
$current-x: $x;
#if str-slice($last, -2) == '"]' {
// this attribute already has a value, so we need to adjust the offset
$offset: -2;
} #else {
// no attribute value, so add the equals and quotes
$current-x: '="' + $x + '"';
}
$last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset);
$collector: append($collector, set-nth($s, -1, $last), comma);
} #else {
// following line will append $x to your non-attribute selector
$collector: append($collector, selector-append($s, $x), comma);
// the following line will not change your non-attribute selector at all
//$collector: append($collector, $s, comma);
}
}
#at-root #{$collector} {
#content;
}
}
SASS:
[data-content] {
#include data("content") {
background: black;
}
}
Output:
[data-content="content"] {
background: black;
}
The problem is I can not nest more than one item, for example does not work:
[data-content] {
#include data("content", "menu") {
background: black;
}
}
Output:
[data-content="content"],
[data-content="menu"] {
background: black;
}
Any way to solve?
You can always do something like this if you don't mind having to specify your selectors instead of passing them through as variables.
[data-content="content"], [data-content="menu"]{
#include data() {
background: black;
}
}
I want generate classes like grid-col-1, grid-col-md-1, grid-col-lg-1, grid-col-2, grid-col-md-2, grid-col-lg-2...
So, I have created this mixin to do it:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
$selector: 'grid-col-';
#if $type { $selector: $selector + $type + '-' + $i; }
#else { $selector: $selector + $i; }
.#{$selector} { width: $i/$grid-columns*100%; }
}
}
But I still think the code a bit repetitive. Is there a smarter way to make the condition that adds the type in the selector name?
You can make things more compact by using the if() function:
$grid-columns: 12;
#mixin grid-col-builder($type: false) {
#for $i from 1 through $grid-columns {
.#{'grid-col-' + if($type, $type + '-', '') + $i} {
width: $i / $grid-columns * 100%;
}
}
}
I have a :not css selector in SASS mixin but it doesn't do anything:
Code Snippet:
#mixin dropdown-pos($pos:right) {
&:not(.notip) {
#if $comp-tip == true{
#if $pos == right {
top:$dropdown-width * -0.6;
#include tip($pos:$pos);
}
}
}
&.notip {
#if $pos == right {
top: 0;
left:$dropdown-width * 0.8;
}
}
}
The .notip class is being generated but no CSS is being generated for :not(.notip).
I tried re-creating this, and .someclass.notip was being generated for me but .someclass:not(.notip) was not, for as long as I did not have the #mixin tip() defined. Once I had that, it all worked.
http://sassmeister.com/gist/9775949
$dropdown-width: 100px;
$comp-tip: true;
#mixin tip($pos:right) {
}
#mixin dropdown-pos($pos:right) {
&:not(.notip) {
#if $comp-tip == true{
#if $pos == right {
top:$dropdown-width * -0.6;
background-color: #f00;
#include tip($pos:$pos);
}
}
}
&.notip {
#if $pos == right {
top: 0;
left:$dropdown-width * 0.8;
background-color: #00f;
}
}
}
.someclass { #include dropdown-pos(); }
EDIT: http://sassmeister.com/ is a good place to debug your SASS because it gives you error messages. Undefined mixin 'tip'. it what I get when I remove #mixin tip($pos:right) { }
I'm creating less grid sistem and i dont know how to optimise grid.less
If i chouse #gridColumns: 14; i need to add new lines in grid.less, maybe there is anothes option to automate this?
Variables.less
#gridColumns: 12;
#gridWidth: 62.5em;
#gridGutterWidth: 1.8em;
#grid.less
.l-1 { .grid(1); }
.l-2 { .grid(2); }
.l-3 { .grid(3); }
.l-4 { .grid(4); }
.l-5 { .grid(5); }
.l-6 { .grid(6); }
.l-7 { .grid(7); }
.l-8 { .grid(8); }
.l-9 { .grid(9); }
.l-10 { .grid(10); }
.l-11 { .grid(11); }
.l-12 { .grid(12); }
#mixins.less
.grid(#num) {
width: (100% / #gridColumns) * #num;
position: relative;}
The only sensible way of doing it using LESS is using a recursive mixin like Twitter Bootstrap.
.spanX (#index) when (#index > 0) {
.span#{index} { .span(#index); }
.spanX(#index - 1);
}
.spanX (0) {}
.span (#columns) {
width: (#gridColumnWidth * #columns) + (#gridGutterWidth * (#columns - 1));
}