Less css
-
Upload
learningtech -
Category
Technology
-
view
331 -
download
0
Transcript of Less css
![Page 1: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/1.jpg)
LESS CSSBryan Lin 2013/12/27
![Page 2: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/2.jpg)
Agenda• Variables
• Mixins
• Nested rules
![Page 3: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/3.jpg)
Variables• Declare a variable
• @Nice-blue: #5B83AD;
• @Fnord: "I am fnord.“
• Example
• Ouputs: #header { color: #6c94be; }
![Page 4: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/4.jpg)
Variables• When defining a variable twice, the last definition of the variable is used,
searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.
![Page 5: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/5.jpg)
Variables• Lazy loaded
![Page 6: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/6.jpg)
Mixins• In LESS, it is possible to include a bunch of properties from one ruleset into
another ruleset
![Page 7: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/7.jpg)
Mixins• Result
![Page 8: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/8.jpg)
Nested rules• We have the following CSS
![Page 9: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/9.jpg)
Nested rules• In LESS, we can also write it this way
![Page 10: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/10.jpg)
Nested rules• Notice the & combinatory
• It’s used when you want a nested selector to be concatenated to its parent selector
![Page 11: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/11.jpg)
FAQ
![Page 12: Less css](https://reader035.fdocuments.in/reader035/viewer/2022070315/5555d2f3d8b42a711f8b4b17/html5/thumbnails/12.jpg)
Reference• http://lesscss.org/