CSS-preprocessorer \u00e4r skriptspr\u00e5k som ut\u00f6kar standardfunktionerna i CSS. De g\u00f6r det m\u00f6jligt f\u00f6r oss att anv\u00e4nda logik i v\u00e5r CSS-kod, till exempel variabler, nestning, arv, mixins, funktioner och matematiska operationer. CSS-preprocessorer g\u00f6r det enkelt att automatisera repetitiva uppgifter, minska antalet fel och uppbl\u00e5st kod, skapa \u00e5teranv\u00e4ndbara kodsnuttar och s\u00e4kerst\u00e4lla bak\u00e5tkompatibilitet. <\/p>\n
Varje CSS-preprocessor har sin egen syntax som de sammanst\u00e4ller till vanlig CSS s\u00e5 att webbl\u00e4sare kan rendera den p\u00e5 klientsidan. F\u00f6r n\u00e4rvarande \u00e4r de tre mest popul\u00e4ra och stabila CSS-preprocessorerna LESS, Sass och Stylus, men det finns ocks\u00e5 m\u00e5nga mindre. CSS-preprocessorer g\u00f6r alla liknande saker men p\u00e5 ett annat s\u00e4tt och med sina egna syntaxer. Var och en av dem har n\u00e5gra avancerade funktioner som \u00e4r unika f\u00f6r dem och deras eget ekosystem (verktyg, ramverk, bibliotek) ocks\u00e5. <\/p>\n
Idag handlar det om LESS<\/strong>.<\/p>\n 1. @variabler<\/strong><\/p>\n Variabler g\u00f6r din kod enklare att underh\u00e5lla genom att ge dig ett s\u00e4tt att kontrollera dessa v\u00e4rden fr\u00e5n en enda plats:<\/p>\n 1.1 @N\u00e4stlade v\u00e4ljare<\/strong><\/p>\n Resultat efter kompilering:<\/p>\n 2. @importerar<\/strong><\/p>\n CSS @import g\u00f6r en annan http-beg\u00e4ran f\u00f6r att h\u00e4mta en annan stilmall, medan en Less @import tar tag i inneh\u00e5llet fr\u00e5n din importerade fil och inkluderar det i den sammanst\u00e4llda stilmallen. Detta inneb\u00e4r endast en http-beg\u00e4ran, s\u00e5 att du kan skapa partialer och organisera din css bara lite b\u00e4ttre utan n\u00e5gra nackdelar! <\/p>\n En normal import h\u00e4mtar inneh\u00e5llet i den filen och dumpar det i den fil som ber om det. Super anv\u00e4ndbart. Att sammanfoga filer \u00e4r en mycket viktig funktion i preprocessorer. <\/p>\n En (referens)import g\u00f6r inte det. Faktum \u00e4r att den inte l\u00e4gger in n\u00e5got alls i den fil som ber om det. Koden i den filen \u00e4r just nu redo att anv\u00e4ndas, antingen genom att anropa en mixin i den eller genom att ut\u00f6ka en v\u00e4ljare i den. <\/p>\n 3. @mixins<\/strong><\/p>\n Mixins kopierar alla egenskaper till en selektor, vilket kan leda till on\u00f6dig duplicering. D\u00e4rf\u00f6r kan du anv\u00e4nda extends ist\u00e4llet f\u00f6r mixins f\u00f6r att flytta v\u00e4ljaren upp till de egenskaper du vill anv\u00e4nda, vilket leder till att mindre CSS genereras. <\/p>\n Resultat efter kompilering:<\/p>\n 4. @f\u00f6rl\u00e4ng<\/strong><\/p>\n Extend \u00e4r en Less-pseudoklass som sammanfogar den v\u00e4ljare den \u00e4r placerad p\u00e5 med s\u00e5dana som matchar det den refererar till.<\/p>\n Resultat efter kompilering:<\/p>\n 5. @math<\/strong><\/p>\n Matematiska funktioner omfattar metoder som anv\u00e4nds f\u00f6r att utf\u00f6ra numeriska operationer, t.ex. avrundning, kvadratrot, potensv\u00e4rde, modulus, procent etc.<\/p>\n Resultat efter kompilering:<\/p>\n 6. @loops<\/strong><\/p>\n En av de b\u00e4sta sakerna med LESS \u00e4r att du kan g\u00f6ra loopar och bygga klasser dynamiskt.<\/p>\n F\u00f6ljande exempel \u00e4r att dynamiskt skapa klasser i steg om 10. Jag kunde ha skrivit 10 klasser, men det h\u00e4r s\u00e4ttet \u00e4r mycket trevligare och l\u00e4ttare att underh\u00e5lla. <\/p>\n Resultat efter kompilering:<\/p>\n\/\/ Variables\n@link-color: #428bca; \/\/ sea blue\n@link-color-hover: darken(@link-color, 10%);\n\n\/\/ Usage\na,\n.link {\n color: @link-color;\n}\na:hover {\n color: @link-color-hover;\n}\n.widget {\n color: #fff;\n background: @link-color;\n}\n<\/pre>\n.button {\n &-ok {\n background-image: url(\"ok.png\");\n }\n &-cancel {\n background-image: url(\"cancel.png\");\n }\n\n &-custom {\n background-image: url(\"custom.png\");\n }\n}\n<\/pre>\n.button-ok {\n background-image: url(\"ok.png\");\n}\n.button-cancel {\n background-image: url(\"cancel.png\");\n}\n.button-custom {\n background-image: url(\"custom.png\");\n}\n<\/pre>\n\/* Normal import *\/\n@import \"colors-or-whatever.less\";\n<\/pre>\n
@import (reference) \"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/18728\/pure.less\";\n\n.my-button {\n &:extend(.pure-button all);\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n .a();\n}\n.mixin-id {\n #b();\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n color: red;\n}\n.mixin-id {\n color: red;\n}\n<\/pre>\nnav ul {\n &:extend(.inline);\n background: blue;\n}\n.inline {\n color: red;\n}\n<\/pre>\nnav ul {\n background: blue;\n}\n.inline,\nnav ul {\n color: red;\n}\n<\/pre>\n@nav-height: 60px;\n\nbody {\n\tpadding-top: @nav-height + 40px;\n}\n\n.nav {\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\theight: @nav-height;\n\n}\n\n.one-third { \n\twidth: (100% \/ 3); \n}\n<\/pre>\nbody {\n padding-top: 100px;\n}\n.nav {\n position: fixed;\n top: 0;\n width: 100%;\n height: 60px;\n}\n.one-third {\n width: 33.33333333%;\n}\n<\/pre>\n.mixin-loop (@index) when (@index > 0) {\n .per-@{index}0 {\n display: inline-block;\n width: @index * 10%;\n }\n .mixin-loop(@index - 1);\n}\n.mixin-loop(10);\n<\/pre>\n.per-100 {\n display: inline-block;\n width: 100%;\n}\n.per-90 {\n display: inline-block;\n width: 90%;\n}\n.per-80 {\n display: inline-block;\n width: 80%;\n}\n.per-70 {\n display: inline-block;\n width: 70%;\n}\n.per-60 {\n display: inline-block;\n width: 60%;\n}\n.per-50 {\n display: inline-block;\n width: 50%;\n}\n.per-40 {\n display: inline-block;\n width: 40%;\n}\n.per-30 {\n display: inline-block;\n width: 30%;\n}\n.per-20 {\n display: inline-block;\n width: 20%;\n}\n.per-10 {\n display: inline-block;\n width: 10%;\n}\n<\/pre>\n