Less和SASS

一，LESS

1,条件判断

在less中我们可以通过条件判断实现渲染不同的样式，有点像switch，不是通过if实现的，而是when实现的

在when方法中添加条件时，不需要单位

当判断相等时，使用等号（=）实现，没有（== 和 ===）

判断多个条件时，使用and关键字，配合when使用 when and

判断非语句，使用not ,when not

2,函数-Math

在less中我们可以像JS中使用Math对象一样使用less中的数学函数

Floor:向下取整（参数带单位）

Ceil:向上取整

Round：四舍五入

Percentage:将数值转化为百分数,(参数如果带有%单位是无效的)，参数只能是数组

sqrt():平方根

abs:()绝对值

sin:()sin 函数

asin():arcsin函数

cos():cos函数

acos():arccos函数

tan() :tan函数

atan():arctan函数

pi():返回π

pow(a,b):a的b次方

mod(m,n):m对n取余

convert(m,n):数字之间转换

unit(m,n):不转换情况下替换数字

3,颜色定义函数

rgb():可以生产一个16进制的色彩值，标准的色彩方法

语法：

rgb(red,green,blue)每一个值都是0-255

rgba():rgba(red，green ,blue,alpha)红绿蓝透明度

hsl():表示色相，饱和度和亮度模式，是一种工业标准色彩模式

语法：

hsl(h,s,l)

h:色相，表示某一种颜色(0-360)

s:饱和度，色彩的浓度,单位是白分数，0%表示灰色，100%表示纯色

l:亮度，单位也是百分比，0%表示黑色，100%表示白色

4，颜色通道

less中色彩通道的方法：

red():获取色中的红通道

green():获取色中的绿色通道

blue():获取色中的蓝色通道

alpha():获取色中的透明度通道

hue():获取色中的色值通道，数字（0-360）

saturation():饱和度通道，获取色中的饱和度通道，百分数

lightness():获取色中的亮度通道，结果是百分数

这七个通道方法都只能接受一个参数，这个参数就是某个颜色

灰色是有三个相同的通道组成的，值越小灰度越大

5,颜色操作

颜色操作类函数，用于处理色彩

fade();对色彩进行透明度处理

fade(color，alpha)

fade(red,0.4)

fadeIn():表示增加透明度，当第一个参数不是颜色时，得到的是一个16进制不透明的颜色，透明度大于1

fadeout():透明度减少，可以接受两个参数，第一个表示颜色，第二个表示透明度的变化，是一个百分数

greyscale():得到混合色灰色颜色值，接受一个表示颜色的参数

mix:将两种颜色混合，默认情况下取两种颜色的平均值，第三个参数表示取的数组，是百分比，表示色彩混合的权重

saturate();增加饱和度

参数1：颜色

参数2：饱和度的增加量

desaturate():减少饱和度

lighten();提高颜色亮度

参数1：颜色

参数2：提高的亮度

darken()：降低颜色亮度

6,色彩的混合函数

这个函数只做颜色处理，不处理图片

softlight:柔光处理

参数1：底色

参数2：添加色

hardlight:强光处理

参数1：底色

参数2：添加色

 

一，LESS

1，字符串方法

escape(str)：将字符串做URL转码

参数时需要转码的字符串,将空格等号 等字符转义

e():表示对字符串不做编译

replace():替换字符串中的子串

参数1：源字符串

参数2：被替换的字符串

参数3：替换的字符串

2，命名空间

命名空间是用来约束管理变量的，解决，变量在作用域中混乱的问题，防止变量污染作用域。

设计模式中单体模式是实现命名空间管理的一种常见设计模式。

在less中引入了该思想，在less中我们可以通过命名空间来管理变量混合，以及方法

为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，防止重名的出现，以及更好的管理变量和混合

 

&：在less中表示该元素，注意，&符号要写在里面

注意，引用混合时，要将属性赋值给谁就要放在谁的里面

 

3,作用域

Less到底是一个什么样的作用域呢？

在less中，作用域更像是一个块作用域，定在块内部的变量在外界访问不到。

在less中，访问变量的顺序，就近原则，哪个变量离他近就使用哪个

 

对于函数，它的存在也是依赖块级作用域，定义在块内部的函数，在外界访问不到，

但是我们可以通过命名空间使用它。

 

对于变量，他的存在也是依赖于块级作用域，定义在块内部的变量，我们在外界访问不到，

但是我们也不能通过命名空间访问。变量更像是一种私有的。

 

4，文件引入

如果将css样式全部写在一个文件中很不方便，所以要分开

利用文件引入，在less之间创建依赖

语法：

@import 'filename';

通过import 导入文件的内容，被导入的文件中的变量，混合，方法等内容在编译后悔留在当前文件中，可以被调用使用

5，插值

如果我们需要一个变量插入到一个字符串中，可以使用less的插值处理

语法：

@{key} //key 是变量名字

二，Sass

1,简介

SASS 是一种css的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使css的开发变得简单可维护

sass的本质是一种可以简化css工作流程方式，可以帮助我们更简单的开发和维护css内容

sass是ruby语言写的，因此电脑需要先安装ruby,mac已经自带了，windows系统需要重新安装环境

@url:escape('../images/bg.jpg?a=10');

@url1:e('../images/bg.jpg?a=10');

.box{

width: 100px;

height: 100px;

background:url(@url);

-webkit-background-size: 100%;

//background-color:url(@url1);

background-size: 100%;

//background: e('rgb(100,200,50)');

 

}

.box::before{

//只能替换第一个出现的red

content:replace('this color is red','red','green');

color:red;

}

一般情况sass文件会写为scss:

sass index.scss index.css

2,变量与作用域

变量定义：$key: value;

作用变量的影响：在作用域内部定义的变量，外部无法访问，是私有的

3，父选择器

在sass中可以通过&符号，在父选择器内部访问父选择器

选择当前选择器

4,属性嵌套

sass对css属性进行嵌套，通常是对符合属性进行嵌套

border-top-color

==>

border:{

top:{

color:red;

}

left:{

style:solid;

}

}

在css中，对属性嵌套，当编译时会根据嵌套的层级进行编译结果

5，混合

sass中混合作用是为了继承复用

语法：

定义：@mixin names {width:100px}

使用：@include names;

混合可以传参：(参数默认值)

定义：@mixin names($w,$h:100px){width:100px;}

使用：@include names(100px,200px,)

多参数混合：

6,继承

sass中的混合与less中的方法有点像

sass中的继承与less中的混合有点像

继承是用来实现对其他类或者元素或者ID样式的继承

语法：

@extend 选择器；

sass不仅仅可以继承元素名称的选择器，还可以继承自定义的元素名称选择器