CSS/LESS/SASS Cookbook

How to center ul?

Make ul display: inline-block in a text-align: center div http://codepen.io/hamxiaoz/pen/egLOwV

How to reposition the class under specified parent in SASS/LESS?

For example you have:

.parent1 {
.parent2 {
.container {
margin: 5px 0;
}
}
}

And you want to adjust the margin under the root class .native:

.native {
.parent1 {
.parent2 {
.container {
margin: 10px 0;
}
}
}
}

You can use & LESS: Parent Selectors:

.parent1 {
.parent2 {
.container {
margin: 5px 0;
.native & { // -> it turns to: .native .parent1 .parent2 .container {}
margin: 10px 0;
}
}
}
}

Usages of &: (also on my Medium post)

  • When & is placed before a selector, it refers to the immediate parent.

// -> .some-class.another-class
.some-class {
&.another-class {}
}
// -> .button:hover {}
.button {
&:hover {}
}
.a {
.b {
// -> .a .b.b1 (not .a.b1 .b)
&.b1 {
color: red;
}
}
}
  • When & is placed after a selector, that selector becomes the root selector and & represents the whole path and the whole path is repositioned under the root selector.

// -> body.page-about .button {}
.button {
body.page-about & { }
}
.a {
.b {
// -> .root .a .b
.root & {
color: black;
}
// -> .a1.a .b
.a1& {
color: red;
}
// -> .a .b.b1
&.b1 {
color: yellow;
}
}
}

How to add search icon to input?

http://codepen.io/hamxiaoz/pen/MJdXyo

  • Could not use ::before because input doesn't have content

  • Position icon in input, and make it vertically center with top and translateY

  • Padding left on input for space of the icon

Form control margin

http://stackoverflow.com/questions/18562153/what-css-controls-the-right-and-left-margins-between-these-form-elements-in-twit

Bootstrap: row click and offmenu canvas

http://jasny.github.io/bootstrap/javascript/#fileinput