学习笔记——CSS预编译语言Less和Scss的使用

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;
}