SASS和LESS的区别
同
两者都是CSS预处理器,具有(如变量、嵌套、运算,函数等)等功能
异
1、编译环境不一样
Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中,也有 Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。
2、变量符不一样
Less是@,而Scss是$
3、输出设置
less没有输出设置,Sass有四种输出设置,分别是:nested,:expanded,:compacted,:expressed
4、Sass支持条件语句
变量
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| @color: #999; @bgColor: skyblue; @width: 50%; #wrap { color: @color; background: @bgColor; width: @width; }
#wrap { color: #999; background: skyblue; width: 50%; }
|
变量差值
比如选择器名称,属性名,URLs以及@import语句中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| @mySelector: banner;
.@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto; } 编译为:
.banner { font-weight: bold; line-height: 40px; margin: 0 auto; }
|
1 2 3 4 5 6 7 8 9
| URLs
@images: "../img";
body { color: #444; background: url("@{images}/white-sand.png"); }
|
变量名
1 2 3 4 5 6
| @fnord: "I am fnord."; @var: "fnord"; content: @@var; 将会编译为:
content: "I am fnord.";
|
声明变量
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| @background: {background:red;}; #main{ @background(); } @Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); }
#main{ background:red; } #con{ width: 200px; height: 200px; border: solid 1px red; }
|
变量运算
加减法时 以第一个数据的单位为基准
乘除法时 单位注意要统一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| @width:300px; @color:#222; #wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; }
#wrap{ width:280px; height:200px; margin:1400px; color:#444; background-color:#333; }
|
嵌套
&
& 代表上一层选择器的名字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| #header{ &:after{ content:"Less is more!"; } .title{ font-weight:bold; } &_content{ margin:20px; } }
#header::after{ content:"Less is more!"; } #header .title{ font-weight:bold; } #header_content{ margin:20px; }
|
媒体查询
1 2 3 4 5 6 7 8
| #wrap{ width:500px; } @media screen and (max-width:768px){ #wrap{ width:100px; } }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| #main{
@media screen{ @media (max-width:768px){ width:100px; } } @media tv { width:2000px; } }
@media screen and (maxwidth:768px){ #main{ width:100px; } } @media tv{ #main{ width:2000px; } }
|
混合
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .card { // 等价于 .card() background: -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }
.card;//等价于.card(); } /* 生成的 CSS */
background: -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }
|
其中 .card 与 .card() 是等价的。 个人建议,为了避免 代码混淆,应写成card()
注意:
. 与 # 皆可作为 方法前缀
方法后写不写 () 看个人习惯
默认参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments; } #main{ .border(0px,5px,30px,red); } #wrap{ .border(0px); } #content{ .border; }
#main{ border:solid 1px red; box-shadow:0px,5px,30px,red; }
|
方法的匹配模式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| .triangle(top,@width:20px,@color:#000){ border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){ border-color:transparent @color transparent transparent ; }
.triangle(bottom,@width:20px,@color:#000){ border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){ border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ border-style: solid; border-width: @width; } #main{ .triangle(left, 50px, #999) }
#main{ border-color:transparent transparent transparent #999; border-style: solid; border-width: 50px; }
|
方法的命名空间
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| #card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h; } } } #wrap{ #card > .d > #a(100px); } #main{ #card .d(); } #con{ #card .d(20px); }
#wrap{ height:100px; } #main{ width:300px; } #con{ width:20px; }
|
when
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| #card{ .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; }
.background(@color) when not (@color>=#222){ background:@color; }
.font(@size:20px) when (@size>50px) , (@size<100px){ font-size: @size; } } #main{ #card>.border(200px,#999,solid); #card .background(#111); #card > .font(40px); }
#main{ border:solid #999 200px; background:#111; font-size:40px; }
|
比较运算有: > >= = =< <
= 代表的是等于
除去关键字 true 以外的值都被视为 false
不定参数 …
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .boxShadow(...){ box-shadow: @arguments; } .textShadow(@a,...){ text-shadow: @arguments; } #main{ .boxShadow(1px,4px,30px,red); .textShadow(1px,4px,30px,red); }
#main{ box-shadow: 1px 4px 30px red; text-shadow: 1px 4px 30px red; }
|
@arguments就代表全部的参数
!important
1 2 3 4 5 6 7 8 9 10 11 12 13
| .border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; }
#main { border: solid 1px red !important; margin: 50px !important; }
|
循环
Less 并没有提供 for 循环功能,但可以使用递归去实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| .generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
.column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
|
属性拼接
+_ 代表的是 空格;+ 代表的是 逗号
1 2 3 4 5 6 7 8 9 10 11 12
| .boxShadow() { box-shadow+: inset 0 0 10px } .main { .boxShadow(); box-shadow+: 0 0 20px black; } /* 生成后的 CSS */ .main { box-shadow: inset 0 0 10px }
|
1 2 3 4 5 6 7 8 9 10 11 12 13
| .Animation() { transform+_: scale(2); } .main { .Animation(); transform+_: rotate(15deg); }
.main { transform: scale(2) rotate(15deg); }
|
使用实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .average(@x, @y) { @average: ((@x + @y) / 2); }
div { .average(16px, 50px); padding: @average; }
div { padding: 33px; }
|
继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .animation{ transition: all .3s ease-out; .hide{ transform:scale(0); } }
&:extend(.animation); }
&:extend(.animation .hide); }
/* 生成后的 CSS */ .animation, transition: all .3s ease-out; } .animation .hide , transform:scale(0); }
|
all 全局搜索替换
all 全局搜索替换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| #main{ width: 200px; } #main { &:after { content:"Less is good!"; } } #wrap:extend(#main all) {}
#main,#wrap{ width: 200px; } #main:after, #wrap:after { content: "Less is good!"; }
|
可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr)
注意这与 pre:hover:extend(div pre, .bucket tr)
import
reference
使用@import (reference)导入外部文件,但不会添加 把导入的文件 编译到最终输出中,只引用
once
表明相同的文件只会被导入一次,而随后的导入文件的重复代码都不会解析
函数
判断类型
颜色操作
- saturate
- lighten
- darken
- fade
- mix
数字函数
- ceil
- floor
- percentage
- round
- sqrt
- abs
- pow
其他
注释
/* */ CSS原生注释,会被编译在 CSS 文件中。
/ / Less提供的一种注释,不会被编译在 CSS 文件中。
避免编译
1 2 3 4 5 6 7 8 9
| #main{ width:~'calc(300px-30px)'; }
#main{ width:calc(300px-30px); }
|
结构: ~’ 值 ’
变量拼接
1 2 3 4 5 6 7 8 9 10 11
| .circle:nth-child(@{i}){ .judeg(@i); border-radius:@size @size 0 0; animation: ~"circle-@{i}" @duration infinite @ease; transition-delay:~"@{i}ms"; } @keyframes ~"circle-@{i}" { } .loopAnimation(@i + 1); }
|
结构:~“字符@{变量}字符”;
使用js
因为 Less 是由 JS 编写,所以 Less 有一得天独厚的特性:代码中使用 Javascript 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| @content:`"aaa".toUpperCase()`; #randomColor{ @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)"; } #wrap{ width: ~"`Math.round(Math.random() * 100)`px"; &:after{ content:@content; } height: ~"`window.innerHeight`px"; alert:~"`alert(1)`"; #randomColor(); background-color: @randomColor; }
#wrap{ width: 随机值(0~100)px; height: 743px; background: 随机颜色; } #wrap::after{ content:"AAA"; }
|
其他更多
https://www.html.cn/doc/less/features/#features-overview-feature