【less和sass的区别,你了解多少?】
在介绍less和sass的区别之前,我们先来了解一下他们的定义:
一、Less、Sass/Scss是什么?
1、Less:
是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。
2、Sass:
是一种动态样式语言,Sass语法属于缩排语法,
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。
Sass与Scss是什么关系?
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
二、less和sass的相同之处
Less和Sass在语法上有些共性,比如下面这些:
1、混入(Mixins)——class中的class;
2、参数混入——可以传递参数的class,就像函数一样;
3、嵌套规则——Class中嵌套class,从而减少重复的代码;
4、运算——CSS中用上数学;
5、颜色功能——可以编辑颜色;
6、名字空间(namespace)——分组样式,从而可以被调用;
7、作用域——局部修改样式;
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
三、less和sass的区别
Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript,是在客户端处理的。
Sass是基于Ruby的,是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。
1、Less:
【两种注释方式】
①//less中的注释,但这种不会被编译
②
/*
* 这也是less中的注释,但是会被编译
*/
【less中的变量】
1、声明变量:@变量名:变量值;
使用变量: @变量名
>>>less中变量的类型:
①数字类 1 10px
②字符串:无引号字符串 red ;有引号字符串 "haha"
③颜色类:red #000000 rgb()
④值列表类型:用逗号和空格分隔 10px solid red
eg:
@length: 100px;
@color:red;
@opa:0.5;
@border:10px solid red;
.borderRadius(@brWidth:10px){
border-radius: @brWidth;
}
.setMargin(lefts,@width){
margin-left:@width;
}
>>>变量使用原则:
多次频繁出现的值、需要修改的值,设为变量
2、混合(MiXins)
①无参混合
声明:.name{} 选择器中调用:.name;
②代参混合
无默认值声明:.name(@param){} 调用:.name(parValue);
有默认值声明:.name(@param:value){}
调用:.name(parValue); parValue可省
>>>如果声明时,参数没有默认值,则调用时必须赋值,否则报错!
>>>无参混合,会在css中编译除同名的class选择器,有参的不会
3、less的匹配模式:使用混合进行匹配,类似于if结构
声明:
.name(条件一,参数){}
.name(条件二,参数){}
.name(@_,参数){}
调用:.name(条件值,参数值);
匹配规则:根据调用时提供的条件值去寻找与之匹配的"MiXins"执行,其中@_表示永远需要执行的部分
4、less中的运算
+ - * / 可带、可不带单位
颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉
5、包含了传进来的所有参数:border:@arguments;
6、less中的嵌套:保留HTML中的代码结构
①嵌套默认是后代选择器,如果需要子代选择器,则在子代前加>
②.&表示上一层 &:表示上一层的hover事件
eg:
section{
p{
color: red;
background-color: yellowgreen;
text-align: center;
}
ul{
padding: 0px;
list-style: none;
li{
float: left;
margin: 10px;
width: 100px;
text-align: center;
border: @border;
&:hover{
background-color: yellow;
}
}
2、Sass:
1、Sass中的变量
使用 $变量名:变量值,声明变量;
如果变量需要在字符串中嵌套,则需使用#加大括号包裹;
border-#{$left}:10px solid blue;
2、Sass中的运算,会将单位也进行运算,使用时需注意最终单位
例:10px*10px=100px*px
3、sass中的嵌套:选择器嵌套,属性嵌套,伪类嵌套
选择器嵌套 ul{ li{} } 后代
ul{ >li{} } 子代
&:表示上一层 div{ ul{ li{ &=="div ul li" } } }
属性嵌套:属性名与大括号之间必须有:
例如:border:{color:red;}
伪类嵌套:ul{li{ &:hover{ "ul li:hover" } } }
4、混合宏、继承、占位符
①混合宏:声明:@mixin name($param:value){}
调用:@include name(value);
>>>声明时,可以有参,可以无参;可带默认值,也可不带;但是,调用时,必须符合声明规范。同less
>>>优点;可以传参,不会生成同名class;
>>>缺点:会将混合宏中的代码,copy到对应的选择器中,产生冗余代码!
②继承:声明:.class{} 调用:@extend .class;
>>>优点:继承的相同代码,会提取到并集选择器中,减少冗余代码
>>>缺点:无法进行传参,会在css中,生成一个同名class
③占位符:声明:&class{} 调用:@extend %class;
>>>优点:继承相同代码,会提前到并集选择器;不会生成同名的class选择器
>>>缺点:无法进行传参
综上所述:当需要传递参数时,用混合宏;当有现成的class时用继承;当不需要参数,也不需要class时,用占位符
5、if条件结构:
@if 条件{}
@else{}
6、for循环结构:
@for $i from 1 to 10{} 不包含10;
@for $i from 1 through 10{} 包含10;
7、while循环结构:
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}
8、each循环遍历
@each item in a,b,c,d{
//item表示每一项
}
9、函数:
@function func($length){
$length1:$length*5;
@return $length1;
}
调用:func(10px);
10、使用...将传进来的所有参数,接收到一个变量中
@mixin bordeRadius($param1...){
//使用...将传进来的所有参数,接收到一个变量中
border-radius:$param1;
-webkit-border-radius:$param1;
}
好啦~~~less和sass的区别今天就先介绍到这里~~~
【less和sass的区别,你了解多少?】的更多相关文章
- less与sass的区别
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...
- less和sass的区别
首先sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和 ...
- IasS,CasS,PasS,SasS的区别
IasS: (Infrastructure-as-a-Service(基础设施即服务)) 租用的是硬件,服务器,物理机等 CasS: (container as a Service) 容器服务 租用的 ...
- 关于sass的介绍和基本语法
引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器 ...
- sass 基础——回顾
1.webstorm 自动编译SASS 下载安装包 http://rubyinstaller.org/downloads/ 然后点击安装,路径为默认路径就行, 勾选以下两项 add Ruby exec ...
- Less、Sass/Scss
一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...
- Bootstrap定制(一)less入门及编译
第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...
- css的扩展技术
CSS的扩展技术 (在原来的CSS语言的基础上扩展了js,可以在里面写js ) 一.less 定义: @color:red; //定义颜色 @body-color:blue; @div-color:y ...
- CSS预处理语言
CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...
随机推荐
- [SinGuLaRiTy] 树形存储结构阶段性测试
[SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...
- Python之路-Linux命令基础(6)
作业一:完成作业未做完的集群架构 作业二:临时配置网络(ip,网关,dns)+永久配置 1.ip配置 [root@localhost mail]# ifconfig eno16777736 192.1 ...
- 使用composer下拉组件失败,出现killed解决办法
做项目时下载composer组件,出现killed提示,如图 一般是因为内存太小,将虚拟机内存设置大一点即可,在虚拟机关机的时候设置 下载成功
- JS中的bind的实现以及使用
在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write; altwrite("hello"); //1.以上代码有什么问题 // ...
- 性能测试培训:tomcat性能调优方法
性能测试培训:tomcat性能调优方法 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的loadrunner ...
- 老李分享:Web Services 特性 1
老李分享:Web Services 特性 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
- This Handler class should be static or leaks might occur Android
首先解释下这句话This Handler class should be static or leaks might occur,大致意思就是说:Handler类应该定义成静态类,否则可能导致内存泄露 ...
- Spring基础学习(一)—初识Spring
一.Spring的使用 1.导入jar包 2.编写实体类 Person.java public class Person{ private String name; public void say() ...
- AOP学习笔记二
Spring AOP采用Java作为AOP的实现语言(AOL),学习曲线平滑,Spring AOP对AspectJ也提供了很好的集成与支持.最为第二代的AOP,采用动态代理机制和字节码生产技术实现,在 ...
- python_Tornado_web_框架_分页
如何实现web_框架_分页? -- 思考什么是xss跨站攻击? --别人把js代码提交到后台,然后从后台返回数据的时候,别人上传的js变成html中的代码, 就会插入别人的代码,带来极大的信息泄露的风 ...