1.Less:
.box { width: 100px; }
// 单行注释
/* 多行注释 */
/* 变量 */
@number: 123px;
.box2 { width: @number; }
/* 插值 */
@i: 3;
@key: margin;
.box@{i} { @{key}: auto; }
/* 作用域 */
@num: 12px;
.box4 {
width: @num;
@num: 13px;
height: @num;
}
/* 选择器嵌套 */
ul {
list-style: none;
li {
float: left;
div { margin: 10px; }
p { margin: 20px; }
}
}
/* 伪类选择器 */
.class {
.box { color: blue; }
&:hover { color: red; }
}
/* 属性嵌套不可用,less无法属性嵌套 */
// .attribute {
// font-size: 20px;
// font : {
// size: 30px;
// weight: bold;
// family: 宋体;
// }
// }
/* 运算 */
/* 当两个运算数单位不同时,以第一个数为准 */
@numA: 100px;
.box4 {
width: @numA + 3em;
height: 3em + @numA;
padding: 20px/1.5;
margin: ~"20px / 1.5";
color: #001122 * 2;
}
/* 函数 */
/*
内置函数:
round(): 约分
percentage(): 百分比
random(): 产生随机数
sqrt(): 开方
*/
.box5 {
width: round(3.5px);
height: percentage(0.2);
// margin: random(); less无random()
padding: sqrt(25%);
}
/* 混入 */
.show { display: block; }
.hide(@color) {
display: none;
color: @color;
}
.box6 {
width: 100px;
.show;
.hide(blue);
}
/* 命名空间 */
#nm() { .show { display: inline-block; } }
.box7 { #nm.show; }
/* 继承 */
.line { display: inline; }
.box9 { &:extend(.line); }
/* 合并 */
.box10 {
background+: url(a.png);
background+: url(b.png);
transform+_: scale(2);
transform+_: rotate(30deg);
}
/* 媒体查询(可以正常写) */
.box11 {
width: 100px;
@media all and(min-width: 768px) {
width: 600px;
}
@media all and(min-width: 1440px) {
width: 1200px;
}
}
/* 条件 */
@count: 5;
.get(@cn) when (@cn > 4) {
width: 100px + @cn;
}
.get(@cn) when (@cn < 4) {
width: 10px + @cn;
}
.box12 {
.get(@count);
}
/* 循环 */
@count2: 11;
.get2(@cn) when (@cn < 18) {
.get2(@cn + 1);
.box-@{cn} { width: 100px + @cn; }
}
.get2(@count2);
/* 导入 */
@import './reset.less';
编译后:
.box {
width: 100px;
}
/* 多行注释 */
/* 变量 */
.box2 {
width: 123px;
}
/* 插值 */
.box3 {
margin: auto;
}
/* 作用域 */
.box4 {
width: 13px;
height: 13px;
}
/* 选择器嵌套 */
ul {
list-style: none;
}
ul li {
float: left;
}
ul li div {
margin: 10px;
}
ul li p {
margin: 20px;
}
/* 伪类选择器 */
.class .box {
color: blue;
}
.class:hover {
color: red;
}
/* 属性嵌套不可用,less无法属性嵌套 */
/* 运算 */
/* 当两个运算数单位不同时,以第一个数为准 */
.box4 {
width: 103px;
height: 103em;
padding: 20px/1.5;
margin: 20px / 1.5;
color: #002244;
}
/* 函数 */
/*
内置函数:
round(): 约分
percentage(): 百分比
random(): 产生随机数
sqrt(): 开方
*/
.box5 {
width: 4px;
height: 20%;
padding: 5%;
}
/* 混入 */
.show {
display: block;
}
.box6 {
width: 100px;
display: block;
display: none;
color: blue;
}
/* 命名空间 */
.box7 {
display: inline-block;
}
/* 继承 */
.line,
.box9 {
display: inline;
}
/* 合并 */
.box10 {
background: url(a.png), url(b.png);
transform: scale(2) rotate(30deg);
}
/* 媒体查询(可以正常写) */
.box11 {
width: 100px;
}
@media all and (min-width: 768px) {
.box11 {
width: 600px;
}
}
@media all and (min-width: 1440px) {
.box11 {
width: 1200px;
}
}
/* 条件 */
.box12 {
width: 105px;
}
/* 循环 */
.box-17 {
width: 117px;
}
.box-16 {
width: 116px;
}
.box-15 {
width: 115px;
}
.box-14 {
width: 114px;
}
.box-13 {
width: 113px;
}
.box-12 {
width: 112px;
}
.box-11 {
width: 111px;
}
/* 导入 */
* {
padding: 0;
margin: 0;
}
2.Scss:
.box { width: 100px; }
// 单行注释
/* 多行注释 */
/* 变量 */
$number: 123px;
.box2 { width: $number; }
/* 插值 */
$i: 3;
$key: margin;
.box#{$i} { #{$key}: auto; }
/* 作用域:作用域有顺序 */
$num: 12px;
.box4 {
width: $num;
$num: 13px;
height: $num;
}
/* 选择器嵌套 */
ul {
list-style: none;
li {
float: left;
div { margin: 10px; }
p { margin: 20px; }
}
}
/* 伪类选择器 */
.class {
.box { color: blue; }
&:hover { color: red; }
}
/* 属性嵌套 */
.attribute {
font-size: 20px;
font : {
size: 30px;
weight: bold;
family: 宋体;
}
}
/* 运算 */
/* 不同单位之间无法计算 */
$numA: 100px;
.box4 {
width: $numA + 3px;
// 默认"/"是分割运算
padding: (20px / 1.5);
margin: 20px / 1.5;
color: #001122 * 2;
}
/* 函数 */
/*
内置函数:
round(): 约分
percentage(): 百分比
random(): 产生随机数
sqrt(): 开方
*/
/* 自定义函数 */
@function sum($n,$m) {
@return $n + $m;
}
.box5 {
width: round(3.5px);
height: percentage(0.2);
margin: random();
// padding: sqrt(25%); sass无sqrt()
font-size: sum(4px ,5px);
}
/* 混入 */
@mixin show { display: block; }
@mixin hide($color) {
display: none;
color: $color;
}
.box6 {
width: 100px;
@include show;
@include hide(blue);
}
/* 无命名空间 */
/* 继承 */
.line { display: inline; }
.box7 { @extend .line; }
/* 百分号占位 */
%line1 { display: inline; }
.box7 { @extend %line1; }
/* 合并 */
$background: (
a: url(a.png),
b: url(b.png)
);
$transform: (
a: scale(2),
b: rotate(30deg)
);
.box8 {
background: map-values($background);
transform: zip(map-values($transform)...);
}
/* 媒体查询(可以正常写) */
.box11 {
width: 100px;
@media all and(min-width: 768px) {
width: 600px;
}
@media all and(min-width: 1440px) {
width: 1200px;
}
}
/* 条件 */
$count: 4;
.box12 {
@if($count > 4) { width: 100px + $count; }
@else { width: 10px + $count; }
}
/* 循环 */
@for $i from 0 through 3 {
.box-#{$i} { width: 100px + $i; }
}
/* 导入 */
@import './reset.scss';
编译后:
@charset "UTF-8";
.box {
width: 100px;
}
/* 多行注释 */
/* 变量 */
.box2 {
width: 123px;
}
/* 插值 */
.box3 {
margin: auto;
}
/* 作用域:作用域有顺序 */
.box4 {
width: 12px;
height: 13px;
}
/* 选择器嵌套 */
ul {
list-style: none;
}
ul li {
float: left;
}
ul li div {
margin: 10px;
}
ul li p {
margin: 20px;
}
/* 伪类选择器 */
.class .box {
color: blue;
}
.class:hover {
color: red;
}
/* 属性嵌套 */
.attribute {
font-size: 20px;
font-size: 30px;
font-weight: bold;
font-family: 宋体;
}
/* 运算 */
/* 不同单位之间无法计算 */
.box4 {
width: 103px;
padding: 13.33333px;
margin: 20px / 1.5;
color: #002244;
}
/* 函数 */
/*
内置函数:
round(): 约分
percentage(): 百分比
random(): 产生随机数
sqrt(): 开方
*/
/* 自定义函数 */
.box5 {
width: 4px;
height: 20%;
margin: 0.46593;
font-size: 9px;
}
/* 混入 */
.box6 {
width: 100px;
display: block;
display: none;
color: blue;
}
/* 无命名空间 */
/* 继承 */
.line, .box7 {
display: inline;
}
/* 百分号占位 */
.box7 {
display: inline;
}
/* 合并 */
.box8 {
background: url(a.png), url(b.png);
transform: scale(2) rotate(30deg);
}
/* 媒体查询(可以正常写) */
.box11 {
width: 100px;
}
@media all and (min-width: 768px) {
.box11 {
width: 600px;
}
}
@media all and (min-width: 1440px) {
.box11 {
width: 1200px;
}
}
/* 条件 */
.box12 {
width: 14px;
}
/* 循环 */
.box-0 {
width: 100px;
}
.box-1 {
width: 101px;
}
.box-2 {
width: 102px;
}
.box-3 {
width: 103px;
}
/* 导入 */
* {
padding: 0;
margin: 0;
}