![Page 1: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/1.jpg)
![Page 2: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/2.jpg)
What are LESS and SASS?
• CSS Pre-‐processor
• Converts code wri3en in a preprocessed language to CSS
CSS LESS
![Page 3: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/3.jpg)
Why use a CSS Pre-‐Processor?
• DRY principle (don’t repeat yourself!) • Variables • Mixins • FuncBons
• Maintainability • Readability • Natural Extension
![Page 4: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/4.jpg)
LESS or SASS?
LESS • Easier to transiBon from CSS • Resembles CSS (Natural Extension) • Syntax is not as jarring as SASS • Newer than SASS, inspired from it
SASS • Syntax is quite different from CSS • Symbols used are similar to bash • More funcBonality/capabiliBes than LESS
• Complex tasks (loops, condiBonals) are more pragmaBc than LESS
![Page 5: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/5.jpg)
LESS feature set
NESTING
CSS LESS
div{ // some styling
} div p {
// some styling }
div{ // some styling p{
// some styling }
}
![Page 6: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/6.jpg)
LESS feature set
NESTED ATTRIBUTES AND MULTIPLE CLASSES
CSS LESS
div { width: 10px } div p { color: blue } div p.para-‐class { color: blue } div p.para-‐class:hover { background-‐color: red }
div { width: 10px; p { color: blue; &.para-‐class { color: blue; &:hover { background-‐color: red; }}}}
![Page 7: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/7.jpg)
LESS feature set
VARIABLES
CSS LESS
div{ background-‐color: rgba(0,0,0,0.5);
} div p {
color: rgba(0,0,0,0.5); }
@half-‐transparent: rgba(0,0,0,0.5); div{
background-‐color: @half-‐transparent; p{
color: @half-‐transparent; }
}
![Page 8: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/8.jpg)
LESS feature set
MIXINS, PARAMETERS, DEFAULT VALUES (Imagine using this a lot throughout your code)
CSS LESS
div { -‐webkit-‐border-‐top-‐lea-‐radius: 3px; -‐webkit-‐border-‐top-‐right-‐radius: 3px; -‐moz-‐border-‐radius-‐toplea: 3px; -‐moz-‐border-‐radius-‐topright: 3px; border-‐top-‐lea-‐radius: 3px; border-‐top-‐right-‐radius: 3px }
// MIXIN (Parametric, Default Values) .rounded_top(@radius: 3px) { -‐webkit-‐border-‐top-‐lea-‐radius: @radius; -‐webkit-‐border-‐top-‐right-‐radius: @radius; -‐moz-‐border-‐radius-‐toplea: @radius; -‐moz-‐border-‐radius-‐topright: @radius; border-‐top-‐lea-‐radius: @radius; border-‐top-‐right-‐radius: @radius; } div{ .rounded_top(); }
![Page 9: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/9.jpg)
LESS feature set
Imports
CSS LESS
@import url("style.css") style; @import ‘style’;
![Page 10: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/10.jpg)
Did you know …
• You can change the extension of .CSS files to .LESS and start typing LESS • You can define namespaces similar to C/C++ that can ignore variables? • You can use CSS funcBons by escaping them
CSS LESS
div{ width: calc(100% + 30px);
}
div{ width: ~"calc(100% + 30px)";
}
![Page 11: WhatareLESSandSASS?mashiyat/csc309/Lectures/LESS.pdf · LESSorSASS? LESS • Easier$to$transiBon$from$CSS$ • Resembles$CSS$(Natural$Extension)$ • Syntax$is$notas$jarring$as$SASS$](https://reader035.vdocuments.us/reader035/viewer/2022070707/5ea94f6b37367706d11e40e0/html5/thumbnails/11.jpg)
Now it’s @me for the demo! :)