一、sass与less的区别:
1.实现方式:
Less是基于JavaScript,是在客户端处理的
Sass是基于Ruby的,是在服务器端处理的
2.变量:
Less: @
Sass: $
3.Sass比Less扩展语法多
二、less
1.变量:@name
2.混合:定义.class{} 、 使用 .class()
3.嵌套:.class{.class{}}
4.注释:/***/ , //
5.calc:计算
6.导入:@import “url”
7.maps对象:
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
8.&引用:
.class{
color:#333;
&:hover{...}
}
三、Sass
1.变量: $name
2.> + ~ : 直接子元素、紧跟同级元素、所有同级元素
3.局部css:.blue-theme {@import “blue-theme”} // _blue-theme.scss
4.静默注释:属性结尾
1、// 这是注释 (不会生成在.css文件中)
2、/* 这是注释 */(会生成在.css文件中)
5.@mixin: 混合器 @include name 提取混合内容
接受传参:@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
顺序传参:a {
@include link-colors(blue, red, green);
}
指定传参:a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
)
}
传递样式片段:@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
@content;
}
.button-green {
@include button {
background: green
}
}
6.@extend: 当样式和选择器之间的关系在某些方面比较紧密的时候,使用@extend。除此之外,你可以使用@mixin在任何地方
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}