简介
Scss和Less都属于CSS预处理器,CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,如:变量、语句、函数、继承等概念。将css作为目标生成文件,然后开发者就只要使用这种语言进行CSS编码工作。
Less&Scss
注释
两者注释都是单行注释编译后不显示,多行注释显示。
变量定义
less采用@
@number : 123px;
.box {
width: @number;
height: @number;
}
scss采用$
$number : 123px;
.box2 {
width: $number;
height: $number;
}
插值
less:
@number : 123px;
@i : 2;
@wd : width;
.box@{i} {
@{wd} : @number;
height: @number;
}
scss:
$number : 123px;
$i : 2;
$wd : width;
.box#{$i} {
#{$wd}: $number;
height: $number;
}
作用域
less:
@number : 123px;
.box2 {
height: @number;
@number : 200px;
}
.box2内有number变量就用自己的,可以写在任意顺序。
scss:
$number : 123px;
.box2 {
$number : 200px;
height: $number;
}
scss在内部定义一个变量时,在定义该变量之前不能使用该变量。
选择器嵌套、伪类嵌套、属性嵌套(Scss)
-
选择器嵌套
scss和less都可以实现选择器嵌套,并且用法相同
.box2 { width: 100px; .box3 { height: 100px; li { list-style: none; } } }
-
伪类嵌套
拿:hover举例
.box2 { width: 100px; &:hover { width: 200px; } }
在:hover前加一个&用来连接
-
属性嵌套
属性嵌套只有scss拥有,less没有
.box { margin: { top: 10px; bottom: 20px; left: 10px; right: 20px; }; }
运算
less中的运算
@sum : 10px;
.box {
width: @sum + 10px;
height: 10em + @sum;
border: @sum - 2px;
margin-top: 10px * 2;
padding: 20px / 10px;
margin: ~"20px / 10px";
}
在less中加法运算的时候如果两个单位不同则取第一个数的单位
scss中的运算
$sum : 10px;
.box {
width: $sum + 10px;
border: $sum - 2px;
margin-top: 10px * 2;
padding: 20px / 10px;
margin: (20px / 10px);
}
scss中两个数进行运算必须单位相同
函数
scss和less拥有内置函数,同时scss可自定义函数
两者的内置函数具体查官方文档:
less:http://lesscss.cn/functions/
scss:https://sass-lang.com/documentation/modules
scss自定义函数
@function sum($a,$b) {
@return $a + $b;
}
.box {
width: sum(100px,200px);
}
混入
less:
.hide {
display: none;
}
.box4{
width: 100px;
.hide;
}
也可以传参
.hide(@color) {
display: none;
color: @color;
}
.box4{
width: 100px;
.hide(blue);
}
scss:
@mixin show {
display: block;
}
.box {
width: 100px;
@include show;
}
也可以进行传参
@mixin show {
display: block;
}
@mixin color($color) {
color: $color;
}
.box {
width: 100px;
@include show;
@include color(red);
}
命名空间
less:
#mm() {
.hide{
display: none;
}
.color{
color: red;
}
}
.box {
#mm.hide;
#mm.color;
}
结果:
.box {
display: none;
color: red;
}
继承
less:
.show {
display: block;
color: red;
}
.box {
&:extend(.show);
}
.box2 {
&:extend(.show);
}
结果:
.show,
.box,
.box2 {
display: block;
color: red;
}
scss:
%show {
display: block;
color: red;
}
.box6 {
@extend %show;
}
.box7 {
@extend %show;
}
结果:
.box7, .box6 {
display: block;
color: red;
}
合并
less:
+
是用,
相互隔开,+_
是用空格隔开
.box9 {
background+: url(a.png);
background+: url(b.png);
transform+_: scale(2);
transform+_: rotate(30deg);
}
scss:
$background : (
a : url(a.png),
b : url(b.png)
);
$transform : (
a : scale(2),
b : rotate(30deg)
);
.box9 {
background: map-values($background);
transform: zip(map-values($transform)...);
}
结果:
.box9 {
background: url(a.png), url(b.png);
transform: scale(2) rotate(30deg);
}
媒体查询
less和scss媒体查询基本相同:
.box10 {
width: 100px;
@media screen and (min-width:200px) {
width: 50px;
}
}
结果:
.box10 {
width: 100px;
}
@media screen and (min-width: 200px) {
.box10 {
width: 50px;
}
}
条件语句
less:
@count : 3;
.get(@cn) when (@cn > 4) {
width: 100px + @cn;
}
.get(@cn) when (@cn < 4) {
width: 10px + @cn;
}
.box11{
.get(@count);
}
when就相当于if,对括号里面的内容进行判断
结果:
.box11 {
width: 13px;
}
scss:
scss的条件语句相比less简单一些,直接在if,else前加一个@,也可以写else if
$count : 5;
.box11 {
@if ($count > 4) {
width: 100px + $count;
}
@else{
width: 10px + $count;
}
}
结果:
.box11 {
width: 105px;
}
循环语句
less的循环采用的是递归的思想,通过调用自己来完成循环
@number1 : 0;
.get2(@cn) when (@cn < 3) {
.box-@{cn}{
width: 100px + @cn;
}
.get2(@cn + 1);
}
.get2(@number1);
生成的css:
.box-0 {
width: 100px;
}
.box-1 {
width: 101px;
}
.box-2 {
width: 102px;
}
总共有三个样式,相当于@cn从0开始,到2结束调用
scss的循环支持for循环,while循环等,用法也很简单
@for $i from 0 through 2 {
.box#{$i}{
width: 100px + $i;
}
}
结果:
.box0 {
width: 100px;
}
.box1 {
width: 101px;
}
.box2 {
width: 102px;
}
引入
less和scss都可以通过@import “”;来实现文件的引入,从而实现模块化。
新建一个reset.less文件,其内容如下
* {
margin: 0;
padding: 0;
}
在style.less文件中引入
@import "reset.less";
最后在style.css文件中
* {
margin: 0;
padding: 0;
}