快速入门less和scss,个人笔记总结

简介: 快速入门less和scss,个人笔记总结

less 既可以在客户端运行也可以借助node.js在服务端运行‘


less中的注释

以//开头的注释不会被编译到css文件中


以/**/包裹的注释会被编译到css文件中


less中的变量

使用@来申明一个变量:@pink:pink;


1.作为普通属性只来使用:直接使用@pink


2.作为选择器和属性名:#@{selector的值}的形式


3.作为URL:@{url}


4.变量的延迟加载(变量是块级作用域)


less中的嵌套规则

1.基本嵌套规则


2.&(平级)的使用


less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式


1.普通混合(编译到css中的)


2.不带输出的混合(加双括号)


3.带参数的混合


4.带参数并且有默认值的混合


5.带多个参数的混合


6.命名参数


7.匹配模式


8.arguments变量


less运算

在less中可以进行加减乘除的运算(计算的一方带单位就可以)


less避免编译


less继承

性能比混合高


灵活度比混合高


最后less和scss都大同小异,这些应用跟scss是一样的,我使用这些工具嵌套使用比较多



相关文章
|
8月前
|
资源调度 前端开发 JavaScript
《CSS 简易速速上手小册》第9章:CSS 最佳实践(2024 最新版)
《CSS 简易速速上手小册》第9章:CSS 最佳实践(2024 最新版)
123 1
《CSS 简易速速上手小册》第9章:CSS 最佳实践(2024 最新版)
|
7月前
|
前端开发
CSS快速入门
CSS快速入门
35 0
|
8月前
|
前端开发 搜索推荐 容器
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
66 0
|
8月前
|
前端开发 容器
《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)
《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)
62 0
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
131 0
|
JavaScript
js基础笔记学习104-类得简介1
js基础笔记学习104-类得简介1
74 0
js基础笔记学习104-类得简介1
|
JavaScript
js基础笔记学习104-类得简介2
js基础笔记学习104-类得简介2
56 0
js基础笔记学习104-类得简介2
|
前端开发 安全 JavaScript
|
人工智能 前端开发 容器
CSS入门到进阶知识总结(二)
CSS入门到进阶知识总结(二)
CSS入门到进阶知识总结(二)

相关实验场景

更多