2020-09-10 18:40发布
在介绍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用$。
【两种注释方式】①//less中的注释,但这种不会被编译
②
/* * 这也是less中的注释,但是会被编译 */
【less中的变量】1、声明变量:@变量名:变量值;使用变量: @变量名
>>>less中变量的类型:①数字类 1 10px②字符串:无引号字符串 red ;有引号字符串 "haha"③颜色类:red #000000 rgb()④值列表类型:用逗号和空格分隔 10px solid redeg:
1 @length: 100px; 2 @color:red; 3 @opa:0.5; 4 @border:10px solid red; 5 .borderRadius(@brWidth:10px){ 6 border-radius: @brWidth; 7 } 8 .setMargin(lefts,@width){ 9 margin-left:@width;10 }
>>>变量使用原则:多次频繁出现的值、需要修改的值,设为变量
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:
1 section{ 2 p{ 3 color: red; 4 background-color: yellowgreen; 5 text-align: center; 6 } 7 ul{ 8 padding: 0px; 9 list-style: none;10 li{11 float: left;12 margin: 10px;13 width: 100px;14 text-align: center;15 border: @border;16 &:hover{17 background-color: yellow;18 }19 }
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;}
混入
混入可以将一个定义好的 class A 引入到另一个 class B 中,从而实现 class B 继承 class A 中的所有属性。
我们还可以带参数地调用,就像使用函数一样。
定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性。示例
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu {
.bordered;
color: #111;
编译后 CSS 代码:
继承
样式的继承通过 extend 伪类来实现。混合可以将一个定义好的 class A 引入到另一个 class B 中,从而实现
class B 继承 class A 中的所有属性。这样编译原理是把代码 copy 一份过来,编译后的 CSS 中依然会存留
大量的冗余 CSS 代码,为了避免这一点,我们可以使用 extend 伪类来实现样式的继承使用。
public {
width: 100px;
height: 100px;
nav ul {
&:extend(.public);
list-style: none;
等同于:
nav ul:extend(.public){
list-style:none;
编译为 CSS 的结果
.public, nav ul {
总之,混入写法,相当于class B复制粘贴class A的代码,会产生代码冗余;而继承则是class B,class A群组选择器的形式展示,不会产生代码冗余。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说,CSS具有以下特点:丰富的样式定义CSS提供了丰富的文档样式外观,以及设置文本和背景属性...
递归做为一种算法在程序设计语言中广泛应用.是指函数/过程/子程序在运行过程中直接或间接调用自身而产生的重入现象
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。盒子模型分为两种:第一种是W3c标准的盒子模型(标准盒模型)第二种IE标准的盒子模型(怪...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...
内联样式,如: style= ,权值为1000。ID选择器,如:#content,权值为0100。类,伪类和属性选择器,如.content,权值为0010。类型选择器和伪元素选择器,如div p,权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。...
css过渡与动画主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。css过渡与动画区别总结:1、动画不需要事件触发,过渡需要。2、...
一段文字在标签的宽度内是不会自动换行的,可以给标签设置小一点的宽度,碰到标签的右边缘就会自动换行了
定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent transparent在 不同 css版
怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。.box{width:300px;height:200px;margin:0auto;boxder:1pxsolid#ccc;background:#000;filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3;-khtml-o...
解决方案You can check if the image's color model includes an alpha channel:BufferedImage img = ImageIO.read(/* from somewhere */);if (img.getColorModel().hasAlpha()) {undefined// img has alpha channel...
找到 eclipse 的安装目录 进入到 plugins 文件夹下,这个文件是管理 eclipse样式相关的文件夹然后我们进入它的子目录 org.eclipse.ui.themes_1.2.1.v20170809-1435 文件夹,去里面找 与 eclipse 相关的样式设置,继续寻找来到 这个界面。 考到css 文件夹,与...
css问题filter: alpha(opacity=100,finishopacity=0,style=2)alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY).opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacit...
设置背景颜色:要设置背景颜色,直接使用background:颜色值;即可。如:body{background:#000}将body的背景颜色设置为黑色。 设置背景图片:1.规律背景图片。不如我们要设置一个渐变的背景图片,这种背景只需要切出1像素宽,高度合适的图片作为背景即可。body...
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。 可以使用一张透明的图片做背景可以达成效果...
用css 隐藏掉overflow在用div 模拟重画滚动条,用div和z-index配合模拟滚动条
最多设置5个标签!
在介绍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:
>>>变量使用原则:
多次频繁出现的值、需要修改的值,设为变量
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:
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;
}
混入
混入可以将一个定义好的 class A 引入到另一个 class B 中,从而实现 class B 继承 class A 中的所有属性。
我们还可以带参数地调用,就像使用函数一样。
定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性。示例
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu {
.bordered;
color: #111;
}
编译后 CSS 代码:
#menu {
border-top: dotted 1px black;
border-bottom: solid 2px black;
color: #111;
}
继承
样式的继承通过 extend 伪类来实现。混合可以将一个定义好的 class A 引入到另一个 class B 中,从而实现
class B 继承 class A 中的所有属性。这样编译原理是把代码 copy 一份过来,编译后的 CSS 中依然会存留
大量的冗余 CSS 代码,为了避免这一点,我们可以使用 extend 伪类来实现样式的继承使用。
public {
width: 100px;
height: 100px;
}
nav ul {
&:extend(.public);
list-style: none;
}
等同于:
nav ul:extend(.public){
list-style:none;
}
编译为 CSS 的结果
.public, nav ul {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
}
总之,混入写法,相当于class B复制粘贴class A的代码,会产生代码冗余;而继承则是class B,class A群组选择器的形式展示,不会产生代码冗余。
相关问题推荐
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说,CSS具有以下特点:丰富的样式定义CSS提供了丰富的文档样式外观,以及设置文本和背景属性...
递归做为一种算法在程序设计语言中广泛应用.是指函数/过程/子程序在运行过程中直接或间接调用自身而产生的重入现象
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。盒子模型分为两种:第一种是W3c标准的盒子模型(标准盒模型)第二种IE标准的盒子模型(怪...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...
内联样式,如: style= ,权值为1000。ID选择器,如:#content,权值为0100。类,伪类和属性选择器,如.content,权值为0010。类型选择器和伪元素选择器,如div p,权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。...
css过渡与动画主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。css过渡与动画区别总结:1、动画不需要事件触发,过渡需要。2、...
一段文字在标签的宽度内是不会自动换行的,可以给标签设置小一点的宽度,碰到标签的右边缘就会自动换行了
定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent transparent在 不同 css版
怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。.box{width:300px;height:200px;margin:0auto;boxder:1pxsolid#ccc;background:#000;filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3;-khtml-o...
解决方案You can check if the image's color model includes an alpha channel:BufferedImage img = ImageIO.read(/* from somewhere */);if (img.getColorModel().hasAlpha()) {undefined// img has alpha channel...
找到 eclipse 的安装目录 进入到 plugins 文件夹下,这个文件是管理 eclipse样式相关的文件夹然后我们进入它的子目录 org.eclipse.ui.themes_1.2.1.v20170809-1435 文件夹,去里面找 与 eclipse 相关的样式设置,继续寻找来到 这个界面。 考到css 文件夹,与...
css问题filter: alpha(opacity=100,finishopacity=0,style=2)alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY).opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacit...
设置背景颜色:要设置背景颜色,直接使用background:颜色值;即可。如:body{background:#000}将body的背景颜色设置为黑色。 设置背景图片:1.规律背景图片。不如我们要设置一个渐变的背景图片,这种背景只需要切出1像素宽,高度合适的图片作为背景即可。body...
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。 可以使用一张透明的图片做背景可以达成效果...
用css 隐藏掉overflow在用div 模拟重画滚动条,用div和z-index配合模拟滚动条