sass和less是什么?

1.背景介绍。
sass和less是什么?

1.1.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

1.2.LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。

2.知识剖析
ps详细操作见ppt,这是一个大纲。

sass有哪些基本用法?

2.1.变量——SASS允许使用变量,所有变量以$开头。

2.2.计算功能——SASS允许在代码中使用算式

2.3. 嵌套———SASS允许选择器嵌套。

2.4 颜色函数

3.代码的重用

3.1.继承————SASS允许一个选择器,继承另一个选择器。

3.2。Mixin——Mixin有点像C语言的宏(macro),是可以重用的代码块。

3.34 插入文件

4.高级用法

1.1 条件语句

1.2 循环语句

1.3 自定义函数

3.常见问题。
sass和less有哪些相同点?

4.解决方案:
混合(Mixins):class中的class;

参数混合(Parametric):可以像函数一样传递参数的class

嵌套规则(Nested Rules):class中嵌套class,从而减少重复的代码;

运算(Operations):css中的数学计算;

颜色功能(Color function):可以编辑你的颜色;

命名空间(Namespaces):样式分组,从而方便被调用;

作用域(Scope):局部修改样式;

JavaScript表达式(Javascript evaluation):在CSS样式中使用Javascript表达式赋值。

5.编码实战,见ppt

6.扩展思考。
sass和less有哪些区别?
1、Mixins,此处我译成了混合,也有很多同行朋友将其译成混入,不管是混合也好,还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中,从而简单实现class B继承了class A的所有属性。

2、Parametric,带参数混合,像函数一样在class A中定义一个参数的默认值、或者参数属性集合,还可以是@arguments蛮量,然后将定义好的class A引入class B中

3、Nested Rules译成嵌套规则,指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量,并且增加了代码的可读性

4、Operations运算,在CSS中使用加、减、乘、除进行数学运算,主要运用于属性值和颜色的运算,可以轻松实现属性值之间的复杂关系。

5、Color function颜色功能,颜色的函数运算,颜色会先被转化成HSL色彩空间,然后在通道级别操作。

6、Namespaces命名空间,将一些变量或者混合模块打包封装,更好的组织CSS和属性集的重复使用;

7、Scope作用域,先从本地查找变量或者混合模块,如果没有找到的话就会去父级作用域中查找,直到找到为止,这一点和其他程序语言的作域非常的相似;

8、Javascript evaluation,javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。

7.参考文献:

8.结语
之前对sass和less没有太多了解的小伙伴们,通过这一次小课堂分享后肯定无法做到让你直接上手会用,但希望能让你对sass和less的使用方法建立起一个初步的印象,并对其产生兴趣。此后多多使用,就会了解的更加深入,用起来也是得心应手。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值