Less与Scss基础总结

一、LESS
1.变量

// 变量作为属性
@color : red;
.setting{
    color:@color
}

// 变量作为选择器和属性名
@width:width;
.@{width}{
    @{width}:200px;
    height: 100px;
    background-color: @color;
}

2.混合(mixins)

// 1)一般混合
.common{
    color: red;
    font-size: 30px;
    font-weight: 800;
}
.top{
    border-top: 1px solid red;
    .common;
}

.bottom{
    border-bottom: 1px solid red;
    .common;
}
注：如果想要混合并且不输出到自己的样式中，可在样式名后加上()
.common(){
    color: red;
    font-size: 30px;
    font-weight: 800;
}

// 2)带伪类的混合
.border(){
    &:hover{
        border:1px solid red;
    }
}

.show-border{
    width: 300px;
    height: 300px;
    .border;
}

// 3)带参数的混合
.border(@width,@color){
    border: @width solid @color;
}
.top-border{
    .border(20px,red)
}

// 4)带参数的并且有默认值的混合
.border(@width:20px,@color:green){
    border: @width solid @color;
}
.top-border{
    .border(10px,red)
}

// 5)命名参数的混合
.mixin(@width:1px,@color:black){
    border: @width solid @color;
}

.bottom-border{
    .mixin(@width:10px,@color:yellow)
}

// 6)匹配模式
.border(all,@width:5px){
    border-radius: @width;
}

.border(t_l,@width:5px){
    border-top-left-radius: @width;
}

.bottom-border{
    width: 50px;
    height: 50px;
    background-color: blue;
    .border(t_l,@width:30px);
}

// 7)混合的返回值
.avergae(@x,@y){
    @avergae:((@x+@y)/2);
}

.bottom-border{
    .avergae(10px,20px);
    border: @avergae solid red;
}

3.引入

setting.less文件：
	@width:10px;
	
@import './setting.less';
.bottom-border{
    width:10px;
    height: 10px;
    border: @width solid red;
}

4.条件表达式

.mixin(@a) when (lightness(@a) >= 50%){  // lightness 输出颜色值的亮度
    width: 10px * @a;
}
.bottom-border{
    width: .mixin(5);
    height: 50px;
}

5.循环

.loop(@a) when (@a > 1){
    h@{a}{
        margin-left: 10px * @a;
    }
    .loop(@a - 1);
}
.bottom-border{
    .loop(6);
}

6.合并属性值

.mixin{
    padding+_: 10px;
}

.bottom-border{
    .mixin;
    padding+_: 20px 30px 40px;
}
注：+_是以空格合并，上述合并结果为10px 20px 30px 40px；+是以','合并，那么合并结果为10px，20px 30px 40px

二、Sass
1.变量

1)普通变量
$color:red;
.bottom-border{
    color: $color;
}

2)$map
$maps:(color:red,fontSize:20px);
.bottom-border{
    color: map-get($maps, color );
    font-size: map-get($maps, fontSize);
}

3)作为属性名
$className:'bottom-border';
.#{$className}{
    color: red;
}

4)nth
$bg-color: #D6E9C5  #C3E5C3  red;
.bottom-border{
    color: nth($bg-color, 3);  // red
}

5)模板字符串
$name: wq;
.bottom-border:before{
    content: 'hello #{$name}';
}

2.嵌套

属性嵌套
.bottom-border{
    background: {
        color: yellow;
        size: 100px 80px;
    };
}

3.继承

1)单继承
.bg {
    background-color: red;
}
.bottom-border{
    width: 50px;
    height: 50px;
    @extend .bg;
}

2)多继承
.bg {
    background-color: red;
}
.size {
    font-size: 30px;
}
.bottom-border{
    width: 50px;
    height: 50px;
    @extend .bg, .size;
}

4.占位选择器 %
作用：只有在被引用的时候才会被编译，自己不会被编译，相当于Less中属性名后加()

%two{
    background-color: yellow;
}
.bottom-border{
    @extend %two;
}

5.mixin

1)最基本的用法
@mixin content {
    color: red;
}
.bottom-border{
    @include content;
}

2)传参数
@mixin content($color:red) {
    color: $color;
}
.bottom-border{
    @include content(yellow);
}

6.自定义函数

@function double($width){
    @return $width * 2;
}

.bottom-border{
    width: double(20px);
    background-color: red;
}

7.条件控制

1)三目运算符
$screenWidth:800;
.bottom-border{
    width: 300px;
    background-color: if($screenWidth < 900,red,blue);
}

2)@if...@else...
$screenWidth:800;
.bottom-border{
    width: 300px;
}
@if $screenWidth > 700 {
    .bottom-border{
        background-color: blue;
    }
} @else {
    .bottom-border{
        background-color: red;
    }
}

3)@for
@for $i from 1 through 5 {
    h#{$i}{
        font-size: $i * 2px !important;
    }
}

4)@while
$i:5;
@while $i > 0 {
    h#{$i}{
        font-size: 20px;
    }
    $i:$i - 1;
}

5)@each
$i:1;
@each $color in blue, red, pink, yellow, black {
    h#{$i}{
        color: $color;
    }
    $i: $i + 1;
}