Less Sass

less

1. 变量 可运算
   对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果

.border(@yourcolor:red){ //传递参数的函数调用:定义默认值
    border:1px solid @yourcolor;
}
@color :blue; //定义变量 
@blue : 'color' ;
@height:10px; 
@width:100px; 
#header {
	.border(yello)   //混入class
    height: @height * 2; //计算
    width: @width; 
    color: @blue; 
    a:first-child{//套嵌描述子元素样式,写法类似dom的层级关系
        color:@color;
        &:hover{ //伪类选择器,用&符号,	
            color:yellow;
        }
    }; 
}     

2. 混入
   在 LESS 中我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性.
3. 套嵌
   我们平时在写css的时候,通常会多次运用选择器选择子元素进行样式控制
   伪类选择器 添加a&:hover{}
4. 函数
   Less 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等

//循环.loop
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}
div {
  .loop(5); // launch the loop
}

less 颜色操作函数

color = hsl(90,80%,50%)

	增加	减少
色相0-360度	spin(color,10)	spin(color,-10)
饱和度 0-1	saturate(color,20%)	desaturate(color,20%)
明暗度 0-1	lighten(color,20%)	darken(color,20%)
透明度0-1	fadein(color,20%)	fadeout(color,20%)

Sass

在windows上如果想要使用sass,我们需要配置ruby环境,首先安装ruby,配置项选择添加到环境变量中
ruby -v可以查看安装的ruby版本号，gem install sass安装在你的全局环境中.

@import ‘partial’

CSS中原本就有不常用的@import语法，但是有两个弊端：

引入语句一定要卸载代码最前面才会生效；
影响性能。如果A文件要引入B文件，当浏览器读到A文件时会再去下载B，阻塞进程。
而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来，也就是所有相关的样式会被编译到同一个CSS文件中，无需发起额外的请求。

@import ‘partial’       //导入名为“_partial.scss”的文件
@import ‘toolbar.css’       //导入名为“toolbar.css”的文件
* {
    margin: 0;
    padding: 0;
}

基础的文件命名需要以’_’ 开头，如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀，可写成@import “partial”。但是倒入CSS文件的话，就需要“文件名+后缀”

CSS导入

Sass的@import直接导入一个原始的CSS文件，因为sass会认为你想用CSS原生的@import。
因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入

颜色函数

darken($box-color,30%); 
lighten(#cc3, 10%) // #d6d65c
grayscale(#cc3) // #808080
complement(#cc3) // #33c

代码重用之Mixin混合器

• List item

代码重用之继承 extend

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。
使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

.class1 {
    border: 1px solid #333;
}

.class2 {
    @extend .class1;
    background-color: #999;
}

//编译后
.class1, .class2 {
  border: 1px solid #333;
}

.class2 {
  background-color: #999;
}

选择器&&属性嵌套

父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

变量实现多处重复引用