一、变量
Less是@,而Scss是$,而且变量的作用域也不一样
/** scss用$ 定义变量 **/
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
/** less用@ 定义变量 **/
@color:red;
p{
@color:blue;
color:@color; //blue
}
a{
color:@color; //red
}
二、变量插值
LESS 采用 @{xxxx} 的形式,SCSS 采用 ${xxxx} 的形式
// less
@my-selector: banner;
// Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
// scss
$my-selector: banner;
// Usage
.#{$my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
三、Mixins 的定义、使用及参数
LESS 使用 dot 符号(也就是句点)来定义一个 Mixin,并且可以把任意的 CSS 规则作为 Mixin 使用;SCSS 使用 @mixin 指令来定义一个 Mixin。
//LESS 如果存在多个参数的话,LESS 使用分号分隔;
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.a {
.center-block;
}
//SCSS SCSS 使用逗号分隔。两者都支持为参数设置默认值
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.a {
@include center-block;
}
四、引用父选择器 & 符号的使用
//两者相同都用 & 标识父级
a {
background-color:red;
&:hover{
font-size:60px;
}
}
//编译后
a {
background-color: red;
}
a:hover {
font-size: 60px;
}
五、@import导入样式
// a.scss
$width : 100px;
.before {
width: $width;
}
@import "b";
.after {
width: $width;
}
.container {
width: $width;
height: $height;
border: 1px solid;
}
// b.scss
$width : 200px;
$height : 200px
// a.css 编译后
.before {
width: 100px;
}
.after {
width: 200px;
}
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
六、混合器(宏) @mixin 定义 @include 调用
scss
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 编译后:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
a {
@include link-colors(blue, red, green);
}
// 编译后:
a {
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
@extend 使用选择器继承来精简CSS
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 编译后:
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}
七、@if @for @function
SCSS支持条件语句,LESS不支持 但支持循环
//@if 当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
// 编译为
p {
border: 1px solid;
}
// @for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。
@for $i from 1 through 3 { (包含3)
.item-#{$i} { width: 2em * $i; }
}
//或者
@for $i from 1 to 3 { (不包含3)
.item-#{$i} { width: 2em * $i; }
}
// 编译为
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
//@function Sass支持自定义函数,并能在任何属性值或Sass script中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
// 编译为
#sidebar {
width: 240px;
}
八、编译输出格式
Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。
.box { /* 未编译样式 */
width: 300px;
height: 400px;
&-title { (& 父选择器)
height: 30px;
line-height: 30px;
}
}
//nested 编译排版格式(嵌套的)
/* sass style.scss:style.css --style nested 命令行内容*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式(展开的)
/*命令行内容 sass style.scss:style.css --style expanded */
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
//compact 编译排版格式(紧凑的)
/*命令行内容 sass style.scss:style.css --style compact */
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
//compressed 编译排版格式(压缩的)
/*命令行内容 sass style.scss:style.css --style compressed */
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}