I have a JSFiddle, https://jsfiddle.net/khpeek/3gh0r931/43/, in which I'd like to toggle the visibility of up/down Materialize arrow icons based on the class of the parent element (which is set to asc or desc by a jQuery plugin, list.js).
I've noticed that the following nesting pattern doesn't work:
.sort.asc > i.material-icons {
&.upper::after {
content: "arrow_drop_up";
}
&.lower::after {
content: "";
}
}
.sort.desc > i.material-icons {
&.upper::after {
content: "";
}
&.lower::after {
content: "arrow_drop_down";
}
}
However, if I 'write out' the nesting like so,
.sort.asc > i.material-icons.upper::after {
content: "arrow_drop_up";
}
.sort.asc > i.material-icons.lower::after {
content: "";
}
.sort.desc > i.material-icons.upper::after {
content: "";
}
.sort.desc > i.material-icons.lower::after {
content: "arrow_drop_down";
}
Then I get the intended behavior. (This code is commented-out in the JSFiddle). (I still want to position the icons on top of each other to make a 'diamond' similar to https://www.datatables.net/, but that's a separate issue).
What is wrong with the 'nested' form of this SCSS expression?
Your nesting is fine, you just have a syntax error after the font-size line:
i.material-icons {
position: relative;
font-size: $th-font-size * 2;
{
&.upper: margin-top: -$th-font-size/2;
&.lower: margin-bottom: -$th-font-size/2;
}
}
You probably meant this:
i.material-icons {
position: relative;
font-size: $th-font-size * 2;
&.upper { margin-top: -$th-font-size/2; }
&.lower { margin-bottom: -$th-font-size/2; }
}
Related
I want to generate 9 typography classes, each with the following:
font-size: 2rem;
line-height: 1rem;
I'll be using standard typographic multipliers for font sizes and line-height. Instead of hard-coding all of these CSS classes, I was wondering if there was a more elegant way of generating them in a loop using LESS.
I found the following from another thread:
#iterations: 5;
.span-loop (#i) when (#i > 0) {
.span-#{i} {
width: ~"#{i}%";
}
.span-loop(#i - 1);
}
.span-loop (#iterations);
Which generates:
.span-5 {
width: 5%;
}
.span-4 {
width: 4%;
}
.span-3 {
width: 3%;
}
.span-2 {
width: 2%;
}
.span-1 {
width: 1%;
}
This is pretty close, but I'd love for my class names to more "named". How can I use a loop to generate classes for:
.small { }
.caption { }
.body { }
.subheader { }
.title { }
.headline { }
etc...
I'm also not tied to LESS, so if there's a better CSS preprocessor language, then I'm happy to use that instead :)
Thank you!
An example from documentation for further modification;)
for more complicated code, it is better to use scss than less
.for(#list, #code) {
& {
.loop(#i: 1) when (#i =< length(#list)) {
#value: extract(#list, #i);
#code();
.loop(#i + 1);
}
.loop();
}
}
#elements: small, caption, body, subheader, title, headline;
.for(#elements, {
#remfont: #i+1;
#remline: ((#i+1) * 1.5 / 3);
.#{value} {
font-size: ~"#{remfont}rem";
line-height: ~"#{remline}rem";
}
});
I am having trouble prepending the root class to my current selector in sass. I have the following code:
.cta-two-columns {
&__text-holder {
#at-root&#{__inner} {
// also tried #at-root __inner&{#}
// and many others like #at-root__inner
padding: rem(25px);
}
}
}
but this gives me the following:
.cta-two-columns__text-holder__inner {
padding: rem(25px);
}
I don't understand the above - what's the point of at-root as you may as well just do &__inneras it gave me the same as the two things I have shown I tried
how do I get
.cta-two-columns__text-holder .cta-two-columns__inner {
}
without having to resort to
.cta-two-columns {
&__text-holder {
.cta-two-columns__inner {
padding: rem(25px);
}
}
}
Or is this the only way to do it in sass?
#at-root doesn't really work like you may think in this case. #at-root will simply make the declaration outside the nest. To better understand, add another CSS declaration like below:
.cta-two-columns {
&__text-holder {
margin: 10px;
#at-root&#{__inner} {
padding: rem(25px);
}
}
}
This will produce the following CSS code:
.cta-two-columns__text-holder {
margin: 10px;
}
.cta-two-columns__text-holder__inner {
padding: rem(25px);
}
Simply imagine how the selector will be created without #at-root then make it outside.
Without it will produce this:
.cta-two-columns__text-holder {
margin: 10px;
}
.cta-two-columns__text-holder .cta-two-columns__text-holder__inner {
padding: rem(25px);
}
Then we simply omit .cta-two-columns__text-holder.
One idea to obtain what you want is to consider a variable where you can declare the main class then you will be able to nest as many element as you want:
$sel: '.cta-two-columns';
#{$sel}__text-holder {
#{$sel}__inner {
padding: rem(25px);
}
}
Will produce:
.cta-two-columns__text-holder .cta-two-columns__inner {
padding: rem(25px);
}
with more nested elements:
$sel: '.cta-two-columns';
#{$sel}__text-holder {
#{$sel}__outer {
#{$sel}__inner{
#{$sel}__wrap{
padding: rem(25px);
}
}
}
}
Will produce
.cta-two-columns__text-holder .cta-two-columns__outer .cta-two-columns__inner .cta-two-columns__wrap {
padding: rem(25px);
}
Given this markup:
<div class="parent" data-active="typeA">
<div class="child" data-show="typeA">Show only when parent=typeA</div>
<div class="child" data-show="typeB">Show only when parent=typeB</div>
<div class="child" data-show="typeC">Show only when parent=typeC</div>
</div>
I'm trying to write a globally applicable LESS rule that only displays a child when its data-show attribute matches the parent's data-active attribute.
Something like this:
.parent {
.child { display:none; }
&[data-active="?"] .child[data-show="?"] { display:block; }
}
...where ? should not be a fixed value, but a condition that applies no matter the value, as long as they are the same.
Any ideas?
As LESS gets compiled to CSS and there is no generic approach for doing this in CSS, I only come up with a solution that requires you to know every possible type.
.parent {
.child { display: none; }
&[data-active="typeA"] {
.child[data-show="typeA"] { display: block; }
}
&[data-active="typeB"] {
.child[data-show="typeB"] { display: block; }
}
&[data-active="typeC"] {
.child[data-show="typeC"] { display: block; }
}
}
Depending on your preferences and to avoid redundancy you could also define a function for adding the different types.
.parent {
.child { display: none; }
.addType("typeA");
.addType("typeB");
.addType("typeC");
}
.addType(#type) {
&[data-active="#{type}"] {
.child[data-show="#{type}"] { display: block; }
}
}
And if you want to make this even more generic, you could define an array of types and call .addType for each of the types like this:
#types: "typeA", "typeB", "typeC";
.parent {
.child { display: none; }
.-(#i: length(#types)) when (#i > 0) {
#type: extract(#types, #i);
.addType(#type);
.-((#i - 1));
} .-;
}
.addType(#type) { /* see above */ }
I have the following LESS code:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
}
&.is-favourite:after {
color:#red;
content: '\e811';
}
&:hover {
&:after {
color:#red;
content: '\e811';
}
&.is-favourite:after {
color:#grey;
content: '\e836';
}
}
}
With the essential goal being that there is a normal state and a hover state, that are reversed when another class is present. I'll be repeating this for other actions (eg .share-action-link, .review-action-link etc) and this just seems messy the way I have it. Is there a way to create a mixin such that I could provide this like so:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
&:hover {
color:#red;
content: '\e811';
}
.reverseOnClass(is-favourite);
}
}
Or something like that? The only way I can think of so far would be to do:
.favourite-action-link {
&:after {
color:#grey;
content: '\e836';
}
&.active:after {
color:#red;
content: '\e811';
}
}
and then to use jQuery instead to do the hover - toggling .active on (isHovering XOR hasClass(is-favourite)) - but turning LESS into LESS + jQuery is the opposite of fixing a mess/maintainability issue.
I would really recommend writing it like below because it keeps the code simple and easy to read.
.favourite-action-link {
&:after, &.is-favourite:hover:after {
color: #grey;
content: '\e836';
}
&:hover:after, &.is-favourite:after {
color: #red;
content: '\e811';
}
}
But if you really want to use a mixin to avoid repeating the selectors then you could write it like below. This mixin takes two rulesets as input and they are applied to the required selectors.
.favourite-action-link {
.rules-gen(
{
color: #grey;
content: '\e836';
};
{
color: #red;
content: '\e811';
}
);
}
.rules-gen(#rule1; #rule2){
&:after, &.is-favourite:hover:after {
#rule1();
}
&:hover:after, &.is-favourite:after {
#rule2();
}
}
In both these methods, the selectors are also grouped and that also means reduced lines of code.
Demo
Or, if the extra class is not always is-favourite and it could also be something else then you could pass it also to the mixin as a parameter like below:
.favourite-action-link {
.rules-gen(
{
color: grey;
content: '\e836';
};
{
color: red;
content: '\e811';
};
~"is-favourite"
);
}
.share-action-link {
.rules-gen(
{
color: yellow;
content: '\e836';
};
{
color: gold;
content: '\e811';
};
~"active"
);
}
.rules-gen(#rule1; #rule2; #addedClass){
&:after, &.#{addedClass}:hover:after {
#rule1();
}
&:hover:after, &.#{addedClass}:after {
#rule2();
}
}
Demo
The code we used is from the less file that's related to positioning. The website looks great in safari, firefox, and chrome and looks off in IE version 7, 8, and 9. Does bootstrap have a known issue with IE? Probably not since it's so widely used. But I can't really identify what's wrong. Btw, here are two sample pages with the visual bug in Internet Explorer: http://www.presspass.me and a simpler page: http://www.presspass.me/about or you can take a look at the screenshots.
My guess is that it's something small, any help would be appreciated!
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
// Variables
// Can also be 24 / 20 / 20
// Or 16 / 40 /20
#gridColumns: 24;
#gridColumnWidth: 20px;
#gridGutterWidth: 20px;
#extraSpace: (#gridGutterWidth * 2); // For our grid calculations
#siteWidth: (#gridColumns * #gridColumnWidth) + (#gridGutterWidth * (#gridColumns - 1));
// Mixins
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: "";
zoom: 1;
}
&:after {
clear: both;
}
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.fixed-container() {
width: #siteWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
.columns(#columnSpan: 1) {
width: (#gridColumnWidth * #columnSpan) + (#gridGutterWidth * (#columnSpan - 1));
}
.offset(#columnOffset: 1) {
margin-left: (#gridColumnWidth * #columnOffset) + (#gridGutterWidth * (#columnOffset - 1)) + #extraSpace;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
float: left;
margin-left: #gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(#columnSpan: 1) {
.gridColumn();
.columns(#columnSpan);
}
// STRUCTURAL LAYOUT
// -----------------
/*
body {
margin: 0;
}
*/
// Container (centered, fixed-width layouts)
.container {
.fixed-container();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
> .sidebar {
position: absolute;
top: 0;
left: 20px;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific
> .content {
margin-left: 240px;
}
}
// BASE STYLES
// -----------
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
.row {
.clearfix();
margin-left: -#gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to #dhg for the idea
.row > [class*="span"] {
.gridColumn();
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.row {
> .offset1 { .offset(1); }
> .offset2 { .offset(2); }
> .offset3 { .offset(3); }
> .offset4 { .offset(4); }
> .offset5 { .offset(5); }
> .offset6 { .offset(6); }
> .offset7 { .offset(7); }
> .offset8 { .offset(8); }
> .offset9 { .offset(9); }
> .offset10 { .offset(10); }
> .offset11 { .offset(11); }
> .offset12 { .offset(12); }
}
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.row {
> .offset-one-third { margin-left: 340px; }
> .offset-two-thirds { margin-left: 660px; }
My guess is that it's something small, any help would be appreciated!
It is something small.
You're missing a doctype. Add as the very first line:
<!DOCTYPE html>
Without a valid doctype, your page is displayed in quirks mode.
Open the Developer Tools (press F12) to see which mode is actually being used.
Also sometimes you have to override group policies that may force IE into non compatibility mode. We have to do this at my organization because group policies force this mode on the intranet.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I had a similar issue with Bootstrap 2.2.1. It looked great in IE 9 where I was developing it. However, one of the users is on IE 7 (don't ask, ugh) and for the most part the header was not showing up correctly. The solution was to change all of the HTML 5 tags (header, footer, article and section) to divs. That did the trick for me.
I had tried just doing the above suggestions with DOCTYPE and such but nothing totally worked for me until that.