I've just installed Breakpoint via bower and I'm using a sample right from the wiki: https://github.com/Team-Sass/breakpoint/wiki/Basic-Media-Queries
$pair: 456px 794px;
#foo {
#include breakpoint($pair) {
content: 'Paired Media Query';
}
}
I should see this output:
#media (min-width: 456px) and (max-width: 794px) {
#foo {
content: 'Paired Media Query';
}
}
Instead, I see this:
#media (min-width: 456px), (min-width: 794px) {
#foo {
content: 'Paired Media Query';
}
}
Could anyone help me resolve this? Thanks
I needed to add this line to my gruntfile.js > compass > options >
require: '<%= yeoman.app %>/bower_components/compass-breakpoint/lib/breakpoint',
Related
Consider, I have the following SASS partial:
#import '../modules/cdn';
$font-url: '#{$cdn-base-url}/fonts/MyFont';
#font-face {
font-family: 'MyFont';
src:
url('#{$font-url}-regular.woff2') format('woff2'),
url('#{$font-url}-regular.woff') format('woff')
;
}
I just want to save me some typing, so I define the $font-url helper variable. However, I don't want this variable to be global and to be exported to every file, which imports this one.
Right now, when I do:
#import 'partials/my-font';
p {
font-family: MyFont, sans-serif;
&:after {
content: $font-url;
}
}
I'm getting the following result:
#font-face {
font-family: 'MyFont';
src:
url("https://cdn.example.com/fonts/MyFont-regular.woff2") format("woff2"),
url("https://cdn.example.com/fonts/My Font-regular.woff") format("woff")
;
}
p {
font-family: MyFont, sans-serif;
}
p:after {
content: "https://cdn.example.com/fonts/MyFont";
}
However, I would like compilation to fail at this case due to the missing $font-url variable (which shouldn't be exported).
The only way I found so far is to define a mixin to actually make the variable local:
#import '../../modules/cdn';
#mixin my-font {
$font-url: '#{$cdn-base-url}/fonts/MyFont';
#font-face {
font-family: 'MyFont';
src:
url('#{$font-url}-regular.woff2') format('woff2'),
url('#{$font-url}-regular.woff') format('woff')
;
}
}
And it should be called like this:
#import 'fonts/my-font';
#include my-font();
Consider the following Less code:
.a {
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
background: red;
}
}
.b {
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
background: blue;
}
}
What I'd like to be able to do is define the four possible types of buttons in a reusable way. I used to be able to do this easily in SASS, but have switched to Less in order to use Semantic UI. I can't find a syntax to do this in Less - is it possible?
Okay, I have a solution to this now, derived from this post:
#all-buttons: {
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
.get-props()
}
};
.set-props(#selectors; #rules; #extension: ~'') {
#selectors();
.get-props() {
&#{extension} { #rules(); }
}
}
.all-buttons(#rules; #extension: ~'') {
.set-props(#all-buttons; #rules; #extension);
}
.a {
.all-buttons({
background: red;
});
}
.b {
.all-buttons({
background: blue;
});
}
// Also enables an extension such as a pseudo selector for each button type
.c {
.all-buttons({
background: green;
}, ~':hover');
}
I've got this LESS stylesheet. The idea it to alias a lot of icon classes to my local classnames in our "namespace".
// base-icons.less
.base-icon {
display: block;
font: "myFont.otf"
}
.base-icon-foo { content: 'foo' }
.base-icon-bar { content: 'bar' }
.base-icon-fiz { content: 'fiz' }
// my-icons.less
.my-icon {
&-foo { .base-icon; .base-icon-foo; }
&-bar { .base-icon; .base-icon-bar; }
&-fiz { .base-icon; .base-icon-fiz; }
}
Is there a way to prevent having to add the .base-icon class to each single line in the my-icons.less file? I want to apply the css to all classes that start with .my-icon but it would be cleaner to not have to type the .base-icon class each time.
Learn mixins and extend. E.g. (assuming you can't modify base-icons.less):
// base-icons.less
.base-icon {
display: block;
font: "myFont.otf"
}
// my-icons.less
.i(foo);
.i(bar);
.i(baz);
.i(#name) {
.my-icon-#{name} {
&:extend(.base-icon);
content: '#{name}';
}
}
Also see stuff like In LESS, can I loop over class/mixin "patterns"?
I have a media query in LESS: #media (max-width: 1079px) { ... }. Basically I want to create a variable in LESS in which I can just say #media (*LESS variable goes here*) { ... } in my stylesheets. How can I interpolate the string max-width: 1079px into a LESS variable to make this happen?
Thanks
For the variable, you could escape the string value:
#media-max-width: ~"max-width: 1079px";
Code snippet:
#media-max-width: ~"max-width: 1079px";
#media (#media-max-width) {
p {
color: #f00;
}
}
Which will output the following:
#media (max-width: 1079px) {
p {
color: #f00;
}
}
You could also include the parenthesis in the variable too:
#media-max-width: ~"(max-width: 1079px)";
#media #media-max-width {
p {
color: #f00;
}
}
So my code is having a major issue with types and I can't seem to solve it.
Whenever I subtract 1 from line 8 there are issues.
How can I resolve this?
#max-columns: 2;
#column-1-width-min: 30;
#column-2-width-min: 40;
.loop-column(#index) when (#index > 0) {
#max-minus-1a: "#{column-#{index}-width-min}";
#max-minus-1b: #max-minus-1a - 1; // problem child
#min: ~"min-width: #{column-#{index}-width-min}";
#max: ~"max-width: #{max-minus-1b}";
#media (#min) and (#max) {
[data-deckgrid="card"]::before {
content: "#{index} .column.card-column-#{index}";
}
}
.loop-column(#index - 1);
}
.loop-column(#max-columns);
In addition to the method you can find in this SO answer (as I have already mentioned in my comment above), I think the whole snippet can be simplified to something like (Less 1.5.x or higher):
#column-widths: 30, 40, 55, 500; // etc.
.loop-column(#index) when (#index > 0) {
.loop-column(#index - 1);
#min: extract(#column-widths, #index);
#max: (extract(#column-widths, #index + 1) - 1);
#media (min-width: #min) and (max-width: #max) {
[data-deckgrid="card"]::before {
content: "#{index} .column.card-column-#{index}";
}
}
}
.loop-column(length(#column-widths) - 1);
with the following CSS result:
#media (min-width: 30) and (max-width: 39) {
[data-deckgrid="card"]::before {
content: "1 .column.card-column-1";
}
}
#media (min-width: 40) and (max-width: 54) {
[data-deckgrid="card"]::before {
content: "2 .column.card-column-2";
}
}
#media (min-width: 55) and (max-width: 499) {
[data-deckgrid="card"]::before {
content: "3 .column.card-column-3";
}
}
I.e. you don't need to emulate arrays via "indexing variable names" since you can use arrays directly (Less array is just a comma or space separated value list, e.g. #padding: 1 2 3 4;).