less sass stylus

不同点

编译环境不一样

sass需要ruby环境

less需要引入less.js(浏览器)

stylus 需要安装node

变量符不一样

sass $color:'#ccc'

less @color:'#ccc'

stylus mainColor='#ccc'

scss使用

语法功能扩展

1选择器嵌套

2属性嵌套

.contaniner a {
  font-size:12;
  font-weight:400;
  font-family:
}
.contaniner{
 a{
   font: {//font:后加空格
     size:12;
     weight:400;
     family:
   }
  }
}
}

3父选择器&

.contanier {}
.contanier a {}
.contanier a :hover {}
.contanier top {}
.contanier top-left {}

.container {
 a { 
   &:hover {
  }
 }
 top {
   &-left {
   }
 } 
}

4占位符%

//按钮基本样式
.button%base{
  border：1px solid #ccc;
  
} //未使用不会编译

.button-default {
  @extend:%base;  //使用时 占位符选择器才会编译
  color:'red'
}
.button-default {
  @extend:%base;
   color:'green'
}

scss注释

单行 //。 单行注释不会编译到最终的css文件中

多行 /* */

scss变量

css中的变量

body{ --color:'red'}

:root {--border-color:'black'}

.header {-backgroud-color:'#ccc'}

 p {    color:var(-color);   border-color: var(--border-color)  }

.header { backgroud-color:var(--backgroud-color)}

scss

$color:'red'

.contanier { color:$color}

1 变量不以数字开头 变量一定要先定义后使用

2 通过连接符和下划线定义的同名变量为同一变量 建议使用连接符

$border-color:'blue' $border_color:'red'

.contanier{ border-color:$border-color} 最终编译成red

3变量作用域

//全局变量
$font-size:14
.contanier{font-size:$font-size}
//！global
.contanier {$font-size:16 !global font-size:$font-size}
.a{font-size:$font-size}

//局部变量
.contanier {
  $font-size:16 
  font-size:$font-size
  p {
   font-size:$font-size
  }
}

变量值的类型 数字(1 10px) 字符串(有引号字符串无引号字符串) 颜色 布尔值 空值 数组（用空格或逗号作为分隔符）maps(相当于object)

$blank-mode:true
$color-map:(color1:'red',color2:'blue')
.container {
  @if $blank-mode{ 
    backgroud-color:'red'
  }@else{
    backgroud-color:'blue'
  }
 //map-get函数
  color:map-get($color-map,color2)
}

scss变量默认值 $color:#ccc !default

$color:#333

$color: #666 !default 

=>#333

scss导入

css导入 @import url(css.css)

scss导入 @import 'public'

@import 'public'

.a {

 color:$color

}


public.css

$color:'red'

scss 会编译成css 如果不想被编译 加_        _public.scss