Please enable JavaScript.
Coggle requires JavaScript to display documents.
LESS (mixins (guards (type guards (... when (isNumber(@size)) {...}, ...…
LESS
mixins
-
*.bordered(@size: 50px) {
border-top: dotted size black;
border-bottom: solid size black;
}*#menu a {
color: #111;
.bordered(3px);
}size is a default value here.
-
-
-
-
-
Why CSS is bad?
Color problem
no ability to reuse variables across the project so that little changes of sizes or colors or even fonts become challenging
Duplication problem
some sets of rules repeat across whole project and it would be better to pack them into a single method
Cascade Avalanche
changing one name of the selector, like id in html file, causes tons of changes in css files.
Calculation problem
no ability to perform calculations like adding 8 pixels to the size of the initial font for h1 elements, you have to hardcode everything
and calculate it in your head
Import problem
Adding import into one of your files to minimize number of imports in html page actually omits the browser cache and performs another request to server which slows down your web page
-
Less gives you the ability to use nesting instead of, or in combination with cascading
#header {
color: black;
}
'#'header .navigation {
font-size: 12px;
}
'#'header .logo {
width: 300px;
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
-
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
-
combinator
&
allows you to make structure of LESS more readable, like here:
a { text-decoration: none
&:hover {
text-decoration: underline
}
}
which means the same as
a {text-decoration: none }
a:hover { text-decoration: underline}
namespacing
allows you to refer to a section inside of a namespace to avoid lots of prefixing
#submit-button {
#my_forms > .set-button
}
here .set-button is a mixin nested deeply in my_forms namespace (which can be a ul, div etc)
-
-
-
-